<template>
  <div class="wrap">
    <div class="navBar">
      <van-nav-bar
          title="人员信息"
          :left-arrow="Boolean(!isWebFunc())"
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="goBack"
      />
    </div>
    <div :class="{'tipWrap':true,'yelBg':type==3,'greBg':type==4}">
      <img v-show="[1,2].includes(type)" src="@/assets/unpass.png" />
      <img v-show="[3].includes(type)" src="@/assets/yelTip.png" />
      <img v-show="[4].includes(type)" src="@/assets/greTip.png" />
      <span v-if="type==1">请立即核对或修改以下信息：姓名/身份/电话/微信号/邮箱</span>
      <span v-else-if="type==2">“角色”无法修改，如需修改“角色”请联系区域经理。提交审批后请到【管理人员】模块进行查看。</span>
      <span v-else-if="type==3">当前信息正在确认中，如需调整请联系区域经理。</span>
      <span v-else-if="type==4">当前信息已确认，如需调整请联系区域经理。</span>
    </div>
    <van-loading v-show="personList.length<=0"  class="loadingWrap"  type="spinner" color="#1989fa" />
    <div class="contentWrap" v-show="personList.length>0"
         :style="{'height':([1,2].includes(type) && isMaster) ? 'calc(100% - 160px)' : 'calc(100% - 90px)'}">
        <div class="itemWrap" v-for="(item,index) in personList" :key="index">
          <div class="opaCol">人员{{(index+1)}}:</div>
          <div class="line"></div>
          <div class="item">
            <div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>姓名：</span></div>
            <div class="right">
              <van-field  :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.name" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="left opaCol"><span class="star" style="opacity: 0">*</span><span>角色：</span></div>
            <div class="right" :class="{'opaCol':type==2}">
              <van-field  :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.roleDisplay" placeholder="请输入" />
            </div>
          </div>
          <template v-if="item.hasRelationRole">
            <div class="item" v-for="(row, rIndex) in item.relationRows" :key="'relation-' + rIndex">
              <div class="left relationLeft" :class="{'opaCol':type!=2}"><span class="star" :style="{opacity: type==2 ? 1 : 0}">*</span><span>{{ item.relationRows.length > 1 ? row.base : '关系' }}：</span></div>
              <div class="right">
                <van-field  :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="row.relation" placeholder="请输入关系" />
              </div>
            </div>
          </template>
          <div class="item">
            <div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>电话1：</span></div>
            <div class="right">
              <van-field  :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model.number="item.phone1" placeholder="请输入" @blur="blurHandle" />
            </div>
          </div>
          <div class="item">
            <div class="left" :class="{'opaCol':type!=2}"><span class="star"  style="opacity: 0">*</span><span>电话2：</span></div>
            <div class="right">
              <van-field  :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model.number="item.phone2"  @blur="blurHandle" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="left" :class="{'opaCol':type!=2}"><span class="star">*</span><span>微信号：</span></div>
            <div class="right wechatRight">
              <span class="reviseBtn" v-show="type==2" @click="wechatRevise(item,index)">修改</span>
              <van-field  :input-align="type==2 ? 'right' : 'left'" readonly v-model="item.wechatName"  />
            </div>
          </div>
          <div class="item">
            <div class="left" :class="{'opaCol':type!=2}"><span class="star"  style="opacity: 0">*</span><span>邮箱：</span></div>
            <div class="right">
              <van-field  :input-align="type==2 ? 'right' : 'left'" :readonly="type!=2" v-model="item.email" placeholder="请输入" />
            </div>
          </div>
        </div>
    </div>
    <div class="btnWrap" v-if="isMaster && [1,2].includes(type)">
      <div v-show="type==2" class="audit common" @click="auditHandle">提交审批</div>
      <div v-show="type==1" class="revise common" @click="reviseHandle">立即修改</div>
      <div v-show="type==1" class="confirm common" @click="confirmHandle">确认信息无误</div>
    </div>
    <van-dialog v-model="dialogShow" title="请将此二维码发送至相应人员进行添加，成功添加后将更新微信号。" show-cancel-button
                confirmButtonText="确认已添加" confirmButtonColor="#354E93" className="customDialog"
                @confirm="wechatConfirm" @cancel="cancelHandle">
      <img v-if="wechatInfo?.qrCode" :src="wechatInfo.qrCode"  style="width: 83%"/>
    </van-dialog>
 </div>
</template>

<script>

import {myMixins} from "@/utils/myMixins"
import {getConfirmPerson,getConfirmStatus,getQrCode,confirmAddWechat,confirm,submitConfirm} from "@/api/authentication";
import { Dialog } from 'vant';
// 带关系角色（存储格式：角色名-关系）
const RELATION_ROLES = ['其他', '法人关系人', '实控人关系人', '合伙人']
export default {
  name: "personList",
  mixins:[myMixins],
  data(){
    return{
      noClick:true,
      id:'',
      type:'',//1确认信息 2修改 3审批中 4已确认
      personList:[],
      dialogShow:false,
      reviseIndex:-1,
      supplierId:'',
      wechatInfo:'',
      personInfoId:'',
      personInfo:'',
      isMaster:false,
    }
  },
  async mounted() {
    window.addEventListener('message', (event) => {
      if (event.data === 'dialogClosed') {
        // console.log('Dialog 已关闭 // 执行关闭后的逻辑');
      }
    });
    // console.log('isWebFunc()',this.isWebFunc())
    const urlParams = new URLSearchParams(window.location.search);
    this.id=this.$route.query.id ||  urlParams.get('id');
    this.supplierId=this.$route.query.supplierId ||  urlParams.get('supplierId');
    // this.supplierId=1128
    console.log('1111',this.supplierId)
    await this.getPersonList()
  },
  methods:{
    blurHandle(e){
      let val= e.target.value || ''
      let flag=this.validatePhone(val)
      // console.log('flag',flag)
      if(!flag){
        this.$toast('电话号码格式不正确')
      }
    },
    validatePhone(val) {
      console.log('val',val)
      if(!val){
        return true
      }
      const purePhone = String(val).trim()
      const mobileReg = /^1[3-9]\d{9}$/ // 大陆手机号正则表达式
      const hkMobileReg = /^[569]\d{3}[\s-]?\d{4}$/ // 香港手机号正则表达式，允许使用空格或 "-" 分隔
      const macauMobileReg = /^6\d{3}[\s-]?\d{4}$/ // 澳门手机号正则表达式，允许使用空格或 "-" 分隔
      const telReg = /^(0\d{2,3})([\s-])?\d{7,8}$/ // 大陆座机号正则表达式，允许区号和座机号用空格或 "-" 分开
      const hkTelReg = /^\(?\d{2,4}\)?[\s-]?\d{4}[\s-]?\d{4}$/ // 香港座机号正则表达式，允许使用空格或 "-" 分隔
      const macauTelReg = /^\(?\d{2,4}\)?[\s-]?\d{4}[\s-]?\d{4}$/ // 澳门座机号正则表达式，允许使用空格或 "-" 分隔
      const phone400Reg = /^400[\s-]?\d{3}[\s-]?\d{4}$/ // 以 "400" 开头的号码正则表达式，允许使用空格或 "-" 分隔
      // 情况1：12位且首位是0、第二位是1 → 去0后按大陆手机号校验
      if (/^01[0-9]{10}$/.test(purePhone)) {
        return true
      }
      // 匹配任意一种格式即为合法
      if (mobileReg.test(purePhone) || hkMobileReg.test(purePhone) || macauMobileReg.test(purePhone) ||
          telReg.test(purePhone) || hkTelReg.test(purePhone) || macauTelReg.test(purePhone) ||
          phone400Reg.test(purePhone)) {
        return true
      }
      // 其他情况 → 不合法
      return false
    },
    async getPersonList(){
      let result=await getConfirmStatus({supplierId:this.supplierId})
      if(result.data?.wechatConfirmStatus==2){
        this.type=3
      }else if(result.data?.wechatConfirmStatus==3){
        this.type=4
      }else if(!result.data?.wechatConfirmStatus || result.data?.wechatConfirmStatus==1){
        this.type=1
      }
      this.isMaster=result.data.isMaster
      // this.type=2
      let res=await getConfirmPerson({supplierId:this.supplierId})
      if(res.data && res.data.length>0){
        this.personList=res.data.map(item => this.buildRoleDisplay(item))
      }else{
        this.personList=[]
      }
    },
    // 拆分带关系角色：roleName 按逗号拆项，识别 `角色名-关系`，按第一个 '-' 拆出基础角色与关系
    buildRoleDisplay(item){
      const parts = (item.roleName || '').split(',').filter(Boolean).map(raw => {
        const dashIndex = raw.indexOf('-')
        if (dashIndex > -1 && RELATION_ROLES.includes(raw.substring(0, dashIndex))) {
          return { raw, base: raw.substring(0, dashIndex), relation: raw.substring(dashIndex + 1) }
        }
        return { raw, base: raw, relation: null }
      })
      item.roleParts = parts
      item.roleDisplay = parts.map(p => p.relation != null ? p.base : p.raw).join(',')
      item.relationRows = parts.filter(p => p.relation != null)
      item.hasRelationRole = item.relationRows.length > 0
      return item
    },
    async wechatConfirm(){//确认已添加微信按钮
      Dialog.confirm({
        message:'请确认相关人员是否已添加该二维码。',
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        confirmButtonColor:'#354E93',
      }).then(async() => {
        let res=await confirmAddWechat({supplierId:this.supplierId,supplierPersonInfoId:this.personInfoId})
        console.log('res',this.personInfo,res.data?.name,this.personInfo.wechatName)
        if((res.data?.name == this.personInfo.wechatName) || (!res.data && this.personInfo.wechatName)){
          console.log('11111111')
          this.$set(this.personList[this.reviseIndex],'isChange',false)
        }else {
          console.log('2222222')
          this.$set(this.personList[this.reviseIndex],'isChange',true)
        }
        console.log('this.personList',this.personList)
        let flagRevise=this.personList.some(item => 'isChange' in item && !item.isChange)
        console.log('存在未修改',flagRevise)
        if(res.data){
          this.personList[this.reviseIndex].wechatId=res.data?.externalUserId
          this.personList[this.reviseIndex].wechatName=res.data?.name
        }
        await this.cancelHandle()
      }).catch(async () => {
        await this.cancelHandle()

      });
    },
    cancelHandle(){
      this.dialogShow=false
      this.wechatInfo=''
      this.reviseIndex=-1
      this.personInfoId=''
    },
    async wechatRevise(item,index){
      console.log('item,index',item,index)
      // console.log('item',item)
      this.personInfoId=item.id
      this.reviseIndex=index
      this.personInfo=item
      await this.getCode()
      this.dialogShow=true
    },
    async getCode(){//获取二维码
      let res = await getQrCode({supplierId:this.supplierId,supplierPersonInfoId:this.personInfoId})
      // console.log('res--getCode',res)
      this.wechatInfo=res.data || ''
    },
    async auditHandle(){//提交审批
      let flag=this.personList.every(item => item.name && item.phone1 && item.wechatId && item.wechatName)
      if(!flag){
        this.$toast('必填项不可为空')
        return
      }
      console.log('----',this.personList)
      let flagRevise=this.personList.some(item => 'isChange' in item && !item.isChange)
      console.log('存在未修改',flagRevise)
      if(flagRevise){
        this.$toast('您仍未修改微信号，请先修改再提交审批。')
        return
      }
      let phone1Flag= this.personList.every(item => this.validatePhone(item.phone1))
      let phone2Flag= this.personList.every(item => (item.phone2 && this.validatePhone(item.phone2) || !item.phone2))
      console.log('phone1Flag',phone1Flag)
      console.log('phone2Flag',phone2Flag)
      if(!phone1Flag || !phone2Flag){
        this.$toast('电话号码格式不正确')
        return
      }
      // 带关系角色：关系必填校验，并将 roleDisplay + relation 重新拼接为 `角色名-关系` 写回 roleName
      for (const item of this.personList) {
        if (item.hasRelationRole) {
          for (const row of item.relationRows) {
            if (!row.relation || !String(row.relation).trim()) {
              this.$toast(`请填写${row.base}关系`)
              return
            }
          }
          item.roleName = item.roleParts.map(p => p.relation != null ? `${p.base}-${String(p.relation).trim()}` : p.raw).join(',')
        }
      }
      await submitConfirm({supplierId:this.supplierId,infos:this.personList})
      this.$toast('操作成功')
      if(this.isWebFunc()){
        setTimeout(()=>{
          this.closeParentDialog()
        },1500)
      }else{
        setTimeout(()=>{
          this.goBack()
        },1500)
      }
    },
    async reviseHandle(){//修改
      this.type=2
    },
    async confirmHandle(){//确认信息无误
      let flag=this.personList.every(item => item.name && item.phone1 && item.wechatId && item.wechatName)
      if(!flag){
        this.$toast('必填项不可为空，请点击“立即修改”将信息补充完整')
        return
      }
      Dialog.confirm({
        message:'请务必仔细确认信息是否无误。',
        confirmButtonText:'确认无误',
        cancelButtonText:'返回',
        confirmButtonColor:'#354E93',
      }).then(async() => {
        // console.log('确认无误')
        await confirm({supplierId:this.supplierId})
        this.$toast('操作成功')
        if(this.isWebFunc()){
          setTimeout(()=>{
            this.closeParentDialog()
          },1500)
        }else{
          setTimeout(()=>{
            this.goBack()
          },1500)
        }
      }).catch(() => {
      });
    },
  }
}
</script>
<style lang="scss">
.customDialog {
 .van-dialog__content{
    text-align: center !important;
  }
  .van-dialog__header {
    box-sizing: border-box;
    padding: 12px;
  }
}
</style>
<style scoped lang="scss">
@import "@/styles/common.scss";
@import '@/styles/mixin.scss';
.wrap {
  @include wh(100%, 100%);
  position: relative;
  background-color: #F6F6F6;
}
.navBar{
  margin-bottom: 46px;
}
.tipWrap{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 8px 18px;
  margin-bottom: 10px;
  display: flex;
  background-color: #FFF6F2;
  img{
    width: 14px;
    height: 14px;
    //vertical-align: middle;
    margin-right: 5px;
    margin-top: 2px;
  }
  span{
    color: #FC3C06;
  }
}
.yelBg{
  background-color: #FFFFED ;
  span{
    color: #F36708;
  }
}
.greBg{
  background-color: #E8FFF3;
  span{
    color: #19AC43;
  }
}
/*.headerWrap{
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .back{
    @include wh(15px,15px);
  }
  span{
    font-weight: bold;
    font-size: 16px;
    color: #203152;
  }
}*/
.loadingWrap{
  width: 100%;
  height: calc(100% - 90px);
  text-align: center;
  line-height: 200px;
}
.contentWrap{
  //height: calc(100% - 160px);
  //height: calc(100% - 90px);//没有按钮时
  overflow-y: auto;
  .itemWrap{
    font-size: 14px;
    width: 100%;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding:10px 15px 10px 20px;
    .line{
      width: 100%;
      text-align: center;
      border-bottom: 2px solid;
      opacity: 0.16;
      margin-top: 10px;
      border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
    }
    .item{
      //line-height: 36px;
      display: flex;
      align-items: center;
      .left{
        width: 66px;
      }
      .right{
        flex: 1;
      }
      .wechatRight{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .reviseBtn{
          display: inline-block;
          width: 60px;
          text-align: center;
          border-radius: 4px;
          background-color: #354D93;
          color: #FFFFFF;
          box-sizing: border-box;
          padding: 2px 0;
        }
      }
    }
    .opaCol{
      color: #323643;
      opacity: .65;
    }
    .item .left.relationLeft{
      width: auto;
      min-width: 66px;
      white-space: nowrap;
      padding-right: 4px;
    }
    .star{
      font-weight: bold;
      font-size: 13px;
      color: #FF0808;
    }
  }
}
.btnWrap{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 10px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F6F6F6;
  .common{
    background: #354D93;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
  }
  .audit{
    width: 100%;
  }
  .revise{
    width: 30%;
    background-color: #FFFFFF;
    color: #354D93;
    box-sizing: border-box;
    border: 1px solid #354D93;
  }
  .confirm{
    width: 67%;
  }
}
</style>
