<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 {
      publicName: '',
      unionId: '',
      cardTitle: '',
      couponPrice: '',
      cardId: '',
      proId: '',
      proName: '',
      pics: '',
      geted: false,
      proList: []
    }
  },
  mounted () {
    let publicName = this.$route.query.publicName || sessionStorage.getItem('publicName');
    if (publicName) {
      sessionStorage.setItem('publicName', publicName)
      this.publicName = publicName
    }
    this.cardTitle = sessionStorage.getItem('cardCousreCardTitle');
    this.couponPrice = sessionStorage.getItem('cardCousreCardPrice');
    this.cardId = sessionStorage.getItem('cardCousreCardId');
    this.proId = sessionStorage.getItem('cardCousreProId');
    this.proName = sessionStorage.getItem('cardCousreProName');
    this.pics = sessionStorage.getItem('cardCousrePics');
    this.geted = sessionStorage.getItem('cardCousreGeted') == 'true' ? true : false
    if (process.env.NODE_ENV === "production") {
      let openId = sessionStorage.getItem('openId' + this.publicName);
      if (!openId) {
        sessionStorage.setItem('prePage', 'CardBoxXST');
        this.$router.push({ name: 'Authorize' + this.publicName })
        return;
      }
      this.unionId = sessionStorage.getItem('unionId');
    } else {
      this.unionId = 'oJPmPuLaAx2x2DaRGfCFeYuLWzLU';
    }
    this.getCourseList()
  },
  methods: {
    // 获取优惠券对应的商品列表
    getCourseList () {
      this.$toast.loading({
        message: "加载中...",
        duration: 0,
        forbidClick: true,
      });
      this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/CourseList/ByIdList`, this.proId.split(',')).then((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
      })
    },
    formatWeek (week) {
      return week == 1 ? '周一' : week == 2 ? '周二' : week == 3 ? '周三' : week == 4 ? '周四' : week == 5 ? '周五' : week == 6 ? '周六' : week == 0 ? '周日' : '';
    },

    //领取优惠券
    reCard () {
      if (this.geted) return;
      this.yxAxios.post(`${this.proxyUrl}/prod/api/coupon/get`, {
        unionId: this.unionId,
        "proId": this.proId,
        "proName": this.proName,
        "pic": this.pics,
        couponId: this.cardId,
      })
        .then((res) => {
          // console.log(res.data)
          if (res.data.code == 200) {
            sessionStorage.setItem('cardCousreGeted', true)
            this.geted = true;
            this.$toast('领取成功！')
          } else {
            this.$toast.fail(res.data.message);
          }
        })

    },
    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>