<template>
  <a-modal
    v-model:visible="visible"
    :width="500"
    title-align="start"
    top="10vh"
    :align-center="false"
    :mask-closable="false"
    :esc-to-close="false"
    @close="emit('close')"
  >
    <template #title> {{ `${curRow ? '编辑' : '新增'}账号` }} </template>
    <a-form ref="formRef" :model="formData" :rules="rules" auto-label-width>
      <a-form-item field="loginName" label="账号">
        <a-input
          v-model="formData.loginName"
          :disabled="!!curRow?.id"
          maxlength="50"
        />
      </a-form-item>
      <a-form-item field="name" label="用户名">
        <a-input v-model="formData.name" maxlength="50" />
      </a-form-item>
      <a-form-item field="roleCode" label="角色">
        <SelectRole
          v-model="formData.roleCode"
          placeholder="请选择"
          allow-clear
        />
      </a-form-item>
      <a-form-item
        v-if="formData.roleCode !== 'ADMIN'"
        field="categoryId"
        label="教学点"
      >
        <SelectTeaching
          v-model="formData.categoryId"
          placeholder="请选择"
          allow-clear
          flag
        />
      </a-form-item>
      <a-form-item field="mobile" label="联系方式">
        <a-input v-model="formData.mobile" maxlength="20" />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="emit('close')">取消</a-button>
      <a-button type="primary" :disabled="loading" @click="confirm"
        >确认</a-button
      >
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { nextTick, reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import type { FormInstance } from '@arco-design/web-vue/es/form';
  import { addUser } from '@/api/order';
  import useLoading from '@/hooks/loading';

  defineOptions({
    name: 'AddUserDialog',
  });
  const props = defineProps<{ curRow: any }>();
  const emit = defineEmits(['close', 'success']);
  const visible = ref(true);
  const formRef = ref<FormInstance>();
  const formData = reactive<any>({
    loginName: '',
    name: '',
    roleCode: '',
    categoryId: '',
    mobile: '',
  });
  if (props.curRow) {
    for (const key in formData) {
      formData[key] = props.curRow?.[key] || '';
    }
  }
  const rules = {
    loginName: [
      {
        required: true,
        message: '请输入账号',
      },
    ],
    name: [
      {
        required: true,
        message: '请输入用户名',
      },
    ],
    roleCode: [
      {
        required: true,
        message: '请选择角色',
      },
    ],
    categoryId: [
      {
        required: true,
        message: '请选择教学点',
      },
    ],
  };

  /* confirm */
  const { loading, setLoading } = useLoading();
  async function confirm() {
    const err = await formRef.value?.validate();
    if (err) return;

    setLoading(true);
    const params: any = { ...formData };
    if (props.curRow) {
      params.id = props.curRow.id;
    }
    if (params.roleCode === 'ADMIN') {
      delete params.categoryId;
    }
    addUser(params)
      .then(() => {
        Message.success('操作成功！');
        emit('success');
      })
      .finally(() => {
        setLoading(false);
      });
    // const res = await downloadByApi(() => orderRecordPrint(datas)).catch(
    //   (e) => {
    //     Message.error(e || '下载失败，请重新尝试！');
    //   }
    // );
    // setLoading(false);
    // if (!res) return;
  }
</script>
