<!-- @format -->

<template>
  <ns-view-add-form
    :schemas="formSchema"
    title="新增员工"
    :model="data"
    api="/api/parking_merchant/objs/person/add" />
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { dateUtil } from '/nerv-lib/util/date-util';

  export default defineComponent({
    name: 'NsViewUserAdd',

    setup() {
      const data = reactive({});

      let formSchema = reactive([
        {
          field: 'information',
          label: '基本信息',
          displayFormItem: false,
          class: 'ns-form-item-full',
          component: 'NsChildForm',
          componentProps: {
            title: '基本信息',
            schemas: [
              {
                field: 'personName',
                label: '姓名',
                component: 'NsInput',
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                  },
                  {
                    pattern: /^[\u4E00-\u9FA5]{1,18}$/,
                    message: '只支持中文，长度不得超过36个字符',
                    trigger: 'change',
                  },
                ],
              },
              {
                field: 'sex',
                component: 'NsRadioGroup',
                label: '性别',
                defaultValue: 1,
                componentProps: {
                  styleType: { flex: true },
                  options: [
                    {
                      label: '男',
                      value: 1,
                    },
                    {
                      label: '女',
                      value: 0,
                    },
                  ],
                },
                rules: [
                  {
                    required: true,
                    message: '不能为空',
                  },
                ],
              },
              {
                field: 'personNum',
                label: '员工编号',
                component: 'NsInput',
                rules: [
                  {
                    required: true,
                    message: '员工编号不能为空',
                    trigger: 'blur',
                  },
                  {
                    pattern: /^[a-zA-Z\d]{0,16}$/,
                    message: '不支持特殊字符、中文、空格，长度不得超过16个字符',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'idCard',
                label: '身份证号',
                component: 'NsInput',
                rules: [
                  // {
                  //   required: true,
                  //   trigger: 'blur',
                  // },
                  {
                    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: 'roleUuid',
              //   component: 'nsSelectApi',
              //   label: '员工角色',
              //   componentProps: {
              //     api: '/api/community/objs/Role',
              //     params: {
              //       pageSize: 100,
              //     },
              //     resultField: 'data.data',
              //     labelField: 'roleName',
              //     valueField: 'roleUuid',
              //     immediate: true,
              //     autoSelectFirst: false,
              //   },
              //   rules: [
              //     {
              //       required: false,
              //       message: '请选择角色',
              //     },
              //   ],
              // },
              {
                field: 'homeAddress',
                label: '居住地址',
                component: 'NsInputCity',
                componentProps: {
                  api: '/api/parking_merchant/objs/BaseArea',
                },
                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',

                  // imgUrl: '/api/community/objs/FacePic/',
                  // imgModuleUrl:
                  //   '/api/community/objs/FacePic/8f50a2f2dee948c4bfab58928d182897',
                },
              },
              {
                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,
                  // imgUrl: '/api/community/objs/FacePic/',
                  // imgModuleUrl:
                  //   '/api/community/objs/FacePic/8f50a2f2dee948c4bfab58928d182897',
                },
                // 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',
                label: '文化程度',
                componentProps: {
                  api: '/api/community/objs/DictItem',
                  params: {
                    code: 'WHCD',
                  },
                  resultField: 'data',
                  labelField: 'dictName',
                  valueField: 'dictValue',
                  immediate: true,
                  autoSelectFirst: false,
                },
                // rules: [
                //   {
                //     required: true,
                //     message: '不能为空',
                //   },
                // ],
              },
              {
                field: 'entryTime',
                component: 'NsDatePicker',
                defaultValue: dateUtil(new Date()),
                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: [
                  {
                    required: false,
                    trigger: 'blur',
                  },
                  {
                    pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
                    message: '邮箱格式不正确',
                    trigger: 'blur',
                  },
                ],
              },
              {
                field: 'residenceAddress',
                label: '户籍地址',
                component: 'NsInput',
                rules: [
                  // {
                  //   required: true,
                  //   message: '户籍地址不能为空',
                  //   trigger: 'blur',
                  // },
                  {
                    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: [
                  {
                    required: false,
                    trigger: 'blur',
                  },
                  {
                    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>
