<template>
  <div class="package top_border">
    <p class="package_title">套餐类型/日期</p>
    <template v-if="bindId">
      <div class="package_box" v-if="packageArr.length > 0">
        <div style="overflow:auto;">
          <div
            class="package_item"
            :class="packageActive == index ? 'active' : ''"
            v-for="(item, index) in packageArr"
            :key="index"
            @click="handlePackageDay(index)"
          >
            <p class="date">{{ item.day }}</p>
            <p class="week">{{ item.week }}</p>
            <p class="price"><span>¥</span>{{ item.marketPrice }}<span class="des">起</span></p>
            <img class="select" src="@/assets/service/select.png" alt="" />
          </div>
        </div>
        <div class="package_item package_item_more" @click="checkDatePackage()" v-if="packageArr.length > 5">
          <img class="more_icon" src="@/assets/service/more.png" alt="" />
          <p class="more_text">查看更多</p>
        </div>
      </div>
      <div class="notime" v-if="packageArr.length == 0">
        <img src="@/assets/service/notime.png" alt="" />
      </div>
    </template>
    <template v-else>
      <div class="period_item_box" v-if="periodArr.length > 0">
        <div class="period_item" v-for="(item, index) in periodArr" :key="index">
          <div>
            <p class="period_title">{{ item.productSceneName }}</p>
            <p class="period_des">{{ item.productSceneDescription }}</p>
            <p class="price" v-if="item.groupPeriodActivityList">
              活动价￥{{ item.groupPeriodActivityList.actualPrice }}/{{ item.unitName }}
              <span class="old_price">市场价￥{{ item.groupPeriodActivityList.productPrice }}/{{ item.unitName }}</span>
            </p>
          </div>
          <div>
            <span class="btn" @click="handleReserve(item)">预约</span>
          </div>
        </div>
      </div>
      <p v-else class="period_nodata">暂无可选团期</p>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    courseId: {
      type: String,
      default: '',
    },
    packageArr: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      bindId: '',
      // packageArr: [], //套餐列表
      packageActive: 0, //套餐
      packageTypeActive: 0, //行程
      periodArr: [],
    }
  },
  mounted() {
    this.bindId = this.$route.query.bindId
    this.getPeriod() // 获取可使用行程套餐
  },
  methods: {
    // 点击套餐日期
    handlePackageDay(index) {
      this.packageActive = index
      this.packageTypeActive = 0 //重置套餐类型选择
      this.getDateInfoById()
      //TODO 获取该日所包含的套餐

      // this.setShare()
    },
    // 根据选择的档期显示成团状态
    getDateInfoById() {
      const bindId = this.packageArr[this.packageActive]?.comboInfoList[this.packageTypeActive].bindId
      const comboId = this.packageArr[this.packageActive]?.comboInfoList[this.packageTypeActive].id
      if (!bindId || !comboId) {
        console.log('没有bindId||comboId')
        return
      }
      // this.getExpectMoney(comboId)
      this.yxAxios
        .get(`${this.yanxueUrl}/api/Product/DateInfo/ById?productId=${this.courseId}&bindId=${bindId}&comboId=${comboId}`)
        .then((res) => {
          // console.log(res.data)
          if (res.data.status == 1) {
            let data = res.data.data
            // console.log(data.clusterTime)
            data.clusterTime = this.Moment(new Date(data.clusterTime.replace(/\-/g, '/')))
              .add(1, 'days')
              .subtract(1, 'seconds')
              .format('YYYY/MM/DD HH:mm:ss')
            data.periodOfValidity = this.Moment(new Date(data.periodOfValidity.replace(/\-/g, '/')))
              .add(1, 'days')
              .subtract(1, 'seconds')
              .format('YYYY/MM/DD HH:mm:ss')
            this.bottomBoxData = data
          } else {
            this.$toast('获取成团状态失败')
          }
        })
    },
    // 获取可使用行程套餐
    getPeriod() {
      let date = this.Moment().format('YYYY-MM-DD')
      let weekOfday = this.Moment().format('E') // 计算今天是这周第几天
      // 如果为限时团购，就传星期三的日期
      if (this.$route.query.ProgramType == 1) {
        let TGMSTabActive = localStorage.getItem('TGMSTabActive')
        if (TGMSTabActive == 1) {
          date = this.Moment()
            .add(weekOfday == 7 ? 3 : 10 - weekOfday, 'days')
            .format('YYYY-MM-DD')
        } else {
          date = this.Moment()
            .add(weekOfday == 7 ? -4 : 3 - weekOfday, 'days')
            .format('YYYY-MM-DD')
        }
      }
      let param = {
        productId: this.courseId,
        state: '1',
        pageIndex: 1,
        pageSize: 999,
        date: date,
      }
      if (this.$route.query.productSceneId) {
        param.productSceneId = this.$route.query.productSceneId
      }
      if (this.$route.query.DateComboType) {
        param.DateComboType = this.$route.query.DateComboType
      }
      if (this.$route.query.ProgramType) {
        param.ProgramType = this.$route.query.ProgramType
      }
      this.yxAxios.post(`${this.yanxueUrl}/api/Product/ProductScene/List`, param).then((res) => {
        console.log('套餐列表:', res.data.data)
        let data = res.data.data.data
        let periodArr = []
        for (let i in data) {
          if (data[i].groupPeriodActivityList) {
            // 如果是直通车产品，不显示常规拼团套餐
            if (this.$route.query.ProgramType && data[i].dateBindTypeName == '常规拼团') {
            } else {
              periodArr.push(data[i])
            }
          }
        }
        this.periodArr = periodArr.sort(this.sortUpDate)
      })
    },
    // 日期排序
    sortUpDate(a, b) {
      return a.groupPeriodActivityList.actualPrice - b.groupPeriodActivityList.actualPrice
    },
    // 预约
    handleReserve(item) {
      if (this.$route.query.ProgramType == 1 && this.$route.query.ZZCTCanBuy != 1) {
        this.$toast('未到预约时间，请稍后再试')
        return
      }
      localStorage.setItem('TalentReserveGroupData', JSON.stringify(item))
      this.$router.push({
        path: '/talent_reserve',
        query: {
          ProgramType: this.$route.query.ProgramType,
          productSceneId: item.id,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.package {
  padding: 18px 22px;
  .package_title {
    font-size: 28px;
    color: #999;
  }
  .package_box {
    display: flex;
    white-space: nowrap;
    margin-top: 22px;
    .package_item {
      position: relative;
      width: 128px;
      height: 152px;
      border-radius: 12px;
      border: 2px solid #dde3ef;
      box-sizing: border-box;
      display: inline-flex;
      align-content: center;
      justify-content: center;
      flex-wrap: wrap;
      vertical-align: top;
      margin-right: 16px;
      flex-shrink: 0;
      &.active {
        border-color: #3f92ff;
        .select {
          display: block;
        }
      }
      p {
        width: 100%;
        margin: 0;
        text-align: center;
      }
      .more_icon {
        width: 36px;
        margin-top: 10px;
      }
      .more_text {
        font-size: 22px;
        color: #fff;
        margin-top: 22px;
      }
      .date {
        font-size: 32px;
        font-weight: bold;
      }
      .week {
        font-size: 22px;
        color: #999;
      }
      .price {
        font-size: 28px;
        color: #ff2b2b;
        margin-top: 14px;
        span {
          font-size: 20px;
        }
      }
      .index {
        margin-right: 10px;
        font-size: 26px;
        font-weight: bold;
        color: #333;
      }
      .name {
        margin-top: 8px;
        font-size: 26px;
        white-space: nowrap;
      }
      .select {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 46px;
        height: 48px;
      }
    }
    .package_item_more {
      background: #3f92ff;
      border: 2px solid #3f92ff;
      box-shadow: 6px 12px 16px 0px rgba(63, 146, 255, 0.29);
      margin-right: 0;
    }
    .package_item_type {
      width: auto;
      height: 118px;
      padding: 0 34px;
      .price {
        margin-top: 0;
      }
    }
  }
  .package_des {
    margin-top: 28px;
    font-size: 26px;
    line-height: 40px;
    color: #a9a9aa;
  }
  .period_item_box {
    background: rgb(246, 249, 254);
    border-radius: 20px;
    padding: 10px 20px;
    margin-top: 20px;
  }
  .period_nodata {
    margin-top: 20px;
    font-size: 28px;
    color: #999;
    text-align: center;
  }
  .period_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    .period_des {
      font-size: 24px;
      margin-top: 10px;
    }
    .period_title {
      font-weight: bold;
      font-size: 28px;
    }
    .price {
      font-size: 28px;
      color: rgb(255, 47, 81);
      .old_price {
        text-decoration: line-through;
        font-size: 24px;
        color: #999;
      }
    }
    .btn {
      display: block;
      font-size: 24px;
      color: #fff;
      background: rgb(255, 47, 81);
      border-radius: 8px;
      padding: 10px 24px;
      margin-top: 10px;
    }
  }
}
</style>