<template>
  <div class="service_bottom_btn">
    <span class="btn1" @click="handleShare"><van-icon name="share-o" /> 分享</span>
    <span class="btn2" v-if="packageArrLength > 0" @click="checkOrder()">去订购</span>
    <van-action-sheet v-model="showCustomized" close-on-click-action>
      <div class="customized" v-if="active == 1">
        <img class="customized_code" :src="AagentUser.qrCodeUrl || require('@/assets/service/customized_code2.png')" alt="" />
        <div class="customized_right">
          <p class="customized_title">添加微信联系</p>
          <span class="customized_code_des">关注本活动专属定制专员</span>
        </div>
        <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>
export default {
  props: ['packageArrLength', 'bindId'],
  data() {
    return {
      showCustomized: false, //我要定制弹窗
      AagentUser: '', //代理人联系方式
      active: 1,
      isTalent: false, //是否为达人
    }
  },
  mounted() {
    this.defaultDate = new Date(
      this.Moment()
        .add(1, 'day')
        .format('YYYY-MM-DD')
    )

    let showCourseData = sessionStorage.getItem('showCourseData')
    if (showCourseData) {
      this.showCourseData = JSON.parse(showCourseData)
    }
    let talentData = sessionStorage.getItem('talentData')
    if (talentData) {
      this.isTalent = true
      this.active = 0
    }
    if (this.entrance == 'school') {
      this.getAgentInfoBySchool() //校代联系方式
    } else {
      this.getAagentUser() //代理人联系方式
    }
  },
  methods: {
    // 获取代理人联系方式
    getAagentUser() {
      let schoolName = sessionStorage.getItem('schoolNamesChoose') ? JSON.parse(sessionStorage.getItem('schoolNamesChoose')) : ''
      if (schoolName) {
        schoolName = JSON.parse(sessionStorage.getItem('userInfo')).schoolNames[0]
      }
      this.yxAxios
        .post(`${this.proxyUrl}/manage/agentUser/list`, {
          schoolName: schoolName.schoolName,
          type: 2,
        })
        .then((res) => {
          if (res.data.rows.length > 0) {
            let data = res.data.rows
            let AagentUser = data[0]
            for (let i in data) {
              if (data[i].mainLinkman == 1) {
                AagentUser = data[i]
              }
            }
            console.log('代理人联系方式:', AagentUser)
            this.AagentUser = AagentUser
          }
        })
    },
    // 获取校代联系方式（通过我的学校栏目进入）
    getAgentInfoBySchool() {
      let schoolRecommendShowStudent = sessionStorage.getItem('schoolRecommendShowStudent')
        ? JSON.parse(sessionStorage.getItem('schoolRecommendShowStudent'))
        : ''
      let schoolName = schoolRecommendShowStudent.schoolName
      this.yxAxios.get(`${this.proxyUrl}/api/agent/getAgentInfoBySchool?schoolName=${schoolName}`).then((res) => {
        if (res.data.data.length > 0) {
          let data = res.data.data
          let AagentUser = data[0]
          for (let i in data) {
            if (data[i].mainLinkman == 1) {
              AagentUser = data[i]
            }
          }
          console.log('代理人联系方式:', AagentUser)
          this.AagentUser = AagentUser
        }
      })
    },

    handleShare() {
      this.$emit('handleShare')
    },
    checkOrder() {
      this.$emit('handleNext')
    },
  },
}
</script>
<style lang="scss">
.service_bottom_btn {
  display: inline-flex;
  vertical-align: middle;
  width: 65%;
  border-radius: 58px;
  overflow: hidden;
  .btn1,
  .btn2 {
    text-align: center;
    color: white;
    font-size: 32px;
    line-height: 92px;
    display: inline-block;
    width: 100%;
    background: #4fb0ff;
  }
  .customized_tabbox {
    position: relative;
    width: 100%;
    height: 98px;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background: url('../../../assets/service/customized_tab.png') center/100% no-repeat;
    }
    &.right_active {
      &::before {
        transform: rotateY(180deg);
      }
    }
    p {
      display: inline-block;
      width: 50%;
      position: relative;
      font-size: 32px;
      font-weight: bold;
      line-height: 98px;
      text-align: center;
    }
  }

  .customized {
    background: #fff;
    padding: 88px 44px;
    height: 720px;
    box-sizing: border-box;
    .customized_title {
      font-size: 36px;
      font-weight: bold;
      line-height: 50px;
    }
    .customized_code {
      display: inline-block;
      width: 180px;
      pointer-events: auto;
      user-select: auto;
    }
    .customized_right {
      display: inline-block;
      margin-left: 20px;
      vertical-align: top;
    }
    .customized_code_des {
      font-size: 28px;
      color: #999;
    }
    .customized_line {
      width: 100%;
      border-top: 2px dashed #e2e2e2;
      margin-top: 34px;
      margin-bottom: 26px;
    }
    .customized_phone {
      font-size: 32px;
      color: #999;
      margin-top: 30px;
    }
    .customized_flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .customized_phone_icon {
      width: 66px;
    }
  }
  .van-popup {
    background: transparent;
  }
}
</style>