<template>
  <a-spin :spinning="confirmLoading">
    <JFormContainer :disabled="disabled">
      <template #detail>
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="BizEmployeesInfoForm">
			<a-card title="基础信息">
			<a-row>
				<a-col :span="18">
					<a-row>
						<a-col :span="8">
							<a-form-item label="姓名" v-bind="validateInfos.name" id="BizEmployeesInfoForm-name" name="name">
								<a-input v-model:value="formData.name" placeholder="请输入姓名"  allow-clear ></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="性别" v-bind="validateInfos.sex" id="BizEmployeesInfoForm-sex" name="sex">
								<j-dict-select-tag type='radio' v-model:value="formData.sex" dictCode="sex" placeholder="请选择性别"  allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="民族" v-bind="validateInfos.national" id="BizEmployeesInfoForm-national" name="national">
								<a-input v-model:value="formData.national" placeholder="请输入民族"  allow-clear ></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="身份证号" v-bind="validateInfos.idCard" id="BizEmployeesInfoForm-idCard" name="idCard">
								<a-input v-model:value="formData.idCard" placeholder="请输入身份证号"  allow-clear ></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="联系电话" v-bind="validateInfos.tel" id="BizEmployeesInfoForm-tel" name="tel">
								<a-input v-model:value="formData.tel" placeholder="请输入联系电话"  allow-clear ></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="入职时间" v-bind="validateInfos.entryTime" id="BizEmployeesInfoForm-entryTime" name="entryTime">
								<a-date-picker placeholder="请选择入职时间"  v-model:value="formData.entryTime" value-format="YYYY-MM-DD"  style="width: 100%"  allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="岗位级别" v-bind="validateInfos.postLevel" id="BizEmployeesInfoForm-postLevel" name="postLevel">
								<j-dict-select-tag type='radio' v-model:value="formData.postLevel" dictCode="post_level" placeholder="请选择岗位级别"  allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="出生日期" v-bind="validateInfos.dateOfBirth" id="BizEmployeesInfoForm-dateOfBirth" name="dateOfBirth">
								<a-date-picker placeholder="请选择出生日期"  v-model:value="formData.dateOfBirth" value-format="YYYY-MM-DD"  style="width: 100%"  allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="婚否" v-bind="validateInfos.marriedOrNot" id="BizEmployeesInfoForm-marriedOrNot" name="marriedOrNot">
								<j-dict-select-tag type='radio' v-model:value="formData.marriedOrNot" dictCode="married_or_not" placeholder="请选择婚否"  allow-clear />
							</a-form-item>
						</a-col>
					</a-row>
				</a-col>
				<a-col :span="6">
					<a-form-item label="" v-bind="validateInfos.headPath" id="BizEmployeesInfoForm-headPath" name="headPath">
						<j-image-upload :fileMax="1" :bizPath="`employeesHead`" text="头像" v-model:value="formData.headPath" ></j-image-upload>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="工资" v-bind="validateInfos.wages" id="BizEmployeesInfoForm-wages" name="wages">
						<j-dict-select-tag type='radio' v-model:value="formData.wages" dictCode="wages" placeholder="请选择工资"  allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="身高" v-bind="validateInfos.height" id="BizEmployeesInfoForm-height" name="height">
						<a-input-number v-model:value="formData.height" placeholder="请输入身高" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="体重" v-bind="validateInfos.weight" id="BizEmployeesInfoForm-weight" name="weight">
						<a-input-number v-model:value="formData.weight" placeholder="请输入体重" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="家庭住址" v-bind="validateInfos.address" id="BizEmployeesInfoForm-address" name="address">
						<a-input v-model:value="formData.address" placeholder="请输入家庭住址"  allow-clear ></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="是否吸烟" v-bind="validateInfos.isSmoking" id="BizEmployeesInfoForm-isSmoking" name="isSmoking">
						<j-dict-select-tag type='radio' v-model:value="formData.isSmoking" dictCode="is_smoking" placeholder="请选择是否吸烟"  allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="健康状况" v-bind="validateInfos.healthStatus" id="BizEmployeesInfoForm-healthStatus" name="healthStatus">
						<j-dict-select-tag type='radio' v-model:value="formData.healthStatus" dictCode="health_status" placeholder="请选择健康状况"  allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="户籍所在地" v-bind="validateInfos.houseAddress" id="BizEmployeesInfoForm-houseAddress" name="houseAddress">
						<a-input v-model:value="formData.houseAddress" placeholder="请输入户籍所在地"  allow-clear ></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="政治面貌" v-bind="validateInfos.politicalAppearance" id="BizEmployeesInfoForm-politicalAppearance" name="politicalAppearance">
						<j-dict-select-tag v-model:value="formData.politicalAppearance" dictCode="political_appearance" placeholder="请选择政治面貌"  allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="紧急联系人" v-bind="validateInfos.emergencyContact" id="BizEmployeesInfoForm-emergencyContact" name="emergencyContact">
						<a-input v-model:value="formData.emergencyContact" placeholder="请输入紧急联系人"  allow-clear ></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="联系人电话" v-bind="validateInfos.emergencyTel" id="BizEmployeesInfoForm-emergencyTel" name="emergencyTel">
						<a-input v-model:value="formData.emergencyTel" placeholder="请输入紧急联系人电话"  allow-clear ></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="与本人关系" v-bind="validateInfos.emergencyRelationship" id="BizEmployeesInfoForm-emergencyRelationship" name="emergencyRelationship">
						<a-input v-model:value="formData.emergencyRelationship" placeholder="请输入紧急联系人与本人关系"  allow-clear ></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="户口性质" v-bind="validateInfos.hukouNature" id="BizEmployeesInfoForm-hukouNature" name="hukouNature">
						<j-dict-select-tag type='radio' v-model:value="formData.hukouNature" dictCode="hukou_nature" placeholder="请选择户口性质"  allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="备注" v-bind="validateInfos.content" id="BizEmployeesInfoForm-content" name="content">
						<a-input v-model:value="formData.content" placeholder="请输入备注"  allow-clear ></a-input>
					</a-form-item>
				</a-col>
			</a-row>
			</a-card>
				<a-card title="证件信息">
					<a-tabs v-model:activeKey="activeKey">
						<a-tab-pane key="1" tab="身份证">
							<a-row>
								<a-col :span="12">
									<a-form-item label="身份证正面" v-bind="validateInfos.idCardPositive" id="BizEmployeesInfoForm-idCardPositive" name="idCardPositive">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.idCardPositive" ></j-image-upload>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item label="身份证反面" v-bind="validateInfos.idCardNegative" id="BizEmployeesInfoForm-idCardNegative" name="idCardNegative">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.idCardNegative" ></j-image-upload>
									</a-form-item>
								</a-col>
							</a-row>
						</a-tab-pane>
						<a-tab-pane key="2" tab="合同信息">
							<a-row>
								<a-col :span="12">
									<a-form-item label="合同正面" v-bind="validateInfos.contractPositive" id="BizEmployeesInfoForm-contractPositive" name="contractPositive">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.contractPositive" ></j-image-upload>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item label="合同反面" v-bind="validateInfos.contractNegative" id="BizEmployeesInfoForm-contractNegative" name="contractNegative">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.contractNegative" ></j-image-upload>
									</a-form-item>
								</a-col>
							</a-row>

						</a-tab-pane>
						<a-tab-pane key="3" tab="健康证">
							<a-row>
								<a-col :span="12">
									<a-form-item label="健康证正面" v-bind="validateInfos.healthCertificatePositive" id="BizEmployeesInfoForm-healthCertificatePositive" name="healthCertificatePositive">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.healthCertificatePositive" ></j-image-upload>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item label="健康证反面" v-bind="validateInfos.healthCertificateNegative" id="BizEmployeesInfoForm-healthCertificateNegative" name="healthCertificateNegative">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.healthCertificateNegative" ></j-image-upload>
									</a-form-item>
								</a-col>
							</a-row>

						</a-tab-pane>
						<a-tab-pane key="4" tab="银行卡">
							<a-row>
								<a-col :span="12">
									<a-form-item label="银行卡正面" v-bind="validateInfos.bankPositive" id="BizEmployeesInfoForm-bankPositive" name="bankPositive">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.bankPositive" ></j-image-upload>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item label="银行卡反面" v-bind="validateInfos.bankNegative" id="BizEmployeesInfoForm-bankNegative" name="bankNegative">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.bankNegative" ></j-image-upload>
									</a-form-item>
								</a-col>
							</a-row>
						</a-tab-pane>
						<a-tab-pane key="5" tab="资质证件">
							<a-row>
								<a-col :span="24">
									<a-form-item label="资质证" v-bind="validateInfos.qualification" id="BizEmployeesInfoForm-qualification" name="qualification">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.qualification" ></j-image-upload>
									</a-form-item>
								</a-col>
							</a-row>

						</a-tab-pane>
						<a-tab-pane key="6" tab="无犯罪证明">
							<a-row>
								<a-col :span="24">
									<a-form-item label="无犯罪证明" v-bind="validateInfos.noCrimeCertificate" id="BizEmployeesInfoForm-noCrimeCertificate" name="noCrimeCertificate">
										<j-image-upload :fileMax="0" :bizPath="`employeesZzxx`" v-model:value="formData.noCrimeCertificate" ></j-image-upload>
									</a-form-item>
								</a-col>
							</a-row>
						</a-tab-pane>
					</a-tabs>
				</a-card>
        </a-form>
      </template>
    </JFormContainer>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
  import { getValueType } from '/@/utils';
  import { saveOrUpdate } from '../BizEmployeesInfo.api';
  import { Form } from 'ant-design-vue';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: () => ({})},
    formBpm: { type: Boolean, default: true }
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    name: '',   
    sex: '',   
    national: '',   
    idCard: '',   
	headPath: '',
    tel: '',   
    entryTime: '',   
    postLevel: '',   
    dateOfBirth: '',   
    marriedOrNot: '',   
    wages: '',   
    height: undefined,
    weight: undefined,
    address: '',   
    isSmoking: '',   
    healthStatus: '',   
    houseAddress: '',   
    politicalAppearance: '',   
    emergencyContact: '',   
    emergencyTel: '',   
    emergencyRelationship: '',   
    hukouNature: '',   
    content: '',   
    idCardPositive: '',   
    idCardNegative: '',   
    contractPositive: '',   
    contractNegative: '',   
    healthCertificatePositive: '',   
    healthCertificateNegative: '',   
    bankPositive: '',   
    bankNegative: '',   
    qualification: '',   
    noCrimeCertificate: '',   
    regional: '',   
    serviceTag: '',   
  });
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = reactive({
    name: [{ required: true, message: '请输入姓名!' }],
    idCard: [{ required: false }, { pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$', message: '身份证号错误!' }],
  });
  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

  // 表单禁用
  const disabled = computed(()=>{
    if(props.formBpm === true){
      if(props.formData.disabled === false){
        return false;
      }else{
        return true;
      }
    }
    return props.formDisabled;
  });

  
  /**
   * 新增
   */
  function add() {
    edit({});
  }

  /**
   * 编辑
   */
  function edit(record) {
    nextTick(() => {
      resetFields();
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if(record.hasOwnProperty(key)){
          tmpData[key] = record[key]
        }
      })
      //赋值
      Object.assign(formData, tmpData);
    });
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    try {
      // 触发表单验证
      await validate();
    } catch ({ errorFields }) {
      if (errorFields) {
        const firstField = errorFields[0];
        if (firstField) {
          formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
        }
      }
      return Promise.reject(errorFields);
    }
    confirmLoading.value = true;
    const isUpdate = ref<boolean>(false);
    //时间格式化
    let model = formData;
    if (model.id) {
      isUpdate.value = true;
    }
    //循环数据
    for (let data in model) {
      //如果该数据是数组并且是字符串类型
      if (model[data] instanceof Array) {
        let valueType = getValueType(formRef.value.getProps, data);
        //如果是字符串类型的需要变成以逗号分割的字符串
        if (valueType === 'string') {
          model[data] = model[data].join(',');
        }
      }
    }
    await saveOrUpdate(model, isUpdate.value)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }


  defineExpose({
    add,
    edit,
    submitForm,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
  }
</style>
