<script setup lang="ts">
import { ref } from 'vue';

import SvgIcon from '@/components/SvgIcon.vue';
import { t } from '@/i18n';

import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type { AccountForm, CharacterPageItem } from '@/types';

interface Props {
  index: number;
  form: AccountForm;
  characterList: CharacterPageItem[];
}

const formRef = ref<FormInstance>();
const emit = defineEmits(['deleteClick']);
const props = defineProps<Props>();
const rules: Record<string, Rule[]> = {
  userName: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  mobile: [
    {
      validator: (_rule: unknown, value: string) => {
        if (!isValidPhone(value)) {
          return Promise.reject(t('userManage.mobileNumberFormatError'));
        }
        return Promise.resolve();
      },
    },
  ],
  password: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  enabled: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  roleId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  accountTerm: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};
// 手机号校验函数
const isValidPhone = (phone: string): boolean => {
  return /^1[3-9]\d{9}$/.test(phone);
};
const formResetFields = () => {
  formRef.value?.resetFields();
};
const formRefSubmit = () => {
  return formRef.value?.validate() || Promise.resolve();
};
const deleteAccount = () => {
  emit('deleteClick', props.index);
};

defineExpose({
  formRefSubmit,
  formResetFields,
});
</script>

<template>
  <div>
    <AForm ref="formRef" :colon="false" label-align="left" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <ABadge>
        <template #count>
          <SvgIcon @click="deleteAccount" class="icon-delete" name="close-circle" />
        </template>
        <AFlex class="account-bgc" :vertical="true">
          <AFormItem :label="t('userManage.fullName')" name="userName">
            <AInput class="input-width" v-model:value="form.userName" :placeholder="t('common.pleaseEnter')" />
          </AFormItem>
          <AFormItem :label="t('userManage.mobilePhoneNumber')" name="mobile">
            <AInput class="input-width" v-model:value="form.mobile" :placeholder="t('common.pleaseEnter')" />
          </AFormItem>
          <AFormItem :label="t('userManage.role')" name="roleId">
            <ASelect
              v-model:value="form.roleId"
              class="input-width"
              :options="characterList"
              :field-names="{ label: 'roleName', value: 'id' }"
              :placeholder="$t('common.plzSelect')"
            />
          </AFormItem>
          <AFormItem :label="t('userManage.expiryDate')" name="accountTerm">
            <ARangePicker
              v-model:value="form.accountTerm"
              class="input-width"
              :allow-clear="false"
              :separator="$t('common.to')"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.enable')" name="enabled">
            <ASwitch v-model:checked="form.enabled" />
          </AFormItem>
        </AFlex>
      </ABadge>
    </AForm>
  </div>
</template>

<style lang="scss" scoped>
.icon-delete {
  top: 16px;
  right: 16px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}

.account-bgc {
  width: 400px;
  height: 296px;
  padding: 24px 18px;
  background: #f5f7fa;
  border-radius: 4px;
}

.icon-color {
  color: #f56f6f;
}

.delete-div {
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.input-width {
  width: 256px;
}
</style>
