<template>
    <div class="app-container">
      <a-form :model="queryForm" ref="queryFormRef" layout="inline">
  
        <a-form-item field="user_name" label="医生名字">
          <a-input v-model="queryForm.user_name" placeholder="请输入医生名字" @press-enter="handleQuery" />
        </a-form-item>
        <a-form-item field="mobile" label="电话号码">
          <a-input v-model="queryForm.mobile" placeholder="请输入电话号码" @press-enter="handleQuery" />
        </a-form-item>
        <!-- <a-form-item field="multi_point_status" label="审核状态">
          <a-select v-model="queryForm.multi_point_status" placeholder="请选择审核状态" :style="{ width: '180px' }">
            <a-option :value="2">审核中</a-option>
            <a-option :value="3">认证失败</a-option>
          </a-select>
        </a-form-item> -->
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
            <a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
  
      <!-- <a-divider /> -->
  
      <!-- action -->
  
      <!-- table -->
      <a-table :columns="columns"  :data="tableData"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
        :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
        row-key="doctor_id"
        @selection-change="(selection) => {deleteData = selection;}" @page-change="handlePageChange"
        @page-size-change="handlepage_sizeChange">
        <template #doctor_id="{record,rowIndex}">
          <div>{{(rowIndex+1)+(pager.page-1)*pager.page_size}}</div>
        </template>
        <template #doctor_title="{ record }">
          <!-- 医生职称（1:主任医师 2:主任中医师 3:副主任医师 4:副主任中医师 5:主治医师 6:住院医师） -->
          <div v-if="record.doctor_title==1">主任医师</div>
          <div v-else-if="record.doctor_title==2">主任中医师</div>
          <div v-else-if="record.doctor_title==3">副主任医师</div>
          <div v-else-if="record.doctor_title==4">副主任中医师</div>
          <div v-else-if="record.doctor_title==5">主治医师</div>
          <div v-else-if="record.doctor_title==6">住院医师</div>
        </template>
        <template #created_at="{ record }">
            {{ parseTime(record.created_at) }}
          </template>
        <template #hospital_name="{record}">
          <div class="hospital_name" :title="record.hospital_name">{{record.hospital_name}}</div>
        </template>
        <template #inquiry_service="{ record }">
          <span>{{filterService(record)}}</span>
        </template>
        <template #introduction_status="{ record }">
          <!-- 简介认证状态（0:未认证 1:认证通过 2:审核中 3:认证失败） -->
          <a-tag v-if="record.introduction_status == 0" color="gray">未审核</a-tag>
          <a-tag v-else-if="record.introduction_status == 1" color="green">审核通过</a-tag>
          <a-tag v-else-if="record.introduction_status == 2" color="#ffb400">审核中</a-tag>
          <a-tag v-else color="red">审核失败</a-tag>
        </template>
        <template #is_recommend="{ record }">
          <!-- 身份认证状态（0:未认证 1:认证通过 2:审核中 3:认证失败） -->
          <a-tag v-if="record.is_recommend == 0" color="gray">否</a-tag>
          <a-tag v-else color="green">是</a-tag>
        </template>
        <template #status="{ record }">
          <!-- 状态（0:禁用 1:正常 2:删除） -->
          <a-switch v-model="record.status" checked-color="#14C9C9" :checked-value="1" unchecked-value="0" />
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button v-has="'admin:sysDoctorIntroduction:check'" type="text"
              @click="handleDetail(record)"><icon-book />审核</a-button>
          </a-space>
        </template>
      </a-table>
  
      <!-- Modal -->
      <a-modal v-model:visible="modalVisible" fullscreen :title="modalTitle" title-align="start" :footer="false"
        @close="() => {$refs.modalFormRef.resetFields(); modalForm.doctor_id = null;}">
        <div class="titlebox">
          <div class="bar"></div>
          <div class="name">医生信息</div>
        </div>
        <a-form :model="modalForm" :disabled="true"  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-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 />
        </a-form>
        <div class="titlebox" >
            <div class="bar"></div>
            <div class="name">操作</div>
          </div>
          <a-row :gutter="24" style="margin-top: 35px;" >
            <a-col :span="24">
              <a-form-item field="" label="" no-style>
                <a-space >
                  <a-button type="primary" v-has="'admin:sysDoctorIntroduction:ok'" @click="handleCheck('ok')">审核通过</a-button>
                  <a-button type="primary" v-has="'admin:sysDoctorIntroduction:deny'"  status="danger" @click="handleCheck(deny)">审核拒绝</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>

      <!-- 审核失败弹框 -->
      <a-modal :mask-closable="false"  v-model:visible="modalCheckVisible"   :title="'拒绝理由'" title-align="start" 
      @before-ok="handleSubmit" @close="() => { $refs.checkFormRef.resetFields();}">
        <a-form :model="modalCheckForm"   ref="checkFormRef"
          :auto-label-width="true" :mask-closable="false" :rules="rules" >
           <a-form-item field="avatar_reason" label="头像原因：">
            <a-textarea v-model="modalCheckForm.avatar_reason" placeholder="请输入头像原因" />
          </a-form-item>
          <a-form-item field="doctor_expertise_reason" label="专长原因：">
            <a-textarea v-model="modalCheckForm.doctor_expertise_reason" placeholder="请输入专长原因" />
          </a-form-item>
          <a-form-item field="brief_introduction_reason" label="简介原因：">
            <a-textarea v-model="modalCheckForm.brief_introduction_reason" placeholder="请输入简介原因" />
          </a-form-item>
          <a-form-item field="be_good_at_reason" label="擅长原因：">
            <a-textarea v-model="modalCheckForm.be_good_at_reason" placeholder="请输入擅长原因" />
          </a-form-item>
        </a-form>
    </a-modal>
    </div>
  </template>
  <script setup>
    import { reactive, ref, getCurrentInstance, onMounted, nextTick, watch, computed } from 'vue';
    import { getDoctorList,getDoctorDetail,checkDoctor} from '@/api/doctor/introduction';
    import {departmentList, decryptCard, hospitalList, expertiseList } from '@/api/doctor/list';
    import dayjs from 'dayjs'
    import { parseTime } from '@/utils/parseTime';
    // Akiraka 20230210 删除数据
    const deleteData = ref([])
    // Akiraka 20230210 删除对话框
    const deleteVisible = ref(false)
    const modalCheckVisible = ref(false)
    // Akiraka 20230210 监听删除事件
    watch(() => deleteVisible.value, (value) => {
      if (value == false) {
        getDoctorInfo(pager);
      }
    });
    const file = ref();
    const { proxy } = getCurrentInstance();
  
    const currentPage = ref(1);
    // Pager
    const pager = {
      total: 0,
      page: 1,
      page_size: 10,
    };
    // form
    const queryForm = reactive({
      inquiry_service: ''
    });
    const modalCheckForm = reactive({
      avatar_reason:'',
      doctor_expertise_reason:'',
      brief_introduction_reason:'',
      be_good_at_reason:''
    });
    const modalForm = reactive({
      hospital: {},
      user_doctor_info: {
  
      },
      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'
    });

  
    // Modal
    const modalVisible = ref(false);
    const modalTitle = ref('默认标题');
    //let obj = { 1: '主任医师', 2: '主任中医师', 3: '副主任医师', 4: '副主任中医师', 5: '主治医师', 6: '住院医师' };
    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: '住院医师'
      }
    ];
   
    // rules
    const rules = reactive({
      avatar_reason: [ {
        validator: (value, cb) => {
          if (value && value.length>20) {
            cb('头像理由不能超过20个字符');
          }
        }
      }],
      doctor_expertise_reason: [ {
        validator: (value, cb) => {
          if (value && value.length>20) {
            cb('专长理由不能超过20个字符');
          }
        }
      }],
      brief_introduction_reason: [ {
        validator: (value, cb) => {
          if (value && value.length>20) {
            cb('简介理由不能超过20个字符');
          }
        }
      }],
      be_good_at_reason: [ {
        validator: (value, cb) => {
          if (value && value.length>20) {
            cb('擅长理由不能超过20个字符');
          }
        }
      }],
    });
    // Batch Del List
    let batchList = [];
  
    // Table Columns
    const columns = [
      { title: '编号', dataIndex: 'doctor_id', slotName: 'doctor_id', width: '90' },
      { title: '医生名字', dataIndex: 'user_name' },
      { title: '手机号码', dataIndex: 'mobile' },
      { title: '医院', dataIndex: 'hospital_name', width: 160, slotName: 'hospital_name' },
      { title: '科室', dataIndex: 'department_custom_name',},
      { title: '职称', dataIndex: 'doctor_title', slotName: 'doctor_title' },
      { title: '申请时间', dataIndex: 'created_at', slotName: 'created_at' },
      { title: '审核状态', dataIndex: 'introduction_status', slotName: 'introduction_status' },
      { title: '操作', slotName: 'action' },
    ];
  
    // Table Data
    const tableData = ref([]);
    //改变科室
    const changeSelect = (value) => {
      let arr = departmentData.value.filter((item) => {
        return item.department_custom_id == value
      })
      modalForm.department_custom_name = arr[0].department_custom_name
    }
  
    //详情
    const handleDetail = async (record) => {
      modalVisible.value = true;
      modalTitle.value = '医生详情';
      const { code, data, message } = await getDoctorDetail(record.doctor_id);
  
      if (code == 200) {
        Object.assign(modalForm, data);
        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.hospital) {
        modalForm.hospital = {};
      }
      if (!data.doctor_bank_card) {
        modalForm.doctor_bank_card = {
          province_id: '',
          city_id: '',
          county_id: '',
          bank_id: ''
        }
      };
        if (data.doctor_expertise && data.doctor_expertise.length > 0) {
          let arr = [];
          data.doctor_expertise.forEach((item) => {
            arr.push(item.expertise_id)
          })
          modalForm.cur_doctor_expertise = arr;
        }
      } 
    };
   
    //开启服务处理
    const filterService = (record) => {
      let arr = [];
      let str = '';
      if (record.is_img_expert_reception == 1) {
        arr.push("专家问诊");
      }
      if (record.is_img_welfare_reception == 1) {
        arr.push("公益问诊")
      }
      if (record.is_img_quick_reception == 1) {
        arr.push("快速问诊")
      };
      if (record.multi_point_status == 1) {
        arr.push("问诊购药")
      }
      arr.forEach((item) => {
        if (!str) {
          str += item
        } else {
          str += ',' + item
        }
      })
      return str ? str : "暂无"
    }
    /**
     * 分页改变
     * @param {Number} [page]
     */
    const handlePageChange = (page) => {
      pager.page = page;
  
      // 修改当前页码
      currentPage.value = page;
      getDoctorInfo({ ...pager, ...queryForm });
    };
  
    // 每页数据量
    const handlepage_sizeChange = (page_size) => {
      pager.page_size = page_size;
      getDoctorInfo({ ...pager, ...queryForm });
    };
  
    // 获取医生信息
    const getDoctorInfo = async (params = {}) => {
      const { data, code, message } = await getDoctorList(params);
      if (code == 200) {
        tableData.value = data.data;
        Object.assign(pager, { total: data.total, page: data.page, page_size: data.page_size });
      }
    };



  
    // 查询医生信息
    const handleQuery = async () => {
      pager.page=1;
      const params = {
        page: pager.page,
        page_size: pager.page_size,
        ...queryForm,
      };
  
      getDoctorInfo(params);
    };
  
    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 handleHospitalList = () => {
      hospitalList().then((res) => {
        const { data, code, message } = res;
        if (code == 200) {
          hospitalData.value = data;
        }
      });
  
    }
    const expertiseData = ref([]);
    // 获取专长列表
    const handlExpertiseList = () => {
      expertiseList().then((res) => {
        const { data, code, message } = res;
        if (code == 200) {
          expertiseData.value = data;
        }
      })
    }
        // 异步关闭Modal需要调用 done()
  const handleSubmit = (done) => {
     proxy.$refs.checkFormRef.validate(async (valid) => {
      if (!valid) {
           if(!modalCheckForm.avatar_reason && !modalCheckForm.doctor_expertise_reason && !modalCheckForm.brief_introduction_reason && !modalCheckForm.be_good_at_reason){
            proxy.$notification.error("理由至少填写一个");
            done(false);
            return false
           }
           proxy.$loading.show();
         let dataFrom=Object.assign({},modalCheckForm,{
          introduction_status:3
         })
        const {code,message,data}= await checkDoctor(dataFrom,modalForm.doctor_id);
        if (code == 200) {
            proxy.$loading.hide();
            proxy.$notification.success("提交成功");
            modalVisible.value=false;
        }
        done();
        getDoctorInfo(pager);
      
      } else {
        console.log(valid)
        proxy.$message.error('表单校验失败');
        done(false);
      }
    });
  };
    //审核
    const handleCheck= async(type)=>{
     
      if(type=="ok"){
        proxy.$loading.show();
        const {code,message,data}= await checkDoctor({
          introduction_status:1
        },modalForm.doctor_id);
        if (code == 200) {
            proxy.$notification.success("审核通过");
            modalVisible.value=false;
        };
        proxy.$loading.hide();
        getDoctorInfo(pager);
       
      }else{
        modalCheckVisible.value=true;
      }
      
    }
    // 重置搜索
    const handleResetQuery = () => {
      proxy.$refs.queryFormRef.resetFields();
      getDoctorInfo(queryForm);
    }
    onMounted(() => {
      getDoctorInfo(pager);
      handleHospitalList();
      getDepartmentList();
      handlExpertiseList();
    });
  </script>
  
  <style lang="scss" scoped>
    .action {
      margin-bottom: 12px;
    }
  
    .hospital_name {
      width: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    .headImg {
      margin-right: 20px;
      border-radius: 50%;
    }
  
    .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>