<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="tenantAdminFormDrawer"
    showFooter
    :title="getTitle"
    width="60%"
    @ok="handleSubmit"
  >
    <BasicForm @register="tenantAdminForm" />
  </BasicDrawer>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { saveTenantAdmin } from '/@/api/tenant/tenantApi';
  import { UserDTO } from '/@/api/tenant/tenantInfo';
  import { ChineseRegexp, EmailRegexp, emailRule, phoneRule } from '/@/utils/rules';
  import { useI18n } from '/@/hooks/web/useI18n';

  export default defineComponent({
    name: 'TenantAdminFormDrawer',
    components: {
      BasicDrawer,
      BasicForm,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const { t } = useI18n();
      const isUpdate = ref(true);
      const tenantId = ref('');
      const isJudgeUserNameExist: any = ref([]);
      const formSchema: FormSchema[] = [
        {
          field: 'id',
          label: 'id:',
          show: false,
          component: 'Input',
          componentProps: {
            maxLength: 36,
          },
        },
        {
          field: 'username',
          label: t('tenant.list.admin.userName'),
          component: 'Input',
          componentProps: {
            maxLength: 64,
          },
          dynamicRules: ({ values }) => {
            try {
              const findUserName = isJudgeUserNameExist.value.find((f) => {
                if (f) {
                  return f.username == values.username;
                }
              });
              return [
                {
                  required: true,
                  validator(_, value) {
                    return new Promise((resolve, reject) => {
                      if (value == '' || value === undefined) {
                        reject(t('tenant.list.admin.nameRule1'));
                      } else if (ChineseRegexp.test(value)) {
                        reject(t('tenant.list.admin.nameRule2'));
                      } else if (EmailRegexp.test(value)) {
                        reject(t('tenant.list.admin.nameRule3'));
                      } else if (findUserName && value == findUserName?.username) {
                        reject(t('tenant.list.admin.nameRule4'));
                        return;
                      } else {
                        resolve();
                      }
                    });
                  },
                },
              ];
            } catch {}
          },
        },
        {
          field: 'realName',
          label: t('tenant.list.admin.realName'),
          required: true,
          component: 'Input',
          componentProps: {
            maxLength: 64,
            placeholder: t('common.placeInputRealName'),
          },
        },
        {
          field: 'phoneNumber',
          label: t('tenant.list.admin.phoneNumber'),
          required: true,
          component: 'Input',
          componentProps: {
            maxLength: 11,
          },
          rules: phoneRule,
        },
        {
          field: 'email',
          label: t('tenant.list.admin.email'),
          component: 'Input',
          componentProps: {
            maxLength: 64,
          },
          rules: emailRule,
        },
        {
          field: 'enabled',
          label: t('tenant.list.state'),
          required: true,
          component: 'RadioButtonGroup',
          defaultValue: true,
          componentProps: {
            options: [
              { label: t('common.enableText'), value: true },
              { label: t('common.deactivateText'), value: false },
            ],
          },
        },
      ];
      const [tenantAdminForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
        labelWidth: 130,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { lg: 24, md: 24 },
      });
      const [tenantAdminFormDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
        async (data) => {
          await resetFields();
          isUpdate.value = !!data?.isUpdate;
          tenantId.value = data?.tenantId;
          isJudgeUserNameExist.value = data.judgeExistUserName;
          if (unref(isUpdate)) {
            await updateSchema({ field: 'username', componentProps: { disabled: true } });
            await setFieldsValue({
              ...data.record,
            });
          } else {
            await updateSchema({ field: 'username', componentProps: { disabled: false } });
          }
        }
      );
      const getTitle = computed(
        () =>
          (!unref(isUpdate) ? t('common.createText') : t('common.editText')) +
          t('tenant.list.tenantAdmin')
      );

      async function handleSubmit() {
        try {
          setDrawerProps({ confirmLoading: true });
          const values = await validate();
          const requestParams = {
            id: values.id,
            username: values.username,
            realName: values.realName,
            phoneNumber: values.phoneNumber,
            email: values.email,
            enabled: values.enabled,
            tenantExpireTime:
              typeof values.tenantExpireTime != 'undefined' && values.tenantExpireTime != null
                ? values.tenantExpireTime.format('YYYY-MM-DD HH:mm:ss')
                : null,
            tenantId: tenantId.value,
          };
          await saveTenantAdmin(requestParams as any as UserDTO);
          closeDrawer(); //关闭侧框
          emit('success');
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      return {
        tenantAdminFormDrawer,
        handleSubmit,
        tenantAdminForm,
        getTitle,
      };
    },
  });
</script>