<template>
  <div class="mainPage" v-if="showPage">
    <div class="top-time" v-if="timeStatus<2">
      <span v-if="timeStatus === 0">距抢购开始</span>
      <span v-if="timeStatus === 1">距抢购结束</span>
      <span class="time">{{day}}</span>
      <span>天</span>
      <span class="time">{{hour}}</span>
      <span>时</span>
      <span class="time">{{minute}}</span>
      <span>分</span>
      <span class="time">{{second}}</span>
      <span>秒</span>
    </div>
    <div class="content">
      <div class="title">{{detail.FlashBuyName}}</div>
      <!-- <div class="video-or-cover">
        <video v-if="video" width="100%" height="100%" preload="auto" x5-playsinline="true" controls="controls" :poster="type === 'card' ? data.Images[0].CardImageUrl : data.Images[0].CouponImageUrl">
          <source :src="data.VideoUrl" type="video/mp4">
          <source :src="data.VideoUrl" type="video/avi">
          <source :src="data.VideoUrl" type="video/wma">
          <source :src="data.VideoUrl" type="video/rmvb">
          <source :src="data.VideoUrl" type="video/rm">
        </video>
        <img v-else src="" width="100%" height="100%">
      </div>-->
      <pre class="rule" v-html="detail.FlashBuyInfo"></pre>
      <!-- <div class="scope-of-time">
        <div>活动时间</div>
        <div>{{toolClass.dateFormat(detail.StartDate)}} ~ {{toolClass.dateFormat(detail.EndDate)}}</div>
      </div>-->
    </div>
    <div
      class="sign-in"
      v-if="timeStatus !== 2 && detail.AttendantType === 'no' && !used"
      @click="signIn"
    >立即注册</div>
    <div class="submit">
      <div :class="{light:timeStatus === 1}" @click="submit()" v-if="!used">{{btnText[timeStatus]}}</div>
      <div v-else>已抢购</div>
    </div>
    <div class="success-box" v-if="showDialog">
      <div class="success">
        <span>恭喜您！抢购成功</span>
        <img :src="logo" alt>
        <span>长按二维码关注“城的空间”，进入会员中心查看吧</span>
        <div @click="showDialog = false">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import wxsdk from '../../../util/share'
import logo from '../../../common/icon/qrCode.jpg'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapRushState, mapActions: mapRushActions } = createNamespacedHelpers('rush')
const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('userCenter')
export default {
  data () {
    return {
      logo,
      day: '00',
      hour: '00',
      minute: '00',
      second: '00',
      hasTime: false,
      timeStatus: 0, // 0、未开始 1、进行中 2、已结束 3、已抢购
      btnText: ['立即抢购', '立即抢购', '已结束', '已抢购'],
      Interval: null,
      showDialog: false,
      used: false,
      showPage: false,
      newCustomer: false
    }
  },
  created () {
    if (location.search && this.toolClass.UrlSearch(location.search).code) {
      this.code = this.toolClass.UrlSearch(location.search).code
    } else {
      this.code = null
    }
    this.getUserInfo({ org: this.org, code: this.code }).then(() => {
      console.log(this.userInfo)
    })
    this.AddNewFlashBuyCustomer({ flashBuyId: this.$route.query.flashBuyId }).then(() => {
      this.getRush({ flashBuyId: this.$route.query.flashBuyId }).then((res) => {
        if (!res.flashBuy) {
          this.$toast('活动已不存在')
        }
        this.used = res.flashCustomer.IsAttend === 1 ? false : true
        this.newCustomer = res.flashCustomer.IsNew === 1 ? true : false
        let start = new Date(this.detail.StartDate).getTime()
        let end = new Date(this.detail.EndDate).getTime()
        this.timing(start, end)
        wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
          title: res.flashBuy.ActivityTitle || this.detail.FlashBuyName,
          desc: res.flashBuy.ShareContent || '限时抢购中，名额有限，速来参与~',
          link: `${window.location.origin}${window.location.pathname}#/rush/?flashBuyId=${this.$route.query.flashBuyId}`,
          thu_image: `${res.flashBuy.ShareImg}?x-oss-process=style/wxicon` || `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
        })
      })
    })
  },
  computed: {
    ...mapRushState({
      detail: item => item.rushDetail
    }),
    ...mapUserState({
      userInfo: x => x.userInfo
    }),
    ...mapState({
      org: x => x.app.orgId
    })
  },
  methods: {
    ...mapRushActions(['setRush', 'getRush', 'AddNewFlashBuyCustomer', 'IsNewCustomer', 'UpdateFlashBuyCustomer']),
    ...mapUserActions(['getUserInfo']),
    timing (startTime, endTime) {
      this.Interval = setInterval(() => {
        let nowTime = new Date().getTime()
        if (nowTime >= endTime) {
          clearInterval(this.Interval)
          this.timeStatus = 2
          this.showPage = true
          return
        } else if (nowTime <= startTime) {
          let time = Math.floor((startTime - nowTime) / 1000)
          this.getTime(time)
          this.timeStatus = 0
          this.showPage = true
        } else if (nowTime >= startTime && nowTime <= endTime) {
          let time = Math.floor((endTime - nowTime) / 1000)
          this.getTime(time)
          this.timeStatus = 1
          this.showPage = true
        }
      }, 1000)
    },
    getTime (time) {
      let second = time % 60
      let minute = ((time % (60 * 60)) - second) / 60
      let hour = ((time % (60 * 60 * 24)) - (minute * 60) - second) / (60 * 60)
      let day = Math.floor(time / (60 * 60 * 24))
      this.second = second < 10 ? '0' + second : second
      this.minute = minute < 10 ? '0' + minute : minute
      this.hour = hour < 10 ? '0' + hour : hour
      this.day = day < 10 ? '0' + day : day
    },
    submit () {
      if (this.timeStatus !== 1) {
        this.$toast('活动未开始，敬请期待')
        return
      }
      if (this.newCustomer && !this.userInfo.customer.Phone) {
        this.signIn()
        return
      }
      if (!this.newCustomer && this.detail.AttendantType !== 'no') {
        this.$toast('此活动仅限新用户参与')
        return
      }
      this.setRush({ id: this.detail.FlashBuyId }).then(() => {
        this.UpdateFlashBuyCustomer({ flashBuyId: this.$route.query.flashBuyId })
        this.used = true
        this.showDialog = true
      })
    },
    signIn () {
      this.$router.push({ name: 'bindMobile' })
    },
  }
}
</script>

<style lang="scss" scoped>
@import 'page.scss';
</style>

<style>
.rule img {
  width: 100%;
}
.rule p {
  color: #9d876d;
}
</style>
