<template>
  <div id="cardBox">
    <div class="card_item" v-for="(item,index) in cardList" :key="index" @click="handleCard(index)">
      <div class="left">
        <div class="top">
          <img v-if="item.img" :src="item.img" alt="">
          <p class="title">仅该商品可用：<span>{{item.title}}</span></p>
        </div>
        <p class="end_time">有效期至：{{item.useEndTime}}</p>
      </div>
      <div class="right">
        <p class="discount" :class="item.couponState==1?'':'disable'"><span>¥</span>{{item.couponPrice}}</p>
        <p class="usenow" v-if="item.couponState==1">立即使用</p>
        <p class="usenow disable" v-else>{{item.couponState==2?'已使用':'已过期'}}</p>
      </div>
    </div>
    <van-empty v-if="cardList.length==0" description="暂无优惠券" />

  </div>
</template>
<script>
export default {
  name: 'ServiceCardBoxPublic',
  data () {
    return {
      cardList: [],
      publicName: '',
      unionId: ''
    }
  },
  mounted () {
    let publicName = this.$route.query.publicName || sessionStorage.getItem('publicName');
    if (publicName) {
      sessionStorage.setItem('publicName', publicName)
      this.publicName = publicName
    }
    if (process.env.NODE_ENV === "production"&&this.common.isWeiXin()) {
      let openId = sessionStorage.getItem('openId' + this.publicName);
      if (!openId) {
        sessionStorage.setItem('prePage', 'ServiceCardBoxPublic');
        this.$router.push({ name: 'Authorize' + this.publicName })
        return;
      }
      this.unionId = sessionStorage.getItem('unionId');
    } else {
      this.unionId = 'oJPmPuLaAx2x2DaRGfCFeYuLWzLU';
    }

    this.$nextTick(() => {
      this.getAllCard()
    })
  },
  methods: {
    // 获取所有优惠券
    getAllCard () {
      this.yxAxios.post(`${this.proxyUrl}/prod/api/coupon/list`, {
        userId: this.unionId,
        state: '',//状态 1-正常 2-已使用 3-已过期 不传为全部,
        pageNum: '1',
        pageSize: '999'
      }).then((res) => {
        if (res.data.rows) {
          let cardList = res.data.rows
          for (let i in cardList) {
            cardList[i].useEndTime = this.Moment(cardList[i].useEndTime.replace(/\-/g, "/")).format("YYYY-MM-DD")
          }
          this.cardList = cardList
        }
        else {
          this.$toast.fail(res.data.message);
        }
      })
    },
    handleCard (index) {
      if (this.cardList[index].couponState == 1) {
        this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: 499 } })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
#cardBox {
  width: 100%;
  min-height: 100%;
  background: rgb(246, 246, 250);
  overflow: hidden;
  .card_item {
    width: 726px;
    height: 216px;
    background: url("../../assets/service/card.png");
    background-size: 100%;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    p {
      width: 100%;
      margin: 0;
    }
    .left {
      display: inline-block;
      width: 68%;
      height: 100%;
      vertical-align: top;
      box-sizing: border-box;
      padding: 24px 40px;
      padding-right: 0;
      .top {
      display: flex;
      img {
        width: 66px;
        height: 66px;
        background: #d8d8d8;
        border-radius: 6px;
      }
      .title {
        font-size: 24px;
        font-weight: bold;
        margin-left: 10px;
        word-break: break-all;
        span {
          color: #7f5316;
        }
      }
    }
    }
    .right {
      width: 32%;
      height: 100%;
      display: inline-flex;
      align-content: center;
      flex-wrap: wrap;
      position: relative;
    }
    .end_time {
      font-size: 24px;
      color: #999;
      left: 40px;
      position: absolute;
      bottom: 30px;
    }
    .discount {
      text-align: center;
      font-size: 60px;
      font-weight: bold;
      span {
        font-size: 24px;
      }
      &.disable {
        color: #999;
      }
    }
    .usenow {
      font-size: 32px;
      text-align: center;
      font-weight: bold;
      margin-top: 10px;
      &.disable {
        color: #999;
      }
    }
  }
}
</style>