<template>
  <view class="form">
    <nut-form ref="formRef" :model-value="formData" :rules="rules">
      <nut-form-item label="姓名" prop="name">
        <nut-input v-model="formData.name" placeholder="请输入姓名" type="text"/>
      </nut-form-item>
      <nut-form-item label="性别" prop="sex">
        <nut-radio-group v-model="formData.sex" direction="horizontal">
          <nut-radio v-for="item in SEX" :key="item.value" :label="item.value"
          >{{ item.label }}
          </nut-radio>
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item label="身份证" prop="idCard">
        <nut-input v-model="formData.idCard" placeholder="请填写身份证" type="text" @blur="idCardBlur"/>
      </nut-form-item>
      <nut-form-item label="出生日期" prop="dateOfBirth">
        <view @click="showPicker = true">
          {{
            formData.dateOfBirth ? dayjs(formData.dateOfBirth).format('YYYY-MM-DD') : '请选择出生年月'
          }}
        </view>
      </nut-form-item>
      <nut-form-item label="工作岗位" prop="workPost">
        <nut-input v-model="formData.workPost" placeholder="请输入工作岗位" type="text"/>
      </nut-form-item>

      <nut-form-item label="手机号" prop="telephone">
        <nut-input v-model="formData.telephone" placeholder="请输入手机号" type="text"/>
      </nut-form-item>
      <nut-form-item label="籍贯" prop="nativePlace">
        <nut-input v-model="formData.nativePlace" placeholder="请输入籍贯" type="text"/>
      </nut-form-item>
      <nut-form-item label="地址" prop="homeAddress">
        <nut-input v-model="formData.homeAddress" placeholder="请输入地址" type="text"/>
      </nut-form-item>
      <nut-form-item label="保安证号" prop="securityNumber">
        <nut-input v-model="formData.securityNumber" placeholder="请输入保安证号" type="text"/>
      </nut-form-item>
      <nut-form-item label="备注" prop="remark">
        <nut-input v-model="formData.remark" placeholder="请填写备注" type="text"/>
      </nut-form-item>
    </nut-form>
    <view class="formButton">
      <nut-button style="width: 45%" type="success" size="small" @click="submit">提交</nut-button>
      <nut-button style="width: 45%" size="small" @click="formRef?.reset()">重置表单</nut-button>
    </view>
    <nut-popup v-model:visible="showPicker" position="bottom">
      <nut-date-picker
        v-model="formData.dateOfBirth"
        :three-dimensional="false"
        :min-date="new Date(1900,1,1)"
        :max-date="new Date(2100,1,1)"
        @confirm="showPicker = false"
        @cancel="showPicker = false"
      ></nut-date-picker>
    </nut-popup>
  </view>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {enumSelectNodes} from "@/enums";
import {FormRules} from "@nutui/nutui-taro/dist/types/__VUE/form/types";
import api from "@/request";
import './securityUserForm.scss'
import Taro, {useLoad} from "@tarojs/taro";
import dayjs from "dayjs";
import {SecurityUserFormParams} from "@/types/subPages/projectManager/securityUserForm";
import {FormInstance} from "@nutui/nutui-taro";

const SEX = enumSelectNodes('Sex')

const showPicker = ref(false)

const type = ref<'formInput' | 'QcCodeInput'>(null!);

const formData = ref<SecurityUserFormParams>({} as any)
const formRef = ref<FormInstance>(null!)

const rules: FormRules = {
  name: [
    {required: true, message: "请输入姓名"},
  ],
  sex: [{required: true, message: "请选择性别"}],
  idCard: [
    {required: true, message: "请输入身份证号"},
    {
      regex: /^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))((0[1-9])|([12][0-9])|(30|31))\d{3}(\d|X)$)/,
      message: "身份证格式错误",
    },
  ],
  telephone: [
    {required: true, message: "请输入手机号"},
  ]
};

useLoad((options) => {
  type.value = options.type;
  if (type.value === 'QcCodeInput') {
    formData.value = {
      serviceProjectId: options.pid,
      securityUnitId: options.uid,
      sex: 0,
      idCard: '',
      dateOfBirth: null
    }
  } else {
    formData.value = JSON.parse(options.securityUser)
  }
})

const idCardBlur = (e: any) => {
  const value = e.detail.value
  if (!value?.length || value.length < 18) {
    formData.value.dateOfBirth = null;
    return
  }
  const birthDate = value.substring(6, 14);
  const year = birthDate.substring(0, 4);
  const month = birthDate.substring(4, 6);
  const day = birthDate.substring(6, 8);
  formData.value.dateOfBirth = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
}

const submit = () => {
  formRef.value?.validate().then(async ({valid}) => {
    if (valid) {
      let url: string;
      if (type.value === 'formInput') {
        url = '/projectManageIndex/saveOrUpdateSecurityUser'
      } else {
        url = '/miniProgramUser/qrCodeFormInputSecurityUser'
      }
      const resp = await api.post(url, formData.value)
      Taro.showToast({
        title: resp.message,
        icon: 'success',
        duration: 2000,
        mask: true,
      }).then()
      formData.value = {
        snowFlakeId: undefined,
        serviceProjectId: formData.value.serviceProjectId,
        securityUnitId: formData.value.securityUnitId,
        name: '',
        workPost: '',
        telephone: '',
        sex: 0,
        nativePlace: '',
        idCard: '',
        dateOfBirth: null,
        securityNumber: '',
        remark: '',
        homeAddress: ''
      }
    }
  })
}
</script>
