<!-- @format -->

<template>
  <ns-view-add-form
    :schemas="formSchema"
    title="编辑员工"
    :model="data"
    api="/api/parking_merchant/objs/person/update" />
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';
  import moment from 'moment';
  import { http } from '/nerv-lib/util/http';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'NsViewUserEdit',
    setup() {
      const data = reactive({});
      const router = useRouter();

      const params = router.currentRoute.value.query;
      const homeAddress = ref('');
      const provinceCode = ref('');
      const areaCode = ref('');
      const cityCode = ref('');
      const personPicImageUrl = ref('');
      const idCardImageUrl = ref('');
      if (params.personUuid !== undefined) {
        http
          .get(`/api/parking_merchant/objs/person/detail`, { personUuid: params.personUuid })
          .then((res) => {
            data.personName = res.data.personName;
            data.sex = res.data.sex;
            data.sexName = res.data.sex ? '男' : '女';
            data.personNum = res.data.personNum;
            data.idCard = res.data.idCard;
            data.major = res.data.major;
            data.address = res.data.address;
            data.graduatedSchool = res.data.graduatedSchool;
            data.residenceAddress = res.data.residenceAddress;
            data.telNum = res.data.telNum;
            data.remarks = res.data.remarks;
            data.education = res.data.education;
            data.maritalStatus = res.data.maritalStatus;
            data.personStatus = res.data.personStatus;
            data.nation = res.data.nation;
            data.homeAddress = res.data.homeAddress;
            data.areaCode = res.data.areaCode;
            data.cityCode = res.data.cityCode; //moment(new Date()).format('YYYY-MM-DD 23:59:59')
            data.entryTime = moment(new Date(res.data.entryTime)).format('x');

            data.provinceCode = res.data.provinceCode;
            homeAddress.value = res.data.homeAddress;
            areaCode.value = res.data.areaCode;
            cityCode.value = res.data.cityCode;
            provinceCode.value = res.data.provinceCode;
            personPicImageUrl.value = `/api/parking_merchant/objs/sys/ParkPic/${res.data.personPicUuid}`;
            idCardImageUrl.value = `/api/parking_merchant/objs/sys/IdCardPic/${res.data.idCardPicUuid}`;
            // formSchema.value.filter(
            //   (item) => item.field === 'avatar'
            // )[0].componentProps.baseImageUrl = `/api/community/objs/ParkPic/${data.avatar}`;
          })
          .catch((err) => {
            console.log(err);
          });
      }

      let formSchema = reactive([
        {
          label: '用户uuid',
          field: 'personUuid',
          component: 'NsInputText',
          show: false,
          defaultValue: params.personUuid,
        },
        {
          field: 'information',
          label: '基本信息',
          displayFormItem: false,
          class: 'ns-form-item-full',
          component: 'NsChildForm',
          componentProps: {
            title: '基本信息',
            schemas: [
              {
                field: 'personName',
                label: '姓名',
                component: 'NsInputText',
              },
              {
                field: 'sexName',
                component: 'NsInputText',
                label: '性别',
                viewOnly: true,
              },
              {
                field: 'sex',
                component: 'NsInputText',
                show: false,
                label: '性别',
              },
              {
                field: 'personNum',
                label: '员工编号',
                component: 'NsInputText',
              },
              {
                field: 'idCard',
                label: '身份证号',
                component: 'NsInputText',
                // rules: [
                //   {
                //     pattern:
                //       '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
                //     message: '请输入正确的身份证号',
                //     trigger: 'blur',
                //   },
                // ],
              },
              {
                field: 'telNum',
                label: '手机号码',
                component: 'NsInput',
                rules: [
                  {
                    required: true,
                    message: '手机号码不能为空',
                    trigger: 'change',
                  },
                  {
                    pattern: '^[1][3456789][\\d]{9}$',
                    message: '请输入正确的中国大陆手机号',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'nation',
                component: 'nsSelectApi',
                label: '民族',
                componentProps: {
                  api: '/api/community/objs/DictItem',
                  params: {
                    pageSize: 100,
                    code: 'MZ',
                  },
                  placeholder: '请选择用户民族',
                  resultField: 'data',
                  labelField: 'dictName',
                  valueField: 'dictValue',
                  immediate: true,
                  autoSelectFirst: false,
                },

                rules: [
                  // {
                  //   required: true,
                  //   message: '请选择民族',
                  // },
                ],
              },
              {
                field: 'departmentUuidList',
                component: 'nsSelectApi',
                label: '所属部门',
                componentProps: {
                  api: '/api/community/objs/Department',
                  params: {
                    pageSize: 100,
                  },
                  mode: 'multiple',
                  resultField: 'data.data',
                  labelField: 'departmentName',
                  valueField: 'departmentUuid',
                  autoSelectFirst: false,
                },
              },
              {
                field: 'departmentMainUuid',
                component: 'nsSelectApi',
                label: '主部门',

                params: {
                  departmentUuidList: 'fieldLink.departmentUuidList',
                },
                componentProps: {
                  api: '/api/community/objs/Department',
                  resultField: 'data.data',
                  labelField: 'departmentName',
                  valueField: 'departmentUuid',
                  autoSelectFirst: false,
                  dependency: 'departmentUuidList',
                },
              },
              {
                field: 'homeAddress',
                label: '居住地址',
                component: 'NsInputCity',
                componentProps: {
                  api: '/api/parking_merchant/objs/BaseArea',
                  defaultHomeAddress: homeAddress,
                  defaultProvinceCode: provinceCode,
                  defaultCityCode: cityCode,
                  defaultAreaCode: areaCode,
                },
                fieldMap: ['homeAddress', 'provinceCode', 'cityCode', 'areaCode'],
                rules: [
                  // {
                  //   required: true,
                  //   message: '不能为空',
                  // },
                ],
              },
              {
                field: 'address',
                label: '详细地址',
                component: 'NsInput',
                rules: [
                  // {
                  //   required: true,
                  //   trigger: 'blur',
                  // },
                  {
                    pattern:
                      '^[a-zA-Z\\d\u4e00-\u9fa5]{0,36}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,36}[\u4e00-\u9fa5]$',
                    message: '不支持特殊字符、空格，长度不得超过36个字符，中文占2位',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'personStatus',
                component: 'NsSelect',
                label: '状态',
                componentProps: {
                  options: [
                    {
                      label: '在职',
                      value: 1,
                    },
                    {
                      label: '离职',
                      value: 2,
                    },
                  ],

                  labelField: 'label',
                  valueField: 'value',
                  immediate: false,
                  // defaultValue: 1,
                },
                rules: [
                  {
                    required: true,
                    message: '不能为空',
                  },
                ],
              },
              {
                field: 'personPicUuid',
                component: 'NsUpload',
                label: '员工图片',
                componentProps: {
                  // 上传的地址
                  url: '/api/parking_merchant/objs/sys/FileUpload',
                  // 上传的图片大小
                  maxSize: 5242880,
                  // 上传的图片类型
                  fileType: ['jpg', 'png', 'jpeg'],
                  // 展示图片数量
                  count: 1,
                  // 上传的文件类型，0-证书，1-图片，2-身份证件
                  uploadType: 1,
                  fieldName: 'certificateUuid',
                  baseImageUrl: personPicImageUrl,
                },
              },
              {
                field: 'idCardPicUuid',
                component: 'NsUpload',
                label: '身份证扫描件',
                componentProps: {
                  // 上传的地址
                  url: '/api/parking_merchant/objs/sys/FileUpload',
                  // 上传的图片大小
                  maxSize: 5242880,
                  // 上传的图片类型
                  fileType: ['jpg', 'png', 'jpeg'],
                  // 展示图片数量
                  count: 1,
                  // 上传的文件类型，0-证书，1-图片，2-身份证件
                  uploadType: 2,
                  baseImageUrl: idCardImageUrl,
                },
                // rules: [
                //   {
                //     required: true,
                //     message: '请上传图片',
                //   },
                // ],
              },
            ],
          },
        },
        {
          field: 'location',
          label: '其他信息',
          displayFormItem: false,
          class: 'ns-form-item-full',
          component: 'NsChildForm',
          componentProps: {
            title: '其他信息',
            schemas: [
              {
                field: 'maritalStatus',
                component: 'nsSelectApi',
                label: '婚姻状况',
                componentProps: {
                  api: '/api/community/objs/DictItem',
                  params: {
                    code: 'HYZK',
                  },
                  resultField: 'data',
                  labelField: 'dictName',
                  valueField: 'dictValue',
                  immediate: true,
                  autoSelectFirst: false,
                },
                // rules: [
                //   {
                //     required: true,
                //     message: '不能为空',
                //   },
                // ],
              },
              {
                field: 'education',
                component: 'nsSelectApi',
                // type: 'WHCD',
                label: '文化程度',
                componentProps: {
                  api: '/api/community/objs/DictItem',
                  params: {
                    code: 'WHCD',
                  },
                  resultField: 'data',
                  labelField: 'dictName',
                  valueField: 'dictValue',
                  immediate: true,
                  defaultValue: '4',
                  autoSelectFirst: false,
                },
                // rules: [
                //   {
                //     required: true,
                //     message: '不能为空',
                //   },
                // ],
              },
              {
                field: 'entryTime',
                component: 'NsDatePicker',
                label: '入职日期',
                componentProps: {
                  valueFormat: 'x',
                  format: 'YYYY-MM-DD',
                },
                // rules: [
                //   {
                //     required: true,
                //     message: '不能为空',
                //   },
                // ],
              },
              {
                field: 'graduatedSchool',
                label: '毕业院校',
                component: 'NsInput',
                rules: [
                  // {
                  //   required: true,
                  //   message: '毕业院校不能为空',
                  //   trigger: 'blur',
                  // },
                  {
                    pattern:
                      /^[a-zA-Z\\d\u4e00-\u9fa5]{0,24}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,24}[\u4e00-\u9fa5]$/,
                    message: '不支持特殊字符、空格，长度不得超过24个字符，中文占2位',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'major',
                label: '所属专业',
                component: 'NsInput',
                rules: [
                  {
                    pattern:
                      /^[a-zA-Z\\d\u4e00-\u9fa5]{0,24}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,24}[\u4e00-\u9fa5]$/,
                    message: '不支持特殊字符、空格，长度不得超过24个字符，中文占2位',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'email',
                label: '邮箱地址',
                component: 'NsInput',
                rules: [
                  {
                    pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
                    message: '邮箱格式不正确',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'residenceAddress',
                label: '户籍地址',
                component: 'NsInput',
                rules: [
                  {
                    pattern:
                      /^[a-zA-Z\\d\u4e00-\u9fa5]{0,64}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,64}[\u4e00-\u9fa5]$/,
                    message: '不支持特殊字符、空格，长度不得超过64个字符，中文占2位',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'remarks',
                label: '备注',
                component: 'NsTextarea',
                rules: [
                  {
                    pattern: /^[\u4e00-\u9fa5]{0,120}$|^.{0,255}$/,
                    message: '0-255个字符，中文占2位',
                    trigger: 'blur',
                  },
                ],
              },
            ],
          },
        },
      ]);

      return {
        formSchema,
        data,
      };
    },
  });
</script>
<style scoped lang="less">
  .top {
    border-bottom-color: #ecedef;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
</style>
