<template>
  <BasicModal
    width="650px"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm">
      <template #organizationId="{ model, field }">
        <BasicTree
          v-model:value="model[field]"
          :treeData="organizationTreeData"
          :replaceFields="{ title: 'name' }"
          :checked-keys="checkGroup"
          checkable
          toolbar
          title="所属组织"
        />
      </template>
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { accountFormSchema } from './account.data';
  import {
    findCurrentUserRelation,
    getOrganizationList,
    SaveOrUpdateUserInfo,
  } from '/@/api/system/system';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { findCurrentUserGroups } from '/@/api/system/group';
  import { RoleOrOrganizationParam } from '/@/api/system/model/systemModel';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    name: 'AccountModal',
    components: { BasicModal, BasicForm, BasicTree },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);
      const rowId = ref('');
      const organizationTreeData = ref<TreeItem[]>([]);
      const checkGroup = ref<string[]>([]);
      const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        await resetFields();
        setModalProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        const groupListModel = await findCurrentUserGroups();

        if (unref(organizationTreeData).length === 0) {
          let treeValues = new Array<TreeItem>();
          groupListModel.map((item) => {
            const groupData = {
              name: item.name,
              key: item.id,
              id: item.id,
              children: item.children as any as TreeItem[],
            };
            treeValues.push(groupData);
          });
          organizationTreeData.value = treeValues;
        }

        if (unref(isUpdate)) {
          rowId.value = data.record.id;

          const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
          findCurrentUserRelation(roleParams).then((result) => {
            console.log(result);
            Reflect.set(data.record, 'roleIds', result);
            Reflect.set(data.record, 'password', '******');
            setFieldsValue({
              ...data.record,
            });
          });
          const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
          checkGroup.value = await findCurrentUserRelation(organizationParams);
        }
        const deptData = await getOrganizationList();
        await updateSchema([
          {
            field: 'username',
            dynamicDisabled: unref(isUpdate),
          },
          {
            field: 'organizationIds',
            componentProps: {
              treeData: deptData,
            },
          },
        ]);
      });

      const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));

      async function handleSubmit() {
        try {
          const { createMessage } = useMessage();
          const values = await validate();
          console.log(values);
          values.accountExpireTime =
            typeof values.accountExpireTime != 'undefined' && values.accountExpireTime != null
              ? values.accountExpireTime.format('YYYY-MM-DD HH:mm:ss')
              : null;
          setModalProps({ confirmLoading: true });
          await SaveOrUpdateUserInfo(values, unref(isUpdate));
          closeModal();
          emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
          createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
      return {
        registerModal,
        registerForm,
        getTitle,
        handleSubmit,
        organizationTreeData,
        checkGroup,
      };
    },
  });
</script>