<script lang="ts">
export default {
  name: 'VisionInstitutionDoctor' // 视力筛查服务机构_医生
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import Page from '@/components/Pagination/page.vue'
import { queryInstitutionDoctorPage, addVisionInstitutionDoctor,updateVisionInstitutionDoctor,delVisionInstitutionDoctor } from "@/api/regionmodule/VisionInstitutionDoctor";
const emit = defineEmits([ 'returnClick']);
const props:any = defineProps({
  institutionId: {
    required: false,
    type: String,
    default: ""
  }
})
const multipleSelection = ref([]);
//定义医生填写规则
const moderules = reactive<FormRules>({
  name: [{ required: true, message: "请输入医生名称", trigger: "blur" }],
  mobile: [{ pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
});
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
const queryInfo :any = ref({
  name:'',
  current:1,
  size:10,
  total:0
})
const tableData =ref([])
const loading = ref(false)
//获取医生列表
function getData(){
  queryInfo.value.name = queryInfo.value.name.replace(/\s+/g, "");
  let params = {
    name: queryInfo.value.name,
    institutionId: institutionId.value,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loading.value = true
  queryInstitutionDoctorPage(params).then((res) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
}
const isSwitch = ref(false) // 提交开关
//新建医生数组
const info:any = ref({
  institution_id: "", //学校id
  code: "", // 医生代码
  name: "", // 医生名称
  gender:"",
  birth_date:"",
  mobile:"",
  wechat:"",
  email:"",
  certificate:"",
  license:"", //从业执照
  signature:""
});
const title = ref("") // 弹框标题
const dialogVisible = ref(false)
//新建医生
function addClick() {
  isSwitch.value = false
  const infoagin = ref({
    id: null,
    institutionId: institutionId.value, //区域ID （医生所在城市
    code: "", // 医生代码
    name: "", // 医生名称
    gender:"",
    birth_date:"",
    mobile:"",
    wechat:"",
    email:"",
    certificate:"",
    signature:"",
    license:"", //从业执照

  });
  info.value = infoagin.value;
  title.value = "新增医生";
  dialogVisible.value = true;
}
//修改医生
function editHandle(row: any) {
  isSwitch.value = false
  title.value = "修改医生";
  info.value = JSON.parse(JSON.stringify(row));
  dialogVisible.value = true;
}
//删除医生
function delHandle(row: any) {
  ElMessageBox.confirm("确定删除此医生吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      ids: row.id,
    };
    delVisionInstitutionDoctor(params).then(() => {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
// 多选删除医生
function delClick() {
  ElMessageBox.confirm("确定删除已选择的医生吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let id = [] as any[];
    multipleSelection.value.forEach((item: any) => {
      id.push(item.id)
    })
    let params = {
      ids: id.join(','),
    };
    delVisionInstitutionDoctor(params).then(() => {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    // 拼接
    return year + "-" + month + "-" + day + " ";
  }
}
const institutionId = ref("")
onMounted(() => {
  institutionId.value = props.institutionId
  getData()
});

const infoForm = ref();
//关闭弹窗
function handleClose() {
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}
function confirmClick(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      if(isSwitch.value == true){
        return
      }
      isSwitch.value = true
      if (info.value.id) {
        const data:any = {
          id:info.value.id,
          institutionId: info.value.institution_id, //学校ID
          code: info.value.code, // 医生代码
          name: info.value.name, // 医生名称
          gender: info.value.gender, // 性别
          birthDate: info.value.birth_date, // 出生日期
          mobile: info.value.mobile, // 手机号
          wechat: info.value.wechat, // 微信号
          email: info.value.email, // 微信号
          certificate:info.value.certificate, //资格证书
          license:info.value.license, //从业执照
          signature:info.value.signature //电子签名
          
          
        };
        if(info.value.gender == '' || info.value.gende==null){
          data.gender = '0'
        }
        updateVisionInstitutionDoctor(data).then((item:any) => {
          if(item.code == '0'){
            dialogVisible.value = false;
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            getData();
          }
        }).catch(()=>{
          isSwitch.value = false
        })
      } else {
        const data:any = {
          institutionId: info.value.institution_id, //学校ID
          code: info.value.code, // 医生代码
          name: info.value.name, // 医生名称
          gender: info.value.gender, // 性别
          birthDate: info.value.birth_date, // 出生日期
          mobile: info.value.mobile, // 手机号
          wechat: info.value.wechat, // 微信号
          email: info.value.email, // 微信号
          certificate:info.value.certificate, //资格证书
          license:info.value.license, //从业执照
          signature:info.value.signature //电子签名
        };
        if(info.value.gender == '' || info.value.gende==null){
          data.gender = '0'
        }
        addVisionInstitutionDoctor(data).then((item:any) => {
          if(item.code == '0'){
            dialogVisible.value = false;
            getData();
            ElMessage({
              message: "新增成功",
              type: "success",
            });
          }
        }).catch(()=>{
          isSwitch.value = false
        })
      }
      
    }
  })
}

/**
 * 
 * 上传Base64图片方法
 */
 function uploadChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.license =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}
function uploadQecodeChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.signature =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}

function delLicense(){
  info.value.license = ""
}
function delsignature(){
  info.value.signature = ""
}
function returnClick(){
  emit('returnClick')
}
</script>
<template>
  <div class="">
    <div class="schoolStudent-title" style="margin-right: 20px;">
        <div class="class_order">{{ props.classInfo.grade_name }}{{ props.classInfo.class_name }}</div>
        <div class="return" @click="returnClick">
          <img src="@/assets/tableicon/u549.png" alt="">
          <div style="padding-left: 2px;padding-top: 2px;">返回</div>
        </div>
      </div>
      <div class="schoolStudent-line" style="width:calc(100% - 25px) ;margin-left: 5px;"></div>
    <el-row style="margin-bottom: 10px">
        <el-col :span="24" class="top-nav">
          <div>
            <el-input v-model="queryInfo.name" placeholder="请输入医生姓名" clearable style="width: 200px;"
              @keyup.enter="getData" />
            <el-button type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
          </div>
          <div class="left-nav">
            <el-button type="primary" @click="addClick"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData" style="width: 100%; height:calc(100% - 105px);" row-key="id" border
        @selection-change="handleSelectionChange" default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}"
        >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="code" label="医生代码" min-width="140"></el-table-column>
        <el-table-column prop="name" label="医生姓名" width="100"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="scope">
            <span v-if="scope.row.gender == '0'">不详</span>
            <span v-if="scope.row.gender == '1'">男</span>
            <span v-if="scope.row.gender == '2'">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="所属学校" min-width="140"></el-table-column>
        <el-table-column prop="certificate" label="资格证书" width="120" align="center">
          <template #default="scope">
            <span v-if="scope.row.certificate == '0'">执业医师</span>
            <span v-if="scope.row.certificate == '1'">执业技师</span>
            <span v-if="scope.row.certificate == '2'">护士</span>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="出生日期" width="120" align="center">
          <template #default="scope">
            {{ dateFormat(scope.row.birth_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120" align="center"></el-table-column>
        <el-table-column prop="license" label="从业执照" width="140">
          <template #default="scope">
            <img :src="scope.row.license" alt="" style="width: 70px;">
            <!-- <el-image
              style="width: 70px; height: 70px"
              :src="scope.row.license"
              :preview-src-list="[scope.row.license]"
              :initial-index="4"
              fit="cover"
              z-index="3000"
            /> -->
          </template>
        </el-table-column>
        <el-table-column prop="signature" label="电子签名" width="140">
          <template #default="scope">
            <img :src="scope.row.signature" alt="" style="width: 70px;">
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
              <img src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="cursor: pointer;"
              @click="editHandle(scope.row)" >
            <img src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="cursor: pointer;"
              @click="delHandle(scope.row)" >
            </span>
          </template>
        </el-table-column>
      </el-table>
      <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
        @pagination="getData" />
    <!-- 医生 弹框-->
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" draggable width="620px">
      
      <el-form ref="infoForm" :model="info" label-width="100px" :rules="moderules">
        <el-form-item label="所属学校" prop="code">
          <el-input v-model="info.code" style="width: 100%"  :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="医生代码">
          <el-input v-model="info.code" style="width: 100%"  placeholder="请输入医生代码"></el-input>
        </el-form-item>
        <el-form-item label="医生姓名" prop="name">
          <el-input v-model="info.name" style="width: 100%" placeholder="请输入医生名称"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="info.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth_date">
          <el-date-picker v-model="info.birth_date" type="date" placeholder="" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" >
          <el-input v-model="info.mobile" style="width: 100%" placeholder="请输入医生名称"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="info.email" style="width: 100%" placeholder="请输入医生名称"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input v-model="info.wechat" style="width: 100%" placeholder="请输入医生名称"></el-input>
        </el-form-item>
        <el-form-item label="资格证书" prop="certificate">
          <el-radio-group v-model="info.certificate">
            <el-radio label="0">执业医师</el-radio>
            <el-radio label="1">执业技师</el-radio>
            <el-radio label="2">护士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传图片" prop="organization_id">
          <div style="display: flex;">
            <el-upload
              class="avatar-uploader"
              accept=".png, .jpg, .jpeg"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              @change="uploadChange" 
            >
            <div style="width: 100px;height: 100px;position: relative;" v-if="info.license">
              <img :src="info.license" class="avatar" />
              <div style="position: absolute;top: 0px;left: 0px;z-index: 1;width: 100px;height: 100px;background: rgba(0,0,0,0.3);color: cornflowerblue;">
                <el-icon style="position: absolute;top: 40px;left: 40px;z-index: 1;font-size: 20px;"
                @click.stop="delLicense"><Delete /></el-icon>
              </div>
            </div>
            <div  v-else>
              <el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
              <div class="newavatar-uploader-text">从业执照</div>
            </div>
              
            </el-upload>
            <el-upload
              style="margin-left: 10px;"
              class="avatar-uploader"
              accept=".png, .jpg, .jpeg"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              @change="uploadQecodeChange"
            >
              <div style="width: 100px;height: 100px;position: relative;" v-if="info.signature">
                <img :src="info.signature" class="avatar" />
                <div style="position: absolute;top: 0px;left: 0px;z-index: 1;width: 100px;height: 100px;background: rgba(0,0,0,0.3);color: cornflowerblue;">
                  <el-icon style="position: absolute;top: 40px;left: 40px;z-index: 1;font-size: 20px;"
                  @click.stop="delsignature"><Delete /></el-icon>
                </div>
              </div>
              <div  v-else>
                <el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
                <div class="newavatar-uploader-text">电子签名</div>
              </div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button>
        <el-button type="primary" style="padding: 10px 15px" @click="confirmClick(infoForm)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped  lang="scss">
.schoolStudent-title{
      display: flex;
      justify-content: space-between;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #282828;
      .class_order{
        padding-bottom: 5px;
        border-bottom:3px solid #409eff;
      }
      .return{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #409EFF;
        width: 50px;
        height: 26px;
        border: 1px solid #C6E2FF;
        background: rgb(236, 245, 255);
        border-radius:4px;
        cursor: pointer;
      }
    }
    .schoolStudent-line{
      width: 100%;
      height: 1px;
      background: rgb(220, 223, 230);
      margin-top: -1px;
    }
</style>
