<template>
  <div class="pageContent" v-if="showPage">
    <div class="mainPage">
      <div class="top">
        <img :src="topImg">
        <div class="top-div" v-if="status<4">
          <div class="countdown" :class="{'on':status < 3,'off':status == 3}" v-html="countdown"></div>
          <div class="userInfo">
            <div class="avatars">
              <img class="cover" :src="recordUser.HeadImg">
            </div>
            <div class="info">
              <p>&nbsp;{{recordUser.Name}}</p>
              <p>
                已有
                <span class="marked">{{list.length}}</span> 位好友帮TA砍价了，共砍掉
                <span class="marked">￥{{(list.length*29.6).toFixed(1)}}</span> 元
              </p>
            </div>
          </div>
        </div>
        <div class="self-end" v-if="status==4">
          <div>
            恭喜你！已砍至
            <span>0</span>
            <span>元</span>
          </div>
          <div>获得价值1888元的悦见山新年全家福定制台历拍摄福利</div>
          <div>请及时前往江北新区.白马路10号.银城颐居.悦见山营销中心领取</div>
        </div>
      </div>
      <div class="active" v-if="status<4">
        <h2>悦见山全家福拍摄助力砍价活动</h2>
        <div class="price">
          <span :class="{'off':status == 3}">砍后价：￥{{(888-list.length*29.6).toFixed(1)}}</span>
          <span>最多砍至0元</span>
        </div>
        <div class="desc">
          <span>原价1888元, 悦见山亲情价￥888</span>
          <span>仅剩{{game.note.LeftNum}}个名额</span>
        </div>
      </div>
      <div class="list">
        <div class="title">
          <img :src="paihang">
          <span>砍价记录</span>
        </div>
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="avatars">
            <img class="cover" :src="item.HeadImg" alt>
          </div>
          <div class="info">
            <p>{{item.CustomerName}}</p>
            <span>{{toolClass.dateFormat(item.CreateDate,'yyyy-MM-dd')}}</span>
          </div>
          <div class="price">
            <span>已砍：</span>
            <span>￥29.6</span>
          </div>
        </div>
      </div>
    </div>
    <div class="dailog" v-if="showDailog" @click="showDailog = false">
      <div class="dailog-box" @click.stop="1+1">
        <img :src="popBg">
        <div class="log1">
          <div>您已成功帮好友砍掉</div>
          <div>
            29.6
            <span>元</span>
          </div>
          <div @click="toLuckDraw()" style="font-weight:700;font-size:.18rem;color:#C54024;">
            您有一次抽奖机会，立即前往
            <i class="iconfont icon-you"></i>
          </div>
          <img class="btn" :src="btn" @click="$router.push({name:'supportMain'})">
        </div>
      </div>
    </div>
    <div class="other-end" v-if="status == 5">
      <div class="box">
        <p>您的好友已砍价至0元，</p>
        <p>感谢您的参与</p>
        <div @click="$router.push({name:'supportMain'})">我也要报名</div>
      </div>
    </div>
    <div class="today-end" v-if="status == 6">
      <div class="box">
        <img :src="kulian">
        <p>今日的助力活动已结束，</p>
        <p>明天再来吧！</p>
      </div>
    </div>
    <div class="bottom" v-if="status < 4">
      <div :class="{'on':status < 3,'off':status == 3}" @click="support()">{{btnText}}</div>
    </div>
  </div>
</template>

<script>
import topImg from '@/assets/topImg.jpg'
import paihang from '@/assets/paihang.png'
import popBg from '@/assets/pop-bg.png'
import presentClose from '@/assets/presentClose.png'
import btn from '@/assets/btn.png'
import kulian from '@/assets/kulian.png'
import wxsdk from '@/util/share'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('main')
// const wx = require('weixin-js-sdk')
export default {
  data () {
    return {
      topImg,
      paihang,
      popBg,
      presentClose,
      btn,
      kulian,
      status: 1,
      btnText: '邀请好友助力',
      showDailog: false,
      showPage: false,
      seconds: 0,
      time: 0,
      recordid: ''
    }
  },
  computed: {
    ...mapIndexState({
      userInfo: item => item.userInfo,
      game: item => item.game,
      recordInfo: item => item.recordInfo,
      list: item => item.supports,
      recordUser: item => item.recordUser
    }),
    countdown () {
      if (this.status != 3 && this.time >= 0) {
        let hour = 23 - new Date().getHours()
        let minutes = 59 - new Date().getMinutes()
        let seconds = 59 - new Date().getSeconds()
        return `<span style='color:#fff;'>砍价倒计时</span>
        <span style='padding: 0.02rem 0.03rem 0;background: #5e5e5e;color: #fff;border-radius:4px;'>${hour > 9 ? hour : '0' + hour}</span>
        <span style='color:#fff;'>:</span>
        <span style='padding: 0.02rem 0.03rem 0;background: #5e5e5e;color: #fff;border-radius:4px;'>${minutes > 9 ? minutes : '0' + minutes}</span>
        <span style='color:#fff;'>:</span>
        <span style='padding: 0.02rem 0.03rem 0;background: rgba(255, 66, 28, 1);color: #fff;border-radius:4px;'>${seconds > 9 ? seconds : '0' + seconds}</span>`
      } else {
        let hour = '00'
        let minutes = '00'
        let seconds = '00'
        return `<span style='color:#fff;'>活动已结束</span>
        <span style='padding: 0.02rem 0.03rem 0;background: #5e5e5e;color: #fff;border-radius:4px;'>${hour}</span>
        <span style='color:#fff;'>:</span>
        <span style='padding: 0.02rem 0.03rem 0;background: #5e5e5e;color: #fff;border-radius:4px;'>${minutes}</span>
        <span style='color:#fff;'>:</span>
        <span style='padding: 0.02rem 0.03rem 0;background: rgba(255, 66, 28, 1);color: #fff;border-radius:4px;'>${seconds}</span>`
      }
    }
  },
  created () {
    this.getGame().then(() => {
      if (this.$route.params.recordid == 0) {
        this.recordid = this.game.record.RecordId
        this.getRecord(this.recordid).then(() => {
          this.share(this.recordid)
        })
      } else {
        this.recordid = this.$route.params.recordid
        this.getRecord(this.recordid).then(() => {
          this.share(this.recordid)
        })
      }
    })
    setInterval(() => {
      this.time = new Date().getSeconds()
    }, 1000)
  },
  methods: {
    ...mapIndexActions(['getGame', 'getRecord', 'setSupport']),
    checkStatus () {
      if (this.$route.params.other == 'other' && this.$route.params.recordid != this.game.record.RecordId) {
        this.status = 2
        this.btnText = '立即助力TA'
        if (this.list.length >= this.game.game.UserNum) {
          this.status = 5
        }
        if (this.game.note.LeftNum <= 0) {
          this.status = 6
        }
      } else {
        if (this.game.note.LeftNum <= 0) {
          this.status = 6
        }
        if (this.list.length >= this.game.game.UserNum) {
          this.status = 4
        }
      }
      let end = new Date(this.game.game.EndDate).valueOf()
      let now = new Date().valueOf()
      if (now > end || this.game.game.Status == 2) {
        this.status = 3
        this.btnText = '立即助力TA'
      }
      this.showPage = true
    },
    share (recordid) {
      let link = `${window.location.origin}${window.location.pathname}#/supportDetail/other/${recordid}`
      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
        title: '定格陪伴，悦见山全家福定制台历拍摄火热报名中',
        desc: '我正在参加悦见山助力活动，快来帮我助力吧~',
        link: link,
        thu_image: `http://spaceofcheng.oss-cn-beijing.aliyuncs.com/IMG_58371544441587.JPG?x-oss-process=style/wxicon`
      }).then(() => {
        setTimeout(() => {
          this.checkStatus()
        }, 200)
      })
    },
    support () {
      if (this.status === 1) {
        this.$toast('微信右上角分享，让好友帮你助力哦！')
      } else if (this.status === 2) {
        this.setSupport({ customerid: this.userInfo.CustomerId, recordid: this.$route.params.recordid }).then(() => {
          this.getRecord(this.recordid).then(() => {
            this.showDailog = true
          })
        })
      } else if (this.status === 3) {
        this.$toast('活动已结束')
      }
    },
    toLuckDraw () {
      window.location.href = 'http://spaceofcheng.ycjcjy.com/game/luckdraw/#/?lotteryId=d04f645f-5557-48f3-9ad3-4cf3546dbc23'
    }
  }
}
</script>

<style lang="scss" scoped>
.self-end {
  padding: 0.1rem;
  border-bottom: 0.06rem solid rgba(235, 241, 242, 1);
  div {
    text-align: center;
    color: #717171;
    font-size: 0.12rem;
    padding-bottom: 0.05rem;
  }
  div:nth-of-type(1) {
    font-size: 0.18rem;
    color: #000;
    span:nth-of-type(1) {
      color: #fc6243;
      font-size: 36px;
    }
    span:nth-of-type(2) {
      color: #fc6243;
      font-size: 16px;
    }
  }
  div:nth-of-type(2) {
    font-size: 14px;
    color: #000;
  }
}
.today-end {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 2.6rem;
    height: 1.7rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 0.04rem;
    img {
      width: 0.55rem;
      margin-bottom: 0.15rem;
    }
    p {
      font-size: 0.16rem;
    }
  }
}
.other-end {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 2.6rem;
    height: 1.7rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 0.04rem;
    p {
      font-size: 0.16rem;
    }
    div {
      padding: 0.07rem 0.25rem;
      border: 1px solid #fc6243;
      color: #fc6243;
      border-radius: 0.04rem;
      margin-top: 0.25rem;
    }
  }
}
.dailog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  .dailog-box {
    width: 100%;
    height: 3.9rem;
    position: relative;
    > img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .log1 {
      width: 100%;
      height: 100%;
      padding-top: 0.8rem;
      text-align: center;
      div:nth-of-type(1) {
        font-size: 0.16rem;
        text-align: center;
        margin-bottom: 0.1rem;
      }
      div:nth-of-type(2) {
        font-size: 0.5rem;
        text-align: center;
        margin-bottom: 0.05rem;
        span {
          font-size: 0.2rem;
        }
      }
      div:nth-of-type(3) {
        font-size: 0.16rem;
        text-align: center;
        margin-bottom: 0.12rem;
        i {
          color: #9a9a9a;
        }
      }
      .present {
        display: block;
        width: 1.4rem;
        margin: 0 auto;
      }
      .btn {
        margin-top: 0.5rem;
        width: 1.8rem;
      }
    }
  }
}
.top {
  img {
    width: 100%;
    height: 2.5rem;
  }
  .top-div {
    padding: 0.1rem 0.18rem;
    border-bottom: 0.06rem solid rgba(235, 241, 242, 1);
    .countdown {
      width: 100%;
      height: 0.38rem;
      text-align: center;
      line-height: 0.38rem;
      margin-bottom: 0.15rem;
      border-radius: 0.2rem;
      &.on {
        background: #000;
      }
      &.off {
        background: #b8b8b8;
      }
    }
    .userInfo {
      display: flex;
      .avatars {
        width: 0.42rem;
        height: 0.42rem;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        flex: 1;
        padding-left: 0.05rem;
        p {
          padding-bottom: 0.05rem;
          font-size: 0.12rem;
        }
        p:nth-of-type(2) {
          color: #797979;
        }
        .marked {
          color: rgba(252, 98, 67, 1);
        }
      }
    }
  }
}
.active {
  padding: 0.1rem 0.18rem;
  border-bottom: 0.06rem solid rgba(235, 241, 242, 1);
  div {
    margin-top: 0.08rem;
  }
  .price {
    span {
      font-size: 12px;
    }
    span:nth-of-type(1) {
      background: rgba(252, 98, 67, 1);
      border-radius: 2px;
      color: #fff;
      padding: 0.04rem 0.08rem 0.02rem;
      margin-right: 0.2rem;
      font-size: 0.13rem;
    }
    .off {
      background: #b8b8b8;
    }
  }
  .desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 0.12rem;
    }
    span:nth-of-type(2) {
      color: #797979;
    }
  }
}
.list {
  padding: 0.1rem 0.18rem;
  margin-bottom: 0.6rem;
  .title {
    display: flex;
    align-items: center;
    img {
      width: 0.16rem;
      margin-right: 0.1rem;
    }
  }
  .item {
    display: flex;
    padding: 0.1rem 0;
    border-bottom: 1px solid #ebebeb;
    .avatars {
      width: 0.4rem;
      height: 0.4rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      width: 2rem;
      height: 0.4rem;
      padding: 0 0.08rem;
      p {
        font-size: 0.14rem;
        width: 100%;
        padding-bottom: 0.02rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        font-size: 0.12rem;
        color: #959595;
      }
    }
    .price {
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: right;
      flex: 1;
      span:nth-of-type(1) {
        color: #797979;
      }
      span:nth-of-type(2) {
        color: #fc6243;
      }
    }
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.6rem;
  padding: 0.1rem 0.25rem;
  background: #fff;
  div {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 0.4rem;
    border-radius: 0.2rem;
    color: #fff;
  }
  .on {
    background: rgba(252, 98, 67, 1);
  }
  .off {
    background: #ccc;
  }
}
</style>
