<template>
  <div class="mainPage" v-if="show">
    <!-- <video :src="data.VideoUrl" height="100%" width="100%" preload="auto" ></video> -->
    <div class="residue">
      <i class="iconfont icon-gantanhao"></i>
      <span>仅剩{{data.TotalCount - data.SentCount}}张券可以领取！</span>
    </div>
    <div class="logo">
      <img :src="logo" alt="">
    </div>
    <div class="banner"  v-if="!video">
      <img :src="data.Images[0].CardImageUrl" alt="" v-if="type === 'card'">
      <img :src="data.Images[0].CouponImageUrl" alt="" v-if="type === 'coupon'">
    </div>
    <div class="content">
      <div class="title" v-if="$route.query.type === 'card'">{{data.CardName}}</div>
      <div class="title" v-else>{{data.CouponName}}</div>
      <div class="video" v-if='video'>

        <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>
      </div>
      <div class="text">
        <div>
          <i class="icon-shuoming iconfont"></i>
          <span>卡券使用说明</span>
        </div>
        <pre v-if="$route.query.type === 'card'">{{data.Share.CardUseInstruction}}</pre>
        <pre v-else>{{data.Share.UseInstruction}}</pre>
      </div>
      <div class="text">
        <div>
          <i class="icon-kaquan iconfont"></i>
          <span>卡券有效期</span>
        </div>
        <pre v-if="data.ValidDays>0">领取后{{data.ValidDays}}天有效，请在有效期结束前使用， 过期作废；</pre>
        <pre v-else>有效期至{{toolClass.dateFormat(data.EndDate,'yyyy-MM-dd')}}，请在有效期结束前使用， 过期作废；</pre>
      </div>
      <div class="text">
        <div>
          <i class="icon-dingwei iconfont"></i>
          <span>服务网点</span>
        </div>
        <pre>{{data.address}}</pre>
      </div>
      <div class="submit" v-if="button && data.TotalCount - data.SentCount > 0" @click="receive">确认领取</div>
      <div class="submit grays" v-if="button && data.TotalCount - data.SentCount <= 0">优惠券已领完</div>
      <div class="submit" v-if="!button">点击右上角分享给客户</div>
    </div>
  </div>
</template>

<script>
import wxsdk from '../../../util/share'
import logo from '../../../common/icon/logoTop.png'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapShareState, mapActions: mapShareActions } = createNamespacedHelpers('share')
const { mapState: mapAppState, mapActions: mapAppActions } = createNamespacedHelpers('app')

export default {
  data () {
    return {
      logo,
      video: true,
      button: true,
      show: false,
      type: '',
      data: {}
    }
  },
  computed: {
    ...mapShareState({
      cardShare: x => x.cardShare,
      couponShare: x => x.couponShare
    }),
    ...mapAppState({
      caseList: x => x.CaseList
    })
  },
  created () {
    if (this.$route.params) {
      let that = this
      Object.keys(this.$route.params).forEach(function (key) {
        that.$route.query[key] = that.$route.params[key]
      })
    }

    if (this.$route.query.sharetype === 'share') {
      this.button = false
    }

    this.type = this.$route.query.type

    this.getCaseList().then(() => {
      this.init()
    })
  },
  methods: {
    ...mapShareActions(['getCardShare', 'getCouponShare', 'setChannelCardShare', 'setChannelCouponShare']),
    ...mapAppActions(['getCaseList']),
    init () {
      if (this.$route.query.type === 'card') {
        this.getCardShare({ id: this.$route.query.id }).then(() => {
          this.data = this.cardShare.Card
          let arr = this.caseList.filter(x => x.CaseId === this.data.CaseId)
          if (arr.length <= 0) {
            arr.push({ CaseAddress: '' })
          }
          this.data.address = arr[0].CaseAddress
          if (!this.data.VideoUrl) {
            this.video = false
          }
          this.show = true
          this.sdk(this.data.Share.CardShareInfo)
        })
      } else {
        this.getCouponShare({ id: this.$route.query.id }).then(() => {
          this.data = this.couponShare.coupon
          let arr = this.caseList.filter(x => x.CaseId === this.data.CaseId)
          if (arr.length <= 0) {
            arr.push({ CaseAddress: '' })
          }
          this.data.address = arr[0].CaseAddress
          if (!this.data.VideoUrl) {
            this.video = false
          }
          this.show = true
          this.sdk(this.data.Share.CouponShareInfo)
        })
      }
    },
    receive () {
      if (this.$route.query.type === 'card') {
        this.setChannelCardShare({ id: this.$route.query.id }).then(() => {
          this.$router.push({ name: 'receiveResults', query: { type: 'success', text: '卡券' } })
        }).catch((err) => {
          this.$router.push({ name: 'receiveResults', query: { type: 'fail' } })
          console.log(err)
        })
      } else {
        this.setChannelCouponShare({ id: this.$route.query.id }).then(() => {
          this.$router.push({ name: 'receiveResults', query: { type: 'success', text: '优惠券' } })
        }).catch((err) => {
          this.$router.push({ name: 'receiveResults', query: { type: 'fail' } })
          console.log(err)
        })
      }
    },
    sdk (info) {
      let logo, title
      if (this.$route.query.type === 'card') {
        logo = this.data.Images[0].CardImageUrl + '?x-oss-process=style/wxicon'
        title = this.data.CardName
      } else {
        logo = this.data.Images[0].CouponImageUrl + '?x-oss-process=style/wxicon'
        title = this.data.CouponName
      }
      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
        title: title,
        desc: info,
        link: `${window.location.origin}${window.location.pathname}#/receiveChannelShared/${this.$route.query.id}/${this.$route.query.type}/receive`,
        thu_image: logo
      })
    }
  }
}
</script>

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