<template>
  <div class="base_detail">
    <div class="header">
      <van-swipe class="my-swipe" indicator-color="white" v-if="detailData.coverList && detailData.coverList.length > 0">
        <van-swipe-item v-for="n in detailData.coverList" :key="n.id">
          <video
            v-if="n.cover_url.indexOf('.mp4') > -1"
            id="video"
            :src="n.cover_url"
            poster=""
            controls="controls"
            windowlessvideo="true"
            playsinline="true"
            webkit-playsinline="true"
            x5-playsinline="true"
            x-webkit-airplay="allow"
            width="100%"
            height="260px"
            type="video/mp4"
          ></video>
          <img v-if="n.cover_url.indexOf('.mp4') == -1" :src="n.cover_url" />
        </van-swipe-item>
      </van-swipe>
      <img v-else src="@/assets/service/defCoure.jpg" alt="" />
    </div>

    <div class="uni_text">
      <p class="course_name">{{ detailData.baseName }}</p>
      <p class="course_info">{{ detailData.baseInfo }}</p>
      <!-- 商品标签 -->
      <div class="tag_box">
        <template v-for="(tag, index) in detailData.baseLabel">
          <span class="tag" v-if="tag != ''" :key="index">{{ tag }}</span>
        </template>
      </div>
    </div>
    <!-- 商品详情 -->
    <base-des v-if="detailData" :detailData="detailData"></base-des>
    <div class="contact_btn" @click="handleContact">联系客服</div>
    <!-- <div class="Collection">
      <div class="box">
        <div class="btn" @click="handleShare"></div>
        <div class="btn" @click="handleContact"></div>
      </div>
    </div> -->
    <div class="share_mask" v-if="showShareDes" @click="showShareDes = false">
      <img class="share_des" src="@/assets/home/share.png" alt="" />
    </div>
  </div>
</template>
<script>
import BaseDes from './c_BaseDes.vue'
import './BaseDetail.scss'
export default {
  name: 'ServiceBaseDetail',
  data() {
    return {
      courseId: '',
      BindType: '', //普通出行1 定制出行2
      detailData: '',
      packageData: [], //未处理过格式的套餐表
      packageActive: 0,
      packageTypeActive: 0,
      packageArr: [], //套餐时间价格
      initPackageArr: false, //packageArr已生成
      showCourseTable: true,
      showCustomized: false, //我要定制弹窗
      AagentUser: '', //代理人联系方式
      unionId: '',
      appId: '',
      centerNo: '',
      copyUrl: '', //达人分享链接
      showShareDes: false,
    }
  },
  mounted() {
    this.baseId = this.$route.query.baseId
    localStorage.setItem('prePage', 'ServiceBaseDetail')
    localStorage.setItem('prePageQuery', JSON.stringify({ baseId: this.baseId }))

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

    this.GetBaseDetail()
  },
  methods: {
    // 获取用户信息
    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', [])
            }
          }
        })
      }
    },

    // 获取产品详情
    GetBaseDetail() {
      if (!this.baseId) {
        this.$toast.fail('基地id缺失，请从正确的途径访问')
        return
      }
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      })
      this.yxAxios.get(`${this.yanxueUrl}/api/Manage/GetOneBase?id=${this.baseId}`).then((res) => {
        this.$toast.clear()
        if (res.data.status == 1) {
          this.detailData = res.data.data
          this.ReadBase()
          this.BaseVisit()
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 分享
    handleShare() {
      // this.yxAxios.post(`https://zlyx.shunzhi.net/api/BaseManage/ZlBaseShareRecord`,{
      this.yxAxios.post(`https://zlyx.shunzhi.net/api/BaseManage/ZlBaseShareRecord`, {
        baseId: this.baseId,
        baseName: this.detailData.baseName,
        location: this.detailData.address,
        area: this.detailData.area,
      })
      this.showShareDes = true
    },
    // 浏览量
    ReadBase() {
      this.yxAxios.get(`${this.yanxueUrl}/api/Manage/ReadBase?id=${this.baseId}`)
    },
    //浏览量
    BaseVisit() {
      this.yxAxios.post(`${this.yanxueUrl}/api/BaseManage/BaseVisit`, {
        baseId: this.baseId,
        userId: this.centerNo,
      })
    },
    // 点击联系方式
    handleContact() {
      let mobile = this.detailData.mobile[0]

      if (mobile) {
        this.$dialog.confirm({
          title: '提示',
          message: '是否拨打客服电话',
        })
          .then(() => {
            ZWJSBridge.phoneCall({
              corpId: mobile,
            })
              .then((res) => {
                console.log(res)
              })
              .catch((err) => {
                console.log(err)
              })
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.$toast('暂无联系方式')
      }
    },
  },
  components: {
    BaseDes,
  },
}
</script>
<style lang="scss">
// 长辈版
.elder {
  .base_detail .tag_item .tag_text,
  .base_detail .uni_text .tag_box .tag,
  .base_detail .uni_text .address,
  .base_detail .content_box .content_all .teacher_box .teacher_name,
  .base_detail .content_box .content_all .teacher_box .teacher_level,
  .base_detail .content_box .content_all .teacher_box .teacher_info,
  .base_detail .content_box .content_all .teacher_box .teacher_location {
    font-size: 36px;
  }
}
</style>