<script setup>
import { computed,ref } from "vue";
import { Dialog } from "vant";
import {apiApplyPermission,apiUserInfo} from '@/api/hzyb/user'

let userInfo=ref(null)
const getUserInfo=async ()=>{
  const res=await apiUserInfo()
  if(res.code===200){
    userInfo.value=res.data
  }
}
getUserInfo()


const props = defineProps({
  data: Object,
});

const authType = computed(() => {
    if(!props.data) return
    if (props.data.type === "contact") {
        handleAutoApply()
        return 1;
    }
    if (props.data.type === "expired") {
        return 2;
    }
    if (props.data.type === "apply" && !props.data.customer_info.has_apply) {
        return 3;
    }
    if (props.data.type === "apply" && props.data.customer_info.has_apply) {
        return 4;
    }
});

const handleAutoApply=()=>{
  if(!props.data.customer_info.has_apply){
    if(props.data.customer_info.status=='冻结'||(props.data.customer_info.status=='试用'&&props.data.customer_info.is_suspend==1)){
        apiApplyPermission({
            company_name:props.data.customer_info.company_name,
            real_name:props.data.customer_info.name,
            source:3,
            from_page:'图库详情'
        }).then(res=>{
            if(res.code===200){
                console.log('主动申请成功');
            }
        }) 
    }
  }
}

// 点击申请
const handleApply=()=>{
    if(userInfo.value.is_bind===0){
      Dialog.confirm({
        title:'温馨提示',
        message:'为了优化您的用户体验，\n 请登录后查看更多信息！',
        confirmButtonText:'去登录',
        confirmButtonColor:'#E6B77D',
        cancelButtonColor:'#666'
      }).then(res=>{
        wx.miniProgram.reLaunch({url:'/pages/login'})
      })
      return
    }


    if(props.data.customer_info.status=='流失'||props.data.customer_info.status=='关闭'){
        apiApplyPermission({
            company_name:props.data.customer_info.company_name,
            real_name:props.data.customer_info.name,
            source:3,
            from_page:'图库详情'
        }).then(res=>{
            wx.miniProgram.navigateTo({url:'/pages-applyPermission/applyResult'})
        })
        return
    }
    wx.miniProgram.navigateTo({ url: '/pages-applyPermission/applyPermission?source=3&from_page=图库详情' })
}

const goBack=()=>{
  wx.miniProgram.switchTab({url:'/pages/chart/chart'})
}
</script>

<template>
  <div class="chart-noauth-wrap">
    <img class="img" src="https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png" alt="" v-if="authType!=4" />
    <img class="img-wait" src="https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png" alt="" v-else />
    <block v-if="authType == 1">
      <div style="margin-bottom: 15px">您暂无权限查看图库</div>
      <div>若想查看请联系对口销售</div>
      <!-- <div>{{info.name}}:{{info.mobile}}</div> -->
      <a :href="'tel:'+props.data.mobile" tag="div" class="global-btn-yellow-change btn" style="margin-top: 30px">联系销售</a>
    </block>

    <block v-if="authType == 2">
      <div style="margin-bottom: 15px">您的权限已到期，暂时无法查看图库</div>
      <div>若想继续查看请联系对口销售</div>
      <!-- <div>{{info.name}}:{{info.mobile}}</div> -->
      <a :href="'tel:'+props.data.mobile" tag="div" class="global-btn-yellow-change btn" style="margin-top: 30px">联系销售</a>
    </block>

    <block v-if="authType == 3">
      <div style="margin-bottom: 15px">您暂无权限查看图库</div>
      <div>若想查看可以申请开通</div>
      <div class="global-btn-yellow-change btn" style="margin-top: 30px" @click="handleApply">立即申请</div>
    </block>

    <block v-if="authType == 4">
      <div style="margin-bottom: 15px">您已提交申请</div>
      <div>请等待销售人员与您联系</div>
      <div class="global-btn-yellow-change btn" style="margin-top: 30px" @click="goBack">返回</div>
    </block>
  </div>
</template>

<style lang="scss" scoped>
.chart-noauth-wrap {
  padding-top: 50px;
  text-align: center;
  font-size: 32px;
  .img {
    width: 100%;
    margin-bottom: 50px;
  }
  .img-wait {
    margin-top: 200px;
    width: 186px;
    margin-bottom: 50px;
  }
  .global-btn-yellow-change{
    background: linear-gradient(270deg, #EEC795 0%, #D9A360 100%);
    border-radius: 35px;
    color: #fff;
    text-align: center;
    line-height: 70px;
  }
  .btn{
    width: 380px;
    line-height: 7rpx;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    display: block;
  }
}
</style>
