<template>
  <div class="mainPage flex-v" v-if="showPage">
    <div class="top flex-h">
      <span>￥<em>{{parseInt(data.Price)}}</em>元</span>
      <div class="flex-item">
        <div>
          <span>{{data.CardName}}</span>
          <span>卡券描述卡券描述卡券描述卡券描述卡券描述</span>
          <span v-if="data.ValidDays>0">领取后{{data.ValidDays}}天有效</span>
          <span v-else>{{toolClass.dateFormat(data.StartDate)}} - {{toolClass.dateFormat(data.EndDate)}}</span>
        </div>
      </div>
    </div>
    <ul class="numList flex-h">
      <li class="flex-item">
        <div>
          <span>总数量</span>
          <span>{{data.TotalCount}}</span>
        </div>
      </li>
      <li class="flex-item">
        <div>
          <span>剩余</span>
          <span>{{data.TotalCount - data.SentCount}}</span>
        </div>
      </li>
      <li class="flex-item">
        <div>
          <span>用户领取</span>
          <span>{{data.SentCount}}</span>
        </div>
      </li>
      <li class="flex-item">
        <div>
          <span>实际使用</span>
          <span>{{data.UsedCount}}</span>
        </div>
      </li>
    </ul>
    <div class="flex-item">
      <div>
        <div>
          <ul>
            <li class="flex-h">
              <span>销售名称</span>
              <div class="flex-item">
                <div>
                  <span>用户领取</span>
                </div>
              </div>
              <span>实际使用</span>
            </li>
            <li class="flex-h" v-for="(item,index) in data.CustomerCard" :key="index">
              <span>{{item.RealName}}</span>
              <div class="flex-item">
                <div>
                  <span>{{item.ReceiveNum}}</span>
                </div>
              </div>
              <span>{{item.UsedNum}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapForbidState, mapActions: mapForbidActions } = createNamespacedHelpers('forbid')
export default {
  name: '',
  data () {
    return {
      data: {},
      showPage: false
    }
  },
  created () {
    if (this.$route.query.type === 'card') {
      this.getCardNum({ id: this.$route.query.id }).then(() => {
        // this.getSales({ type: 'sales' }).then(() => {
        this.data = this.cardAndCoupon
        this.data.CustomerCard = this.data.CustomerCard || []
        this.showPage = true
        // })
      })
    } else {
      this.getCouponNum({ id: this.$route.query.id }).then(() => {
        // this.getSales({ type: 'sales' }).then(() => {
          this.data = this.cardAndCoupon
          this.data.CustomerCard = this.data.CustomerCoupon || []
          this.showPage = true
        // })
      })
    }
  },
  computed: {
    ...mapForbidState({
      // salesList: x => x.salesList,
      cardAndCoupon: x => x.cardAndCoupon
    })
  },
  methods: {
    ...mapForbidActions(['getCardNum', 'getCouponNum']),
    // salesData (item) {
    //   let receive = 0
    //   let used = 0
    //   let name
    //   if (this.$route.query.type === 'card') {
    //     for (let i = 0; i < this.salesList.length; i++) {
    //       this.salesList[i].CustomerCard = this.salesList[i].CustomerCard || []
    //       for (let j = 0; j < this.salesList[i].CustomerCard.length; j++) {
    //         if (this.salesList[i].CustomerCard[j].SalesId === item.SalesId) {
    //           name = this.salesList[i].RealName
    //           receive++
    //           if (!item.VerifyStatus) {
    //             used++
    //           }
    //         }
    //       }
    //     }
    //   } else {
    //     for (let i = 0; i < this.salesList.length; i++) {
    //       this.salesList[i].CustomerCoupon = this.salesList[i].CustomerCoupon || []
    //       for (let j = 0; j < this.salesList[i].CustomerCoupon.length; j++) {
    //         if (this.salesList[i].CustomerCoupon[j].SalesId === item.SalesId) {
    //           name = this.salesList[i].RealName
    //           receive++
    //           if (!item.VerifyStatus) {
    //             used++
    //           }
    //         }
    //       }
    //     }
    //   }

    //   return {
    //     'name': name,
    //     'receive': receive,
    //     'used': used
    //   }
    // },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>
