<!--
  Description: 人员管理页面
  Author: 李亚光
  Date: 2023-04-23
 -->
<!-- 计量人员新增 -->
<script lang="ts" setup name="addNotice">
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import photograph from './photograph.vue'
import { Plus } from '@element-plus/icons-vue'
const $route = useRoute()
const $router = useRouter()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm: { [key: string]: string | any } = ref({
  account: '',
  name: '', // 姓名
}) // 表单
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const title = ref('')
const staffId = ref('')
const photographRef = ref()
// 身份证号码验证规则
const validateIDcard = (rule: any, value: any, callback: any) => {
  const rr = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
  if (rr.test(value)) {
    callback()
  }
  else {
    callback(new Error('验证失败'))
  }
}
const rules = ref({
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
}) // 表单验证规则
// 根据身份证得到生日
const getBirthday = () => {
  ruleFormRef.value?.validateField('idCard').then((res) => {
    // 获取生日
    const IdCard = ruleForm.value.idCard
    const birthday = `${IdCard.substring(6, 10)}-${IdCard.substring(10, 12)}`
    ruleForm.value.birthday = birthday
    // 获取性别 第17位  奇数为男 偶数为女
    // ruleForm.value.sex
    if (Number(IdCard.substring(16, 17)) % 2) {
      // 男
      ruleForm.value.sex = '1'
    }
    else {
      //  女
      ruleForm.value.sex = '2'
    }
  })
}
// 拍照功能
const tackPhoto = ref(false)
const register = () => {
  photographRef.value.initDialog()
  tackPhoto.value = true
}
// 关闭摄像头
const offPthot = (url: string) => {
  console.log(url, '图片地址')
  tackPhoto.value = false
}
// const PubList = ref<TreeStructure[]>([])
// const PubListTree = ref([])
// 获取组织列表
// const getPubList = () => {
//   getDeptTreeList().then((res) => {
//     // 转成树结构
//     PubList.value = res.data
//     PubListTree.value = toTreeList(res.data, '0', true)
//   })
// }
// const sexList = ref<{ id: string; value: string; name: string }[]>()
// // 获取性别
// const getSexList = () => {
//   getDictByCode('sex').then((response) => {
//     sexList.value = response.data
//   })
// }
// 重置表单内容
const resetFormData = () => {
  ruleForm.value = {
    name: '', // 姓名
  }
}
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  // 当前选中的证书基本信息列表
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认提交吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
      })
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  $router.go(-1)
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 拍照组件 -->
    <photograph ref="photographRef" :tack-photo="tackPhoto" @off="offPthot"/>
    <detail-page :title="`人员新增`">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" :class="[title === '详情' ? 'isDetail' : '']" border stripe>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item prop="minioFileName" >
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :http-request="uploadQuarterlyEvaluateFile"
                :before-upload="beforeAvatarUpload"
                :disabled="title === '详情'"
                accept="image/png, image/jpeg,image/jpg"
              >
                <img v-if="ruleForm.minioFileName" :src="photoUrl" class="avatar">
                <el-icon v-else class="avatar-uploader-icon">
                  <plus />
                </el-icon>
              </el-upload>
              <el-button type="primary" style="margin-top: 20px; display: block; width: 190px;" @click="register">人脸注册</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.name" placeholder="姓名" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="sex" class="marg-item" style="margin-top: 40px;">
              <el-select v-model="ruleForm.sex" placeholder="请选择性别" :disabled="title === '所属部门'" style="width: 100%;">
                <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="职务" prop="name" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.name" placeholder="职务" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex" class="marg-item" style="margin-top: 40px;">
              <el-select v-model="ruleForm.sex" placeholder="请选择性别" :disabled="title === '详情'" style="width: 100%;">
                <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="name" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.name" placeholder="联系方式" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
            <el-form-item label="证件号码" prop="name" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.name" placeholder="证件号码" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="resetForm" style="margin-left: 30px;">
          取消
        </el-button>
        <el-button :loading="btnLoading" type="primary" @click="submitForm">
          保存
        </el-button>
      </div>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
.dialog-footer{
  display: flex;
  justify-items: end;
  flex-direction: row-reverse;
}
:deep(.el-radio__label) {
  display: none;
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 190px;
  height: 250px;
  text-align: center;
}

:deep(.avatar-uploader .avatar) {
  width: 190px;
  height: 250px;
  display: block;
}

.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      display: none;
    }
  }
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 190px;
  height: 250px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 190px;
  height: 250px;
  text-align: center;
}
</style>