<template>
    <!-- Modal -->
<a-modal v-model:visible="doctorVisible" fullscreen :title="modalTitle" title-align="start" :footer="false"
 @cancel="handleClose">
<div class="titlebox">
  <div class="bar"></div>
  <div class="name">医生信息</div>
</div>
<a-form :model="modalForm" :disabled="modalSatus=='detail' || modalForm.iden_auth_status==2
" :rules="rules" ref="modalFormRef" :auto-label-width="true">
  <a-row :gutter="24">
    <a-col :span="12">
      <a-form-item field="avatar" label="医生头像：">
        <a-space size="large">
          <a-image width="80" height="80" class="headImg" :src="modalForm.avatar">
          </a-image>
        </a-space>
        <a-upload action="/" :fileList="file ? [file] : []" class="upload" :auto-upload="false"
          @change="onChangeFile" accept="image/*" @before-upload="beforeUpload" :show-file-list="false"
          v-if="modalSatus!='detail'" />
      </a-form-item>
    </a-col>
    <a-col :span="12" v-if="modalSatus=='add'" style="margin-top: 10px;">
      <a-form-item field="user.mobile" label="联系电话：">
        <a-input v-model="modalForm.user.mobile" placeholder="请输入联系电话" />
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="12">
      <a-form-item field="user_name" label="医生名字：">
        <a-input v-model="modalForm.user_name" placeholder="请输入医生名字" :disabled="modalSatus=='edit'" />
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item field="card_num" label="身份证号：" v-if="modalSatus=='add'">
        <a-input v-model="modalForm.card_num" placeholder="请输入身份证号" />
      </a-form-item>
      <a-form-item field="idCard" label="身份证号：" v-else>
        <div class="box" v-show="!showEye && modalSatus!='add'">
          <div class="cardNum">{{modalForm.user_doctor_info.card_num_mask}}</div>
          <icon-eye-invisible class="eye" @click="handelDecryptCard(modalForm.user_id)" />
        </div>
        <div class="box" v-show="showEye && modalSatus!='add'">
          <div class="cardNum">{{id_card_num}}</div>
          <icon-eye class="eye" @click="()=>{showEye=false}" />
        </div>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24" v-if="modalSatus!='add'">
    <a-col :span="12">
      <a-form-item field="user.mobile" label="联系电话：">
        <a-input v-model="modalForm.user.mobile" placeholder="请输入联系电话" :disabled="modalSatus=='edit'" />
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item field="multi_point_status" label="多点执业：">
        <span v-if="modalForm.multi_point_status==1">可处方</span>
        <span v-else>不可处方</span>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="12">
      <a-form-item field="hospital_id" label="医院名称：">
        <a-space direction="vertical" size="large">
          <a-select :style="{width:'400px'}" allow-search placeholder="请选择所在医院" v-model="hospital_name"
            :loading="loading" @change="changeHospital" @search="handleHospitalList">
            <a-option size="large" style="max-width:500px" v-for="item in hospitalData" :key="item.hospital_id"
              :value="item.hospital_id" :label="item.hospital_name">
              {{item.hospital_name+'('+item.province+item.city+item.county+')'}}
            </a-option>
          </a-select>
        </a-space>
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item field="hospital.address" label="医院地址：">
        <a-input v-model="modalForm.hospital.address" placeholder="请输入医院地址" :disabled="true" />
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="12">
      <a-form-item field="department_custom_id" label="所在科室：">
        <a-select placeholder="请选择所在科室" v-model="modalForm.department_custom_id" >
          <a-option v-for="item in departmentData" :key="item.department_custom_id"
            :value="item.department_custom_id" :label="item.department_custom_name">
            {{item.department_custom_name}}
          </a-option>
        </a-select>

      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item field="department_custom_name" label="科室名称：">
        <a-input v-model="modalForm.department_custom_name" placeholder="请输入科室名称" />
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="12">
      <a-form-item field="doctor_title" label="职     称 ：">
        <a-select placeholder="请选择所在职称" v-model="modalForm.doctor_title">
          <a-option v-for="item in doctor_title_data" :key="item.doctor_title" :value="item.doctor_title"
            :label="item.doctor_title_name">{{item.doctor_title_name}}</a-option>
        </a-select>
        <!-- <a-input v-model="doctor_title_name" placeholder="请输入职称" /> -->
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item field="department_custom_mobile" label="科室电话：">
        <a-input v-model="modalForm.department_custom_mobile" placeholder="请输入科室电话" />
      </a-form-item>
    </a-col>
  </a-row>
  <!-- <a-row :gutter="24">
    <a-col :span="24">
      <a-form-item field="user_doctor_info.qualification_cert_num" label="资格证编码：">
        <a-input v-model="modalForm.user_doctor_info.qualification_cert_num" placeholder="请输入资格证编码" />
      </a-form-item>
    </a-col>

  </a-row> -->
  <a-row :gutter="24">
    <a-col :span="24">
      <a-form-item field="cur_doctor_expertise" label="专长：">
        <a-select multiple placeholder="请选择专长" v-model="modalForm.cur_doctor_expertise">
          <a-option v-for="item in expertiseData" :key="item.expertise_id" :value="item.expertise_id"
            :label="item.expertise_name">{{item.expertise_name}}</a-option>
        </a-select>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="24">
      <a-form-item field="be_good_at" label="擅长信息：">
        <a-textarea :auto-size="{minRows:2}" :max-length="{length:1000,errorOnly:true}" allow-clear
          show-word-limit v-model="modalForm.be_good_at"
          placeholder="请填写医生擅长信息。内容为医生专业领域、擅长疾病、研究方法等信息（字数在10-1000字）" />
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="24">
      <a-form-item field="brief_introduction" label="个人简介：">
        <a-textarea :auto-size="{minRows:2}" :max-length="{length:1000,errorOnly:true}" allow-clear
          show-word-limit v-model="modalForm.brief_introduction"
          placeholder="请填写医生从业经历，职称和所获荣誉等信息（字数在10-1000字）" />
      </a-form-item>
    </a-col>
  </a-row>
  <a-divider />
  <div class="titlebox">
    <div class="bar"></div>
    <div class="name">是否推荐</div>
  </div>
  <a-row :gutter="24" style="margin-top: 35px;">
    <a-col :span="12">
      <a-form-item field="is_recommend" label="状态：">
        <a-space size="large">
          <a-switch checked-color="#14C9C9" :checked-value="1" :unchecked-value="0"
            v-model="modalForm.is_recommend" />
        </a-space>

      </a-form-item>
    </a-col>
    <a-col :span="12" v-if="modalForm.is_recommend==1">
      <div>理由：平台合作</div>
    </a-col>
  </a-row>
  <a-divider />
  <div class="titlebox">
    <div class="bar"></div>
    <div class="name">平台合作</div>
  </div>
  <a-row :gutter="24" style="margin-top: 35px;">
    <a-col :span="4">
      <a-form-item field="is_platform_deep_cooperation" label="平台深度合作医生：">
        <a-space size="large">
          <a-switch checked-color="#14C9C9" :checked-value="1" :unchecked-value="0"
            v-model="modalForm.is_platform_deep_cooperation" />
        </a-space>

      </a-form-item>
    </a-col>
    <a-col :span="20">
      <a-form-item field="is_sys_diagno_cooperation" label="先思达合作医生：">
        <a-space size="large">
          <a-switch checked-color="#14C9C9" :checked-value="1" :unchecked-value="0"
            v-model="modalForm.is_sys_diagno_cooperation" />
        </a-space>

      </a-form-item>
    </a-col>
  </a-row>
  <a-divider />
  <div class="titlebox">
    <div class="bar"></div>
    <div class="name">银行卡信息</div>
  </div>
  <a-row :gutter="24" style="margin-top: 35px;">
    <a-col :span="12">
      <a-form-item field="doctor_bank_card.province_id" label="开户银行所在地：">
        <a-space size="large" style="margin-right: 12px;">
          省<a-select placeholder="请选择省份" :style="{minWidth:'120px'}" v-model="modalForm.doctor_bank_card.province_id" @change="changeProvice">
            <a-option v-for="item in provinceData" :key="item.area_id" :value="Number(item.area_id)"
              :label="item.area_name">{{item.area_name}}</a-option>
          </a-select>
        </a-space>
        <a-space size="large" style="margin-right: 12px;">
          市<a-select placeholder="请选择城市" :style="{minWidth:'140px'}" v-model="modalForm.doctor_bank_card.city_id"
            @change="changeCity">
            <a-option v-for="item in cityData" :key="item.area_id" :value="Number(item.area_id)"
              :label="item.area_name">{{item.area_name}}</a-option>
          </a-select>
        </a-space>
        <a-space size="large">
          区<a-select placeholder="请选择地区" :style="{minWidth:'140px'}"
            v-model="modalForm.doctor_bank_card.county_id">
            <a-option v-for="item in countryData" :key="item.area_id" :value="Number(item.area_id)"
              :label="item.area_name">{{item.area_name}}</a-option>
          </a-select>
        </a-space>
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item field="doctor_bank_card.bank_id" label="开户银行：">
        <a-space size="large">
          <a-select v-model="modalForm.doctor_bank_card.bank_id" :style="{width:'220px'}">
            <a-option v-for="item in bankData" :key="item.bank_id" :value="item.bank_id"
              :label="item.bank_name"></a-option>
          </a-select>
        </a-space>

      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24">
    <a-col :span="12">
      <a-form-item field="bank_card_code" label="银行卡号：">
        <a-input v-model="modalForm.bank_card_code" placeholder="请输入银行卡号" />
      </a-form-item>
    </a-col>
  </a-row>
  <a-divider />
  <div class="titlebox" v-if="Object.keys(modalForm.user_doctor_info).length != 0">
    <div class="bar"></div>
    <div class="name">医师证件</div>
  </div>
  <a-row :gutter="24" style="margin-top: 35px;"
  v-if="(modalForm.user_doctor_info.license_cert && modalForm.user_doctor_info.license_cert.length>0) || modalSatus!='detail'">

    <a-col :span="24">
      <div class="titletip"><span
          class="arco-form-item-label-required-symbol red">*</span>医师执业证<span>(点击图片查看大图)</span></div>
      <a-form-item field="license_cert" :hide-label="true" :validate-trigger="['change']">
        <a-image-preview-group infinite>
          <a-space v-show="modalSatus=='detail'">
            <a-image width="120" height="120" fit="cover" v-for="item in modalForm.user_doctor_info.license_cert"
              show-loader :src="item" />
          </a-space>
        </a-image-preview-group>
        <upload v-show="modalSatus!='detail'" :isMultiple="true" :fileList="license_cert_list"
          :dataType="'license_cert_list'" @changeData="changeData"></upload>
        <!-- <a-upload v-show="modalSatus!='detail'" list-type="picture-card" @change="onChangeFile" accept="image/*"
          :file-list="license_cert_list" @before-upload="beforeUpload" action="/" :auto-upload="false"
          image-preview /> -->
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 35px;"
    v-if="(modalForm.user_doctor_info.qualification_cert && modalForm.user_doctor_info.qualification_cert.length>0) || modalSatus!='detail'">
    <a-col :span="24">
      <div class="titletip"><span
          class="arco-form-item-label-required-symbol red">*</span>医师资格证<span>(点击图片查看大图)</span></div>
      <a-form-item field="qualification_cert" label="" :hide-label="true">
        <a-image-preview-group infinite>
          <a-space v-show="modalSatus=='detail'">
            <a-image width="120" height="120" fit="cover"
              v-for="item in modalForm.user_doctor_info.qualification_cert" show-loader :src="item" />
          </a-space>
        </a-image-preview-group>
        <upload v-show="modalSatus!='detail'" :isMultiple="true" :fileList="qualification_cert_list"
          :dataType="'qualification_cert_list'" @changeData="changeData"></upload>
         
        <!-- <a-upload v-show="modalSatus!='detail'" list-type="picture-card" :auto-upload="false"
          @change="onChangeFile" accept="image/*" :file-list="qualification_cert_list"
          @before-upload="beforeUpload" action="/" image-preview /> -->
      </a-form-item>
      <a-form-item field="user_doctor_info.qualification_cert_num" v-show="modalSatus=='detail'" label="资格证编号：" :hide-label="true">
        <div class="codbox">
          <div class="labelname">资格证编号：</div> 
          <a-input v-model="modalForm.user_doctor_info.qualification_cert_num" style="width:500px" placeholder="请输入资格证编码" />
       </div>
      </a-form-item>
    
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 35px;"
    v-if="(modalForm.user_doctor_info.work_cert && modalForm.user_doctor_info.work_cert.length>0) || modalSatus!='detail'">
    <a-col :span="24">
      <div class="titletip"><span
          class="arco-form-item-label-required-symbol red">*</span>医师职称证<span>(点击图片查看大图)</span></div>
      <a-form-item field="work_cert" label="" :hide-label="true">
        <a-image-preview-group infinite>
          <a-space v-show="modalSatus=='detail'">
            <a-image width="120" height="120" fit="cover" v-for="item in modalForm.user_doctor_info.work_cert"
              show-loader :src="item" />
          </a-space>
        </a-image-preview-group>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 35px;"
    v-if="modalForm.user_doctor_info.id_card_front || modalSatus!='detail' ">
    <a-col :span="24">
      <div class="titletip">医师身份证正面<span>(点击图片查看大图)</span></div>
      <a-form-item field="id_card_front" label="" no-style>
        <a-image-preview-group infinite>
          <a-space v-show="modalSatus=='detail'">
            <a-image width="120" height="120" fit="cover" show-loader
              :src="modalForm.user_doctor_info.id_card_front" />
          </a-space>
        </a-image-preview-group>
      
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 35px;"
    v-if="modalForm.user_doctor_info.id_card_back || modalSatus!='detail' ">
    <a-col :span="24">
      <a-form-item field="id_card_back" label="" no-style>
        <div class="titletip">医师身份证反面<span>(点击图片查看大图)</span></div>
        <a-image-preview-group infinite>
          <a-space v-show="modalSatus=='detail'">
            <a-image width="120" height="120" fit="cover" show-loader
              :src="modalForm.user_doctor_info.id_card_back" />
          </a-space>
        </a-image-preview-group>
    
        <!-- <a-upload v-show="modalSatus!='detail'" :file-list="id_card_back_list" list-type="picture-card" action="/"
          :auto-upload="false" image-preview /> -->
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 35px;"
    v-if="modalForm.user_doctor_info.sign_image || modalSatus!='detail'">
    <a-col :span="24">
      <a-form-item field="sign_image" label="" no-style>
        <div class="titletip">医师手写签名<span>(点击图片查看大图)</span></div>

        <a-image-preview-group infinite>
          <a-space v-show="modalSatus=='detail'">
            <a-image width="120" height="120" fit="cover" show-loader
              :src="modalForm.user_doctor_info.sign_image" />
          </a-space>
        </a-image-preview-group>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row :gutter="24" style="margin-top: 35px;" v-if="modalForm.qr_code && modalSatus!='add'">
    <a-col :span="24">
      <a-form-item field="qr_code" label="" no-style>
        <div class="titletip">医师二维码<span>(点击图片查看大图)</span></div>
        <a-image-preview-group infinite>
          <a-space>
            <a-image width="120" height="120" fit="cover" show-loader :src="modalForm.qr_code" />
          </a-space>
        </a-image-preview-group>
      </a-form-item>
    </a-col>
  </a-row>
  <a-divider v-if="Object.keys(modalForm.user_doctor_info).length != 0" />
  <div class="titlebox" v-if="modalForm.department_custom_name && modalForm.iden_auth_status==1 && modalForm.user_doctor_info.sign_image && modalForm.multi_point_status==1">
          <div class="bar"></div>
          <div class="name">CA证书配置</div>
        </div>
        <a-row :gutter="24" style="margin-top: 35px;" v-if="modalForm.department_custom_name && modalForm.iden_auth_status==1 && modalForm.user_doctor_info.sign_image && modalForm.multi_point_status==1">
        <a-col :span="24">
          <a-form-item field="" label="" no-style>
            <div v-if="modalForm.user_ca_cert">证书有效期:{{parseTime(modalForm.user_ca_cert.cert_application_time,'{y}-{m}-{d}')}}-{{parseTime(modalForm.user_ca_cert.cert_expire_time,'{y}-{m}-{d}')}}</div>
            <a-space style="margin-top: 15px;">
              <a-button type="primary" @click="()=>{okVisible=true;okStatus=6;}" v-has="'admin:sysDoctorList:applyCA'">证书申请</a-button> 
              <a-button type="primary" status="success" @click="()=>{okVisible=true;okStatus=2;}" v-has="'admin:sysDoctorList:updateCA'">证书续期</a-button>
              <a-button type="primary" status="danger" @click="()=>{okVisible=true;okStatus=3;}" v-has="'admin:sysDoctorList:removeCA'">证书注销</a-button>
            </a-space>
            <a-divider />
            <div class="title">签章配置</div>
            <a-space style="margin-top: 15px;">
              <a-button type="primary" status="success" @click="()=>{okVisible=true;okStatus=4;}" v-has="'admin:sysDoctorList:applySign'">签章申请</a-button>
              <!-- <a-button type="primary" status="danger" @click="()=>{okVisible=true;okStatus=5;}">签章更新</a-button> -->
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
</a-form>
<a-divider v-show="modalSatus!='detail' " v-if="modalForm.department_custom_name && modalForm.iden_auth_status==1 && modalForm.user_doctor_info.sign_image && modalForm.multi_point_status==1"/>
<div class="titlebox" v-if="modalSatus!='detail'">
  <div class="bar"></div>
  <div class="name">操作</div>
</div>
<a-row :gutter="24" style="margin-top: 35px;" v-if="modalSatus!='detail'">
  <a-col :span="24">
    <a-form-item field="" label="" no-style>
      <a-space v-if="modalSatus!='detail'" style="margin-right: 8px;">
        <a-button type="primary" @click="()=>okVisible=true">保存</a-button>
      </a-space>
      <!-- <a-space v-if="modalSatus=='edit'">
        <a-button type="primary" status="warning">拉黑</a-button>
        <a-button type="primary" status="danger">删除</a-button>
      </a-space> -->
    </a-form-item>
  </a-col>
</a-row>
</a-modal>
</template>
<script setup>
import { Message } from '@arco-design/web-vue';
import { reactive, ref, getCurrentInstance,watch,toRefs,onMounted  } from 'vue';
import { getDoctorDetail, departmentList, decryptCard, hospitalList, expertiseList, areaList, bankList, decryptBank } from '@/api/doctor/list';
import { ossSign, ossUpload } from '@/api/oss';
import dayjs from 'dayjs'
import { parseTime } from '@/utils/parseTime';
const { proxy } = getCurrentInstance();
const props = defineProps({
  // 是否显示
  doctorVisible: {
    type: Boolean,
    default: false,
  },
  doctor_id:{
    type: String,
    default: '',
  }
});
const emits = defineEmits(['doctorVisibleChange']);
const {doctorVisible,doctor_id} = toRefs(props);
const modalTitle=ref('医生详情');
const modalSatus=ref('detail');
const loading = ref(false);
watch(()=>props.doctorVisible,(value)=>{
   if(value){
     doctorVisible.value=value
   }
})
const okVisible=ref(false)
const okStatus=ref(1); //1保存 2证书续期 3//证书注销 //4申请签章 //5更新签章
watch(()=>props.doctor_id,(value)=>{
   if(doctor_id){
    doctor_id.value=value
    handleDoctorDetail(value);
   }
  
})
// Akiraka 20230210 关闭弹窗
const handleClose = () =>  {
  emits('doctorVisibleChange', doctorVisible.value = false);
  // Akiraka 20230210 关闭弹窗
  doctorVisible.value = false;
}
const modalForm = reactive({
    hospital: {
      address: '',
      hospital_name: '',
      hospital_id: ''
    },
    user_doctor_info: {

    },
    doctor_bank_card: {
      bank_card_province_id: '',
      bank_card_city_id: '',
      bank_card_county_id: '',
      bank_id: ''
    },
    user: {},
    doctor_id: '',
    license_cert: [],
    qualification_cert: [],
    work_cert: [],
    department_custom_name: '',
    user_id: '',
    status: 1,
    id_card_front: '',
    id_card_back: '',
    sign_image: '',
    card_num: null,
    cur_doctor_expertise: [],
    avatar: 'https://img.applets.igandanyiyuan.com/basic/file/doctor_avatar.png',
    bank_card_code: '',
  });
  const hospital_name = ref('');
  watch(() => modalForm.hospital, () => {
    if (modalForm.hospital && modalForm.hospital.hospital_name) {
      hospital_name.value = modalForm.hospital.hospital_name + '(' + modalForm.hospital.province + modalForm.hospital.city + modalForm.hospital.county + ')'
    } else {
      hospital_name.value = ''
    }
  }, {
    deep: true
  })
  //const doctor_expertise=ref([]);
  //证书计算
  const transArr = (arr) => {
    let newArr = [];
    if (arr instanceof Array) {
      arr.forEach((item) => {
        newArr.push({ url: item })
      });
    } else if (typeof arr == "string") {
      newArr.push({ url: arr })
    }
    return newArr
  };

  const changeData = (value) => {
    switch (value.type) {
      case 'license_cert_list':
        if (value.dealType == "add") {
          license_cert_list.value.push({
            url: value.url
          })
        } else {
          license_cert_list.value.splice(license_cert_list.value.findIndex(item => item.url === value.url), 1)
        }
        break;
      case 'qualification_cert_list':
        if (value.dealType == "add") {
          qualification_cert_list.value.push({
            url: value.url
          })
        } else {
          qualification_cert_list.value.splice(qualification_cert_list.value.findIndex(item => item.url === value.url), 1)
        }
        break;
      case 'work_cert_list':
        if (value.dealType == "add") {
          work_cert_list.value.push({
            url: value.url
          })
        } else {
          work_cert_list.value.splice(work_cert_list.value.findIndex(item => item.url === value.url), 1)
        }
        break;
      case 'id_card_front_list':
        if (value.dealType == "add") {
          id_card_front_list.value.push({
            url: value.url
          })
        } else {
          id_card_front_list.value.splice(id_card_front_list.value.findIndex(item => item.url === value.url), 1)
        }
        break;
      case 'id_card_back_list':
        if (value.dealType == "add") {
          id_card_back_list.value.push({
            url: value.url
          })
        } else {
          id_card_back_list.value.splice(id_card_back_list.value.findIndex(item => item.url === value.url), 1)
        }
        break;
      case 'sign_image_list':
        if (value.dealType == "add") {
          sign_image_list.value.push({
            url: value.url
          })
        } else {
          sign_image_list.value.splice(sign_image_list.value.findIndex(item => item.url === value.url), 1)
        }

    }
    //  console.log(value);
    //  console.log([`${value.type}.value`]);

    //[value.type].value=[value.type].value.concat([{url:value.url}]);
  }
  //
  const license_cert_list = ref([]);
  const qualification_cert_list = ref([]);
  const work_cert_list = ref([]);
  const id_card_front_list = ref([]);
  const id_card_back_list = ref([]);
  const sign_image_list = ref([]);
  watch(() => license_cert_list.value, (value) => {
    let arr = []
    value.forEach((item) => {
      arr.push(item.url)
    });

    modalForm.license_cert = arr;

  }, { deep: true });
  watch(() => qualification_cert_list.value, (value) => {
    let arr = []
    value.forEach((item) => {
      arr.push(item.url)
    });
    modalForm.qualification_cert = arr;
  }, { deep: true });

  watch(() => work_cert_list.value, (value) => {
    let arr = []
    value.forEach((item) => {
      arr.push(item.url)
    });
    modalForm.work_cert = arr;
  }, { deep: true });

  watch(() => id_card_front_list.value, (value) => {
    if (value.length > 0) {
      modalForm.id_card_front = value[0].url;
    } else {
      modalForm.id_card_front = ''
    }
  }, { deep: true });
  watch(() => id_card_back_list.value, (value) => {
    value.length > 0 ? modalForm.id_card_back = value[0].url : modalForm.id_card_back = ''
  }, { deep: true });
  watch(() => sign_image_list.value, (value) => {
    if (value.length > 0) {
      modalForm.sign_image = value[0].url;
    } else {
      modalForm.sign_image = ''
    }
  }, { deep: true });
  // Rules
  const rules = {
    avatar: [{ required: true, message: '请上传医生头像' }],
    user_name: [
      { required: true, message: '请输入医生名字' },
      {
        validator: (value, cb) => {
          let reg = /^([\u4e00-\u9fa5\·]{2,10})$/;
          if (!reg.test(value)) {
            cb('姓名要求在2-10个汉字');
          }
        }
      }],
    card_num: [
      { required: true, message: '请输入身份证号' },
      {
        validator: (value, cb) => {
          let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if (!reg.test(value)) {
            cb('身份证号码格式不正确');
          }
        }
      }
    ],
    'user.mobile': [
      { required: true, message: '请输入手机号' },
      {
        validator: (value, cb) => {
          let reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            cb('手机号码格式不正确');
          }
        }
      }],
    'hospital.address': [{ required: true, message: '请输入医院地址' }],
    'hospital_id': [{ required: true, message: '请选择医院名称' }],
    'department_custom_mobile': [{
      required: true, message: '请输入科室电话'
    }],
    department_custom_id: [{ required: true, message: '请选择所在科室' }],
    department_custom_name: [{ required: true, message: '请输入科室名称' }],
    doctor_title: [{ required: true, message: '请选择职称' }],
    // 'user_doctor_info.qualification_cert_num': [{ required: true, message: '请输入资格证编码' }],
    cur_doctor_expertise: [
      { type: 'array', required: true, message: '请选择专长' },
      {
        validator: (value, cb) => {
          if (value.length > 10) {
            cb("专长不能超过10项")
          }
        }
      }
    ],
    be_good_at: [{ required: true, message: '请输入擅长内容', maxLength: 1000, minLength: 2 }],
    brief_introduction: [{ required: true, message: '请输入简介', maxLength: 1000, minLength: 2 }],
    license_cert: [
      {
        validator: (value, cb) => {
          return new Promise(resolve => {
            window.setTimeout(() => {
              if (license_cert_list.value.length < 2) {
                cb("至少上传2张医师执业证照片")
              }
              resolve()
            }, 1000)
          })

        }
      }],
    qualification_cert: [
      {
        validator: (value, cb) => {
          return new Promise(resolve => {
            window.setTimeout(() => {
              if (qualification_cert_list.value.length == 0) {
                cb("请上传医师资格证")
              }
              resolve()
            }, 1000)
          })

        }
      }
    ],
    work_cert: [
      {
        validator: (value, cb) => {
          return new Promise(resolve => {
            window.setTimeout(() => {
              if (work_cert_list.value.length == 0) {
                cb("请上传医师职称证")
              }
              resolve()
            }, 1000)
          })

        }
      }
    ],
  };
  const doctor_title_data = [
    {
      doctor_title: 1,
      doctor_title_name: '主任医师'
    },
    {
      doctor_title: 2,
      doctor_title_name: '主任中医师'
    },
    {
      doctor_title: 3,
      doctor_title_name: '副主任医师'
    },
    {
      doctor_title: 4,
      doctor_title_name: '副主任中医师'
    },
    {
      doctor_title: 5,
      doctor_title_name: '主治医师'
    },
    {
      doctor_title: 6,
      doctor_title_name: '住院医师'
    }
  ]
 //详情
 const handleDoctorDetail = async (doctor_id) => {
   
    const { code, data, message } = await getDoctorDetail(doctor_id);

    if (code == 200) {
      Object.assign(modalForm, data);
      if (!data.hospital) {
        modalForm.hospital = {};
      }
        if(data.doctor_title==0){
          modalForm.doctor_title='';
        }
        if(data.hospital_id==0){
          modalForm.hospital_id='';
        }
        if(data.department_custom_id==0){
          modalForm.department_custom_id=''
        }
        if (!data.user_doctor_info) {
        data.user_doctor_info = {};
        modalForm.user_doctor_info = {};
      }
      if (data.doctor_expertise && data.doctor_expertise.length > 0) {
        let arr = [];
        data.doctor_expertise.forEach((item) => {
          arr.push(item.expertise_id)
        })
        handleDecryptBank();
        if (data.doctor_bank_card && data.doctor_bank_card.province_id) {
          handelAreaList('', data.doctor_bank_card.province_id, 3);
        }else{
          modalForm.doctor_bank_card={}
        }
        if (data.doctor_bank_card && data.doctor_bank_card.city_id) {
          handelAreaList('', data.doctor_bank_card.city_id, 4);
        }else{
          modalForm.doctor_bank_card={}
        }
        if(data.doctor_bank_card){
          let obj=data.doctor_bank_card;
         for (const key in obj) {
            if(obj[key]==0){
              modalForm.doctor_bank_card[key]=''
            }

         }
       }
        modalForm.cur_doctor_expertise = arr;
      }
    }
  };
  const departmentData = ref([]);
  //获取科室列表
  const getDepartmentList = () => {
    departmentList().then((res) => {
      const { data, code, message } = res;
      if (code == 200) {
        departmentData.value = data;
      }
    });
  }
  //切换小眼睛
  const showEye = ref(false);
  const id_card_num = ref('');
  //解密身份证号码
  const handelDecryptCard = async (user_id) => {
    showEye.value = true;
    const { data, code, message } = await decryptCard({
      user_id
    });
    if (code == 200) {
      id_card_num.value = data;
    }
  };
  const hospitalData = ref([]);
  const changeHospital = (value) => {
    let arr = hospitalData.value.filter((item) => item.hospital_id == value);
    modalForm.hospital_id = arr[0].hospital_id;
    modalForm.hospital = arr[0];
  }
  //获取医院列表
  const handleHospitalList = (value) => {
    loading.value = true;
    hospitalList({
      hospital_name: value,
    }).then((res) => {
      const { data, code, message } = res;
      if (code == 200) {

        hospitalData.value = data;
        loading.value = false;
      }
    });

  }

  const expertiseData = ref([]);
  // 获取专长列表
 
  // 获取专长列表
  const handlExpertiseList = () => {
    expertiseList().then((res) => {
      const { data, code, message } = res;
      if (code == 200) {
        expertiseData.value = data;
      }
    })
  }
  const provinceData = ref([]);
  const cityData = ref([]);
  const countryData = ref([]);
  //获取区域列表
  const handelAreaList = (area_id = '', parent_id = '', area_type) => {
    areaList({
      area_id,
      area_type,
      parent_id
    }).then((res) => {
      const { data, code, message } = res;
      if (code == 200) {
        if (area_type == 2) {
          provinceData.value = data;
        }
        if (area_type == 3) {
          cityData.value = data;
        };
        if (area_type == 4) {
          countryData.value = data;
        };


      }
    })
  }
  //切换省份
  const changeProvice = (value) => {
    modalForm.doctor_bank_card.city_id = '';
    modalForm.doctor_bank_card.county_id = '';
    handelAreaList('', value, 3);
  };
  //切换省份
  const changeCity = (value) => {
    modalForm.doctor_bank_card.county_id = '';
    handelAreaList("", value, 4);

  }
  const handleDecryptBank = () => {
    decryptBank(modalForm.doctor_id).then((res) => {
      const { data, code, message } = res;
      if (code == 200) {
        modalForm.bank_card_code = data;
      }
    })
  }
  const bankData = ref([])
  const handleBankList = () => {
    bankList().then((res) => {
      const { data, code, message } = res;
      if (code == 200) {
        bankData.value = data;
      }
    })
  }

  //获取oss签名
  const getOssSign = async (scene, File) => {
    const { data, code, message } = await ossSign({
      user_type: 2,
      scene,
    });
    if (code == 200) {
      let { access_id, dir, policy, signature, host } = data;
      //let index = File.lastIndexOf("/");
      let filename = File.name;
      let time = dayjs().format("YYYYMMDDHHmmss")
      let formData = new FormData();
      formData.append('OSSAccessKeyId', access_id);
      formData.append('policy', policy);
      formData.append('signature', signature);
      formData.append('key', dir + time + filename);
      formData.append('success_action_status', 200);
      formData.append('file', File, filename);
      ossUpload(host, formData).then((res) => {
        modalForm.avatar = host + "/" + dir + time + filename;
      });

    }
  }
  //上传前验证
  const beforeUpload = (file, type) => {
    return new Promise((resolve, reject) => {
      if (file.size >= 10 * 1024 * 1024) {
        proxy.$notification.error("图片大小不能超过10M");
        reject('cancel')
      } else {
        resolve(true)
      }
    });
  };
  const filterOption = (value, options) => {
    console.log(value, options)
  }
  //上传文件
  const onChangeFile = (fileList) => {

    getOssSign(1, fileList[0].file);
  }
  onMounted(()=>{
    handleHospitalList();
    getDepartmentList();
    handlExpertiseList();
    handelAreaList("", "", 2);
    handleBankList();
  })
</script>
<style scoped>
.hospital_name {
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .headImg {
    margin-right: 20px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
  }

  .arco-form-item-layout-horizontal:first-child,
  .arco-form-item-layout-horizontal:nth-child(2) {
    align-items: center;
  }

  .upload {
    margin-left: 20px;
  }

  .eye {
    margin-left: 20px;
    cursor: pointer;
    font-size: 18px;
  }

  .box {
    display: flex;
    align-items: center;
  }

  .cert .arco-form-item-label-col {
    flex: 0 0 8px !important;
  }

  .red {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    color: red;
    margin-top: 5px;
  }

  .cardNum {
    width: 148px;
  }
  .codbox{
    display: flex;
    align-items: center;
  }
</style>