<template>
  <Modal :maskClosable="false" :keyboard="false" v-model:open="data.isShowModal" :footer="null" :title="$t('system.user.addTitle')" width="50%" @cancel="_close">
    <Form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }" labelAlign="left"
           :labelWrap="true">
      <Row :gutter="24">
        <Col :span="12">
          <FormItem :label="$t('system.user.nickname')" name="nickname">
            <Input v-model:value="form.nickname" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('system.user.username')" name="username">
            <Input v-model:value="form.username" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('system.user.password')" name="password">
            <Input v-model:value="form.password" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('system.user.phone')" name="phone">
            <Input v-model:value="form.phone" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('system.user.mail')" name="mail">
            <Input v-model:value="form.mail" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('system.user.type')" name="type">
            <Input v-model:value="form.type" allowClear :placeholder="$t('common.placeholderIn')"/>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem :label="$t('system.user.status')" name="status">
            <Select allow-clear showSearch :filterOption="selectFilterOption" v-model:value="form.status" allowClear :placeholder="$t('common.placeholderIn')">
              <SelectOption v-for="(item ,index) in data.statusOptions" :key="index" :value="item.value" :label="item.label" :text="item.label">{{ item.label }}</SelectOption>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <FormItem style="text-align: right">
        <Button @click="_close" :disabled="data.loading">{{ $t('common.cancel') }}</Button>
        <Button danger style="margin-left: 10px" @click="handleResetForm" :disabled="data.loading">{{ $t('common.reset') }}</Button>
        <Button type="primary" style="margin-left: 10px" @click="handleSubmit" :loading="data.loading"
                 :disabled="data.loading">{{ $t('common.confirm') }}
        </Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import { $t } from '@vben/locales';
import {Modal, Form, Input, Select, Row, Col, Button,message} from 'ant-design-vue';
import {user} from '#/api';

const FormItem = Form.Item;
const SelectOption = Select.Option;

interface Emits {
  (e: 'close', submit: Boolean): void
}
const emits = defineEmits<Emits>()

const data = reactive({
  isShowModal: false,
  loading: false,
  //1 正常；2 冻结；3 已锁定；4 已注销；5 待审核；6 异常；
  statusOptions: [
    {label: $t('system.user.statusOptions.v1'), value: 1},
    {label: $t('system.user.statusOptions.v2'), value: 2},
    {label: $t('system.user.statusOptions.v3'), value: 3},
    {label: $t('system.user.statusOptions.v4'), value: 4},
    {label: $t('system.user.statusOptions.v5'), value: 5},
    {label: $t('system.user.statusOptions.v6'), value: 6},
  ]
})

const form = reactive({
  username: '',
  nickname: '',
  phone: null,
  mail: null,
  type: null,
  password: null,
  status: 1,
})

// 选择框过滤方法
const selectFilterOption = (input: string, option: any) => {
  return option.text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}

// 表单规则
const rules = reactive({
  username: [{required: true, message: $t('form.required')}],
  phone: [{pattern: /^1[3-9]\d{9}$/, message: $t('form.phone.invalid')}],
  mail: [{pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: $t('form.mail.invalid')}],
  password: [{required: true, message: $t('form.required')}],
  nickname: [
    {required: true, message: $t('form.required')}
  ],
})

const formRef = ref();

/**
 * 参数处理
 * @param data
 */
function wrapQueryParam(data:Object = {}) {
  !data.phone || data.phone.length == 0 ? data.phone = null : null;
  !data.mail || data.mail.length == 0 ? data.mail = null : null;
  return data;
}

function handleSubmit() {
  data.loading = true;
  formRef.value.validate().then(() => {
    user.create(wrapQueryParam(form)).then((res)=>{
      if(res.error){
        return;
      }
      message?.success($t('common.addSuccess'));
      _close(true);
    })
  }).finally(() => {
    data.loading = false;
  })
}

function handleResetForm() {
  formRef.value.resetFields();
}

function _open() {
  data.isShowModal = true;
}

function _close(submit: Boolean = false) {
  handleResetForm();
  data.isShowModal = false;
  submit && typeof submit == 'boolean' && emits('close', submit);
}

//开放方法
defineExpose({_open, _close})
</script>

<style scoped>

</style>