<template>
  <div id="cardCourseList">
    <div class="card_box">
      <img src="../../assets/service/card_bg.png" alt="">
      <p class="card_title">{{cardTitle}}</p>
      <p class="card_tip">仅限相关活动产品使用</p>
      <div class="right" @click="reCard">
        <p class="card_price"><span>¥</span>{{couponPrice}}</p>
        <span class="card_btn nobg" v-if="geted">已领取</span>
        <span class="card_btn" v-else>立即抢券</span>
      </div>
    </div>
    <p class="line">以/下/指/定/商/品/可/用</p>
    <ServiceListSecond :list="proList" :notab="true"></ServiceListSecond>

  </div>
</template>
<script>
import ServiceListSecond from '@/views/Service/component/ServiceListSecond.vue'
export default {
  name: 'CardBoxXST',
  data () {
    return {
      unionId: '',
      cardTitle: '',
      couponPrice: '',
      cardId: '',
      proId: '',
      proName: '',
      pics: '',
      geted: false,
      proList: []
    }
  },
  mounted () {
    this.cardTitle = localStorage.getItem('cardCousreCardTitle');
    this.couponPrice = localStorage.getItem('cardCousreCardPrice');
    this.cardId = localStorage.getItem('cardCousreCardId');
    this.proId = localStorage.getItem('cardCousreProId');
    this.proName = localStorage.getItem('cardCousreProName');
    this.pics = localStorage.getItem('cardCousrePics');
    this.geted = localStorage.getItem('cardCousreGeted') == 'true' ? true : false
    this.getCourseList()
  },
  methods: {
    // 获取优惠券对应的商品列表
    getCourseList () {
      this.$toast.loading({
        message: "加载中...",
        duration: 0,
        forbidClick: true,
      });
      this.mgop({
        api: 'mgop.sz.hswsy.CourseListByIdList', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          idList: this.proId.split(',')
        },
        onSuccess: res => {
          this.$toast.clear();
          let proList = res.data.data;
          for (let i in proList) {
            proList[i].course_labels = proList[i].course_labels?.split(',');
            proList[i].coverUrl = proList[i]?.coverList[0]?.cover_url
            if (proList[i].startDate) {
              proList[i].week = this.formatWeek(this.Moment(proList[i].startDate).format('d'));
              proList[i].startDate = this.Moment(proList[i].startDate).format('YYYY.M.D');
              proList[i].endDate = this.Moment(proList[i].endDate).format('YYYY.M.D');
            }
          }
          console.log(proList)
          this.proList = proList
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    formatWeek (week) {
      return week == 1 ? '周一' : week == 2 ? '周二' : week == 3 ? '周三' : week == 4 ? '周四' : week == 5 ? '周五' : week == 6 ? '周六' : week == 0 ? '周日' : '';
    },

    //领取优惠券
    reCard () {
      if (this.geted) return;
      this.mgop({
        api: 'mgop.sz.hswsy.CouponGet', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "unionId": localStorage.getItem('centerNo'),
          "proId": this.proId,
          "proName": this.proName,
          "pic": this.pics,
          "couponId": this.cardId,
        },
        onSuccess: res => {
          if (res.data.code == 200) {
            localStorage.setItem('cardCousreGeted', true)
            this.geted = true;
            this.$toast('领取成功！')
          } else {
            this.$toast.fail(res.data.message);
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });

    },
    onConfirm (item) {
      this.showPicker = false;
      this.enterAboradDetail(item.proId)
    },
  },
  components: {
    ServiceListSecond
  }
}
</script>
<style lang="scss" scoped>
#cardCourseList {
  width: 100%;
  min-height: 100vh;
  background: #fff;
  background-image: url("../../assets/service/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  // padding-top: 36px;
  overflow: hidden;
  .card_box {
    width: 704px;
    height: 150px;
    margin: 0 auto;
    position: relative;
    margin-top: 36px;
    img {
      width: 100%;
    }
    .card_title {
      font-size: 40px;
      font-weight: bold;
      color: #7f5316;
      position: absolute;
      top: 22px;
      left: 40px;
    }
    .card_tip {
      font-size: 24px;
      color: #7f5316;
      position: absolute;
      top: 94px;
      left: 40px;
    }
    .right {
      height: 100%;
      position: absolute;
      top: 0;
      right: 2px;
      padding-top: 20px;
      box-sizing: border-box;
    }
    .card_price {
      width: 160px;
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      color: #000;
      span {
        font-size: 28px;
      }
    }
    .card_btn {
      display: block;
      margin: 0 auto;
      margin-top: 10px;
      width: 134px;
      line-height: 40px;
      color: #7f5316;
      font-size: 26px;
      text-align: center;
      font-weight: bold;
      background: #fff;
      border-radius: 4px;
      &.nobg {
        background: transparent;
      }
    }
  }
  .line {
    font-size: 32px;
    color: #fff;
    letter-spacing: 4px;
    text-align: center;
    margin-top: 18px;
  }
}
</style>