<template>
  <div class="abroad_detail">
    <div class="uni_text">
      <p class="course_name">{{ detailData.activityLabel ? detailData.activityLabel : detailData.course_name }}</p>
      <p class="course_count">阅读量：{{ detailData.read_count }}</p>
      <!-- 商品标签 -->
      <div class="tag_box">
        <span class="tag" v-if="detailData.areaAddress"><van-icon name="location" class="icon" /> {{ detailData.areaAddress }}</span>
        <template v-for="(tag, index) in detailData.course_labels">
          <span class="tag" v-if="tag != ''" :key="index">{{ tag }}</span>
        </template>
      </div>
    </div>
    <!--达人-->
    <!-- <div class="fixedInvite" v-if="isShowpic">
      <div @click="handleCode" v-if="codeStep == 1" class="moneyCss">
        <div class="boxMon">
          <div class="moneyFont">¥ {{ expectMoney }}</div>
          <img src="@/assets/copartner/receiveNew3.png" />
        </div>
      </div>
      <div @click="handleInvite" v-if="codeStep == 2" class="moneyCss">
        <div class="boxMon">
          <div class="moneyFont">¥ {{ expectMoney }}</div>
          <img src="@/assets/copartner/shareTaskNew3.png" />
        </div>
      </div>
    </div> -->
    <!-- 商品详情 -->
    <abroad-des v-if="detailData" :detailData="detailData"></abroad-des>
    <!-- 基地信息 -->
    <!-- <abroad-base v-if="detailData" :baseId="detailData.baseId"></abroad-base> -->

    <div class="Collection" v-if="detailData">
      <bottom-btn-left :centerNo="centerNo" :courseId="courseId"></bottom-btn-left>
      <div class="box box2">
        <div class="box_btn">
          <span @click="toNext()">参加活动</span>
        </div>
      </div>
    </div>
    <van-action-sheet v-model="showCustomized" cancel-text="取消" close-on-click-action>
      <div class="customized">
        <p class="customized_title">添加微信联系</p>
        <img class="customized_code" :src="AagentUser.qrCodeUrl || require('@/assets/service/customized_code2.png')" alt="" />
        <span class="customized_code_des">关注本活动专属定制专员</span>
        <div class="customized_line"></div>
        <div class="customized_flex">
          <div>
            <p class="customized_title">客服热线</p>
            <p class="customized_phone">{{ AagentUser.phone || '4008262468' }}</p>
          </div>
          <img class="customized_phone_icon" src="@/assets/service/phone.png" alt="" />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import AbroadDes from './AbroadDes'
import BottomBtnLeft from '../component/c_BottomBtnLeft'
import wx from 'weixin-js-sdk'
import './AbroadDetail.scss'
export default {
  name: 'ServiceAbroadDetail',
  components: {
    AbroadDes,
    BottomBtnLeft,
  },
  data() {
    return {
      courseId: '',
      BindType: '', //普通出行1 定制出行2
      bindId: '',
      inviteCode: '', //达人邀请码
      orderId: '', //集体定制id
      isShowpic: false, //是否显示达人邀请码邀请图标
      detailData: '',
      packageData: [], //套餐表
      packageActive: 0,
      packageTypeActive: 0,
      showCourseTable: true,
      showCustomized: false, //我要定制弹窗
      AagentUser: '', //代理人联系方式
      unionId: '',
      appId: '',
      centerNo: '',
      copyUrl: '', //达人分享链接
      nowDate: '', //当前时间
      codeStep: 0, //邀请码进度
      expectMoney: '', //预计赚多少钱
    }
  },
  mounted() {
    this.nowDate = this.Moment().format('YYYY-MM-DD  HH:mm:ss')
    // console.log(this.nowDate)
    localStorage.removeItem('useCard')

    this.courseId = this.$route.query.courseId
    this.bindId = this.$route.query.bindId
    this.BindType = this.$route.query.BindType
    this.entrance = this.$route.query.entrance
    this.inviteCode = this.$route.query.inviteCode
    this.orderId = this.$route.query.orderId
    this.ProgramType = this.$route.query.ProgramType
    this.productSceneId = this.$route.query.productSceneId
    this.DateComboType = this.$route.query.DateComboType
    this.ZZCTCanBuy = this.$route.query.ZZCTCanBuy
    this.courseTypeLableId = this.$route.query.courseTypeLableId
    if (this.inviteCode) {
      this.codeStep = 1
    }

    localStorage.setItem('prePage', 'ServiceAbroadDetail')
    localStorage.setItem(
      'prePageQuery',
      JSON.stringify({
        courseId: this.courseId,
        bindId: this.bindId,
        entrance: this.entrance,
        inviteCode: this.inviteCode,
        BindType: this.BindType,
        orderId: this.orderId,
        ProgramType: this.ProgramType,
        productSceneId: this.productSceneId,
        DateComboType: this.DateComboType,
        ZZCTCanBuy: this.ZZCTCanBuy,
        courseTypeLableId: this.courseTypeLableId,
      })
    )

    this.unionId = localStorage.getItem('unionId')
    this.getUserInfo()

    this.GetCourseDetail()
  },
  methods: {
    // 点击去定制
    handleCustomMade() {
      this.$router.push({ name: 'CustomMade', query: { courseId: this.courseId } })
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = localStorage.getItem('userInfo')
      if (userInfo) {
        userInfo = JSON.parse(userInfo)
        this.centerNo = userInfo.centerNo
      } else {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true,
        })
        this.yxAxios.get(`${this.proxyUrl}/api/wx/${this.appId}/getUserInfo?unionId=${this.unionId}`).then((res) => {
          this.$toast.clear()
          if (res.data.data) {
            this.centerNo = res.data.data.centerNo
            localStorage.setItem('userInfo', JSON.stringify(res.data.data))

            if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
              localStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames))
              this.$store.commit('changeSchool', res.data.data.schoolNames)
              if (!localStorage.getItem('schoolNamesChoose')) {
                localStorage.setItem('schoolNamesChoose', JSON.stringify(res.data.data.schoolNames[0]))
              }
            } else {
              localStorage.setItem('schoolNames', [])
              this.$store.commit('changeSchool', [])
            }
          }
        })
      }
    },

    // 点击预约
    toNext() {
      location.href = location.href.replace('abroad_detail', 'abroad_detail_next')
    },
    // 获取产品详情
    GetCourseDetail() {
      if (!this.courseId) {
        this.$toast.fail('产品id缺失，请从正确的途径访问')
        return
      }
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      })
      this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/GetCourseDetail?id=${this.courseId}&cs=绍兴市`).then((res) => {
        this.$toast.clear()
        if (res.data.data && res.data.data.id !== 0) {
          let detailData = res.data.data
          console.log('产品详情：', detailData)
          detailData.course_labels = detailData.course_labels?.split(',')
          this.detailData = detailData
          localStorage.setItem(
            'showCourseData',
            JSON.stringify({
              course_name: detailData.course_name,
              course_img: detailData.coverList[0].cover_url,
              id: detailData.id,
              baseId: detailData.baseId,
              marketPrice: detailData.marketPrice,
              price: detailData.price,
              course_labels: detailData.course_labels,
            })
          )
          if (this.orderId) {
            localStorage.setItem(
              'customizedOrder',
              JSON.stringify({
                courseId: detailData.id,
                orderId: this.orderId,
                dateComboBindId: detailData.dateComboBindId,
                isSkipPay: detailData.isSkipPay,
              })
            )
          }
          this.getPackageData() //获取套餐列表
          this.setCourseVisit() //调用浏览量
          this.setShare()
        } else {
          let message = res.data.message
          if (!message) {
            message = '产品不存在'
          }
          this.$toast.fail(message)
        }
      })
    },
    setCourseVisit() {
      this.yxAxios.post(`${this.yanxueUrl}/api/BaseManage/CourseVisit`, {
        courseId: this.courseId,
        userId: this.centerNo,
        inviteCode: this.inviteCode,
      })
    },
    setShare() {
      // 设置分享
      this.$emit('getWxConfig', {
        title: this.detailData.course_name, // 分享标题
        desc: '读万卷书，行万里路，我们一起“趣研学啦”', // 分享描述
        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://payment.myjxt.com/share_qxy.png', // 分享图标
      })
    },
    // 获取套餐列表
    getPackageData() {
      let startDate = this.Moment().format('YYYY-MM-DD')
      let endDate = this.Moment().add(60, 'days').format('YYYY-MM-DD')
      let bindId = this.bindId
      let ProgramType = this.ProgramType
      let params = {
        productId: this.detailData.id,
        startDate: startDate,
        endDate: endDate,
        BindType: this.BindType ? this.BindType : 1,
      }
      if (bindId !== 'undefined' && bindId != '') {
        params.bindId = bindId
      }
      if (ProgramType !== 'undefined' && ProgramType != '') {
        params.ProgramType = ProgramType
      }
      this.yxAxios.post(`${this.yanxueUrl}/api/Product/DateComboBindList/ByTime/List`, params).then((res) => {
        // console.log('套餐列表:', res.data.data)
        if (res.data.data) {
          let allPackage = res.data.data
          let packageData = []
          for (let i in allPackage) {
            if (allPackage[i]?.comboList?.length > 0) {
              packageData.push(allPackage[i])
            }
          }
          this.formatPackage(packageData)
        }
      })
    },
    // 设置套餐价格
    formatPackage(packageData) {
      for (let i in packageData) {
        let packageDate = this.Moment(packageData[i]?.dayName, 'YYYY-MM-DD')
        let week = packageDate.format('d')
        // console.log(week)
        week =
          week == 1
            ? '周一'
            : week == 2
            ? '周二'
            : week == 3
            ? '周三'
            : week == 4
            ? '周四'
            : week == 5
            ? '周五'
            : week == 6
            ? '周六'
            : week == 0
            ? '周日'
            : ''
        let comboInfoList = []
        let comboList = packageData[i].comboList
        // 为套餐添加下标
        let marketPrice = 9999
        for (let j in comboList) {
          for (let k in comboList[j].comboInfoList) {
            comboList[j].comboInfoList[k].tagIndex = [j, k]
            comboList[j].comboInfoList[k].bindId = comboList[j].id
            if (comboList[j].comboInfoList[k].actualPrice < marketPrice) {
              marketPrice = comboList[j].comboInfoList[k].actualPrice
            }
          }
          comboInfoList.push(...comboList[j].comboInfoList)
        }
        packageData[i].day = packageDate.format('M/D')
        packageData[i].date = packageDate.format('YYYY-MM-DD')
        packageData[i].week = week
        packageData[i].marketPrice = marketPrice
        // packageData.comboInfoList = comboInfoList
      }
      this.packageData = packageData
      console.log('格式处理后的套餐列表:', packageData)
      localStorage.setItem('packageData', JSON.stringify(packageData))
    },
  },
}
</script>
<style lang="scss">
// 长辈版
.elder {
  .abroad_detail .uni_text .course_name{
    font-size: 50px;
  }
  .abroad_detail .uni_text .course_count,.abroad_detail .uni_text .tag_box .tag,.service_bottom_btn_left .icon p,.abroad_detail .Collection .box .box_btn,.abroad_detail {
    font-size: 36px !important;
  }
  .abroad_detail .content_box .content_all img{
    width:100%;
  }
  .abroad_detail .tag_item{
    padding: 0;
  }
  .abroad_detail .tag_item .tag_text{
    font-size: 36px !important;
    *{
    font-size: 36px !important;

    }
  }
}
</style>