<template>
  <BasicModal
    v-bind="$attrs"
    @cancel="resetFields"
    @register="register"
    title="新 增"
    @ok="handleOk"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="model" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { roleLIstApi, checkUserApi, saveApi, updateApi } from '/@/api/staff/list';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { t } = useI18n();
  const schemas: FormSchema[] = [
    {
      field: 'phone',
      component: 'Input',
      label: '手机号',
      colProps: {
        span: 18,
      },
      helpMessage: '手机号需在指房宝APP注册后才可新增',
      required: false,
      rules: [
        {
          required: true,
          // @ts-ignore
          validator: async (rule, value) => {
            var reg_tel =
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // var reg = /\S+@\S+\.\S+/;
            if (!value) {
              return Promise.reject(t('common.phone'));
            }
            if (!reg_tel.test(value)) {
              /* eslint-disable-next-line */
              return Promise.reject(t('common.phoneError'));
            }
            try {
              let res = await checkUserApi({ phone: value });
              console.log('res', res);
              if (res == true) {
                return Promise.resolve();
              } else {
                return Promise.reject('手机号未在指房宝APP中进行注册');
              }
            } catch (err) {
              return Promise.reject(err);
            }
          },
          trigger: 'change',
        },
      ],
    },
    {
      field: 'nickName',
      component: 'Input',
      label: '员工名称',
      required: true,
      colProps: {
        span: 22,
      },
      componentProps: {
        maxLength: 25,
      },
    },
    {
      field: 'roleId',
      component: 'ApiRadioGroup',
      label: '角色',
      required: true,
      itemProps: {
        validateTrigger: 'blur',
      },
      componentProps: {
        api: roleLIstApi,
        labelField: 'roleName',
        valueField: 'roleId',
      },
    },
    {
      field: 'status',
      label: '状态',
      component: 'RadioButtonGroup',
      required: true,
      defaultValue: 1,
      itemProps: {
        validateTrigger: 'blur',
      },
      componentProps: {
        options: [
          { label: '是', value: 1 },
          { label: '否', value: 0 },
        ],
      },
    },
    {
      field: 'id',
      component: 'Input',
      label: 'id',
      show: false,
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    setup(_, context) {
      const modelRef = ref({});
      const userStore = useUserStore();
      const userinfo = computed(() => userStore.getUserInfo);
      const { createMessage } = useMessage();
      const [registerForm, { setFieldsValue, validate, resetFields }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      function onDataReceive(data) {
        // 方式1;
        setFieldsValue({
          ...data,
        });
      }

      async function handleOk() {
        let data = await validate();
        const { companyId } = userinfo.value;
        const requestApi = data.id ? updateApi : saveApi;
        let res = await requestApi({
          userName: data.phone,
          phone: data.phone,
          nickName: data.nickName,
          roleId: data.roleId,
          companyId,
        });
        console.log('res', res);
        context && context.emit('ok', res);
        createMessage.success(t('common.optSuccess'));
        closeModal();
        resetFields();
      }

      return { register, schemas, registerForm, model: modelRef, handleOk, resetFields };
    },
  });
</script>
