<!--
  Description: 现场管理新增或编辑
  Author: 李亚光
  Date: 2023-04-24
 -->
<script lang="ts" setup name="sceneEdit">
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import addOperatives from './components/personTable.vue'
const $route = useRoute()
const $router = useRouter()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm: { [key: string]: string | any } = ref({
  account: '',
  name: '', // 姓名
}) // 表单
const title = 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 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;">
    <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="2"></el-col>
          <el-col :span="8">
            <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-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-col>
          <el-col :span="2"></el-col>
          <el-col :span="8">
            <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" type="textarea" :rows="4" placeholder="作业概述" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 添加工作人员 -->
      <add-operatives />
      <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>