<template>
  <BasicModal
    width="650px"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <div style="height: 40vh">
      <BasicForm @register="registerForm">
        <template #organizationId="{ model, field }">
          <Button type="link" @click="handleOpenCreate" style="padding: 0; z-index: 9999"
            >新增组织
          </Button>
          <BasicTree
            v-if="organizationTreeData.length"
            v-model:value="model[field]"
            :treeData="organizationTreeData"
            :checked-keys="checkGroup"
            :expandedKeys="treeExpandData"
            ref="basicTreeRef"
            @check="handleCheckClick"
            @unSelectAll="handleUnSelectAll"
            @strictlyStatus="handleStrictlyStatus"
            checkable
            toolbar
            @change="handleTreeSelect"
          />
        </template>
        <template #roleSlot="{ model, field }">
          <a-select
            mode="multiple"
            allowClear
            placeholder="请选择角色"
            v-model:value="model[field]"
            @change="handleRoleSelect"
            :options="roleOptions.map((item) => ({ value: item.value, label: item.label }))"
          >
            <template #dropdownRender="{ menuNode: menu }">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 4px 0" />
              <div @click="handleOpenRole" style="padding: 4px 0; cursor: pointer">
                <plus-outlined />
                新增角色
              </div>
            </template>
          </a-select>
        </template>
      </BasicForm>

      <OrganizationDrawer @register="registerDrawer" @success="handleReload" />
    </div>
  </BasicModal>
  <RoleDrawer @register="registerRoleDrawer" @success="handleSuccess" />
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { accountFormSchema } from './config';
  import { Button } from 'ant-design-vue';
  import { findCurrentUserRelation, filterRoleList } from '/@/api/system/system';
  import { addTenantList } from '/@/api/system/account';
  import { BasicTree, TreeItem, CheckKeys, CheckEvent } from '/@/components/Tree';
  import { findCurrentUserGroups } from '/@/api/system/group';
  import { RoleOrOrganizationParam } from '/@/api/system/model/systemModel';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { copyTransTreeFun } from '/@/utils/fnUtils';
  import { TOption } from '/@/views/rule/linkedge/config/config.data';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { useDrawer } from '/@/components/Drawer';
  import RoleDrawer from '../../role/RoleDrawer.vue';
  import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { IsPhoneExist } from '/@/api/system/system';
  import { phoneRegexp } from '/@/utils/rules';

  export default defineComponent({
    name: 'TenantModal',
    components: {
      BasicModal,
      BasicForm,
      Button,
      BasicTree,
      OrganizationDrawer,
      PlusOutlined,
      RoleDrawer,
      VNodes: (_, { attrs }) => {
        return attrs.vnodes;
      },
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const [registerRoleDrawer, { openDrawer }] = useDrawer();
      const { createMessage } = useMessage();
      const userInfo = useUserStore();

      const roleOptions = ref<TOption[]>([]);
      const isAdd = ref(true);
      const rowId = ref('');
      const organizationTreeData = ref<TreeItem[]>([]);
      const basicTreeRef = ref();
      const checkGroup = ref<string[]>([]);
      const treeExpandData = ref([]);
      const olderPhoneNumber = ref();
      const singleEditPostPhoneNumber = reactive({
        phoneNumber: '',
      });
      const checkedKeysWithHalfChecked = ref<(string | number)[]>([]);
      const getRoleList = async () => {
        const res = await filterRoleList({ roleType: 'TENANT_ADMIN' });
        roleOptions.value = res.map((m) => {
          return {
            label: m.name,
            value: m.id,
          };
        });
      };

      onMounted(async () => {
        await getRoleList();
      });
      const handleOpenRole = () => {
        openDrawer(true, {
          isAdd: false,
        });
      };
      const clearValidateByField = (field: string) => {
        clearValidate(field);
      };
      const handleRoleSelect = (e) => {
        if (e?.length > 0) clearValidateByField('roleIds');
        else validateFields(['roleIds']);
      };
      const handleTreeSelect = (e) => {
        if (e) clearValidateByField('organizationIds');
      };
      const handleSuccess = async () => {
        await getRoleList();
      };
      const [
        registerForm,
        {
          setFieldsValue,
          updateSchema,
          resetFields,
          validate,
          getFieldsValue,
          clearValidate,
          validateFields,
        },
      ] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });
      //获取所有父级id
      function findForAllId(data = [], arr = []) {
        for (const item of data) {
          arr.push(item.id);
        }
        return arr;
      }

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        await resetFields();
        setModalProps({ confirmLoading: false });
        isAdd.value = !!data?.isAdd;
        const groupListModel = await findCurrentUserGroups();
        if (!unref(organizationTreeData).length) {
          copyTransTreeFun(groupListModel);
          organizationTreeData.value = groupListModel;
          const getAllIds = findForAllId(organizationTreeData.value as any, []);
          //设置要展开的id
          treeExpandData.value = getAllIds;
        }

        if (!unref(isAdd)) {
          rowId.value = data.record.id;
          const roleParams = new RoleOrOrganizationParam(rowId.value, true, false);
          olderPhoneNumber.value = data.record.phoneNumber;
          singleEditPostPhoneNumber.phoneNumber = data.record.phoneNumber;
          findCurrentUserRelation(roleParams).then((result) => {
            Reflect.set(data.record, 'roleIds', result);
            setFieldsValue(data.record);
          });
          updateSchema([
            {
              field: 'phoneNumber',
              dynamicRules: () => {
                return [
                  {
                    required: true,
                    validator(_, value) {
                      return new Promise((resolve, reject) => {
                        if (value == '') {
                          reject('请输入手机号');
                        } else if (!phoneRegexp.test(value)) {
                          reject('请输入正确的手机号');
                        } else {
                          resolve();
                        }
                      });
                    },
                  },
                ];
              },
            },
          ]);
          const organizationParams = new RoleOrOrganizationParam(rowId.value, false, true);
          checkGroup.value = await findCurrentUserRelation(organizationParams);
        } else {
          updateSchema([
            {
              field: 'phoneNumber',
              dynamicRules: ({ values }) => {
                return [
                  {
                    required: true,
                    validator(_, value) {
                      return new Promise((resolve, reject) => {
                        if (value == '') {
                          reject('请输入手机号');
                        } else if (!phoneRegexp.test(value)) {
                          reject('请输入正确的手机号');
                        } else {
                          if (values.phoneNumber != undefined) {
                            // 此处可以用防抖函数优化性能
                            IsPhoneExist(value).then(({ data }) => {
                              if (data != null) {
                                reject('手机号已存在');
                              } else {
                                resolve();
                              }
                            });
                          } else {
                            resolve();
                          }
                        }
                      });
                    },
                  },
                ];
              },
            },
          ]);
        }
        await updateSchema([
          {
            field: 'username',
            dynamicDisabled: !unref(isAdd),
          },
        ]);
      });
      const getTitle = computed(() => (unref(isAdd) ? '新增管理员账号' : '编辑管理员账号'));

      async function handleSubmit() {
        setModalProps({ confirmLoading: true });
        try {
          const values = getFieldsValue();
          if (!('organizationIds' in values)) {
            createMessage.error('组织必选');
          }
          await validate();
          await addTenantList({ ...values, level: 4, tenantId: userInfo.getUserInfo.tenantId! });
          createMessage.success(unref(isAdd) ? '新增成功' : '编辑成功');
          closeModal();
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }
      // 取消全部的时候清除回显时获取的
      const handleUnSelectAll = () => {
        checkedKeysWithHalfChecked.value = [];
      };

      const strictlyStatus = ref(false); //层级关联或独立的状态 false为层级关联 true为层级独立

      const handleStrictlyStatus = (status) => (strictlyStatus.value = status);

      const handleCheckClick = (selectedKeys: CheckKeys, event: CheckEvent) => {
        //fix 取消层级独立后selectedKeys不是数组，是{checked:[],halfChecked:[]}对象 迭代报错
        // 层级独立
        if (strictlyStatus.value) {
          if (!Array.isArray(selectedKeys)) {
            selectedKeys = selectedKeys?.checked;
            event.halfCheckedKeys = [];
          }
        } else {
          // 层级关联
          event.halfCheckedKeys = [];
        }
        checkedKeysWithHalfChecked.value = [
          ...selectedKeys,
          ...(event.halfCheckedKeys as string[]),
        ];
      };

      const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();

      const handleOpenCreate = () => {
        addOpenDrawer(true, { isAdd: false });
      };
      const handleReload = async () => {
        const groupListModel = await findCurrentUserGroups();
        copyTransTreeFun(groupListModel);
        organizationTreeData.value = groupListModel;
      };

      return {
        registerModal,
        registerForm,
        handleSubmit,
        getTitle,
        organizationTreeData,
        checkGroup,
        basicTreeRef,
        treeExpandData,
        roleOptions,
        registerRoleDrawer,
        handleOpenRole,
        handleSuccess,
        handleRoleSelect,
        handleTreeSelect,
        handleCheckClick,
        handleUnSelectAll,
        handleStrictlyStatus,
        handleOpenCreate,
        registerDrawer,
        handleReload,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.vben-basic-tree) {
    width: 100% !important;
    margin-top: -28px !important;
    padding: 0;
  }

  :deep(.is-unflod) {
    display: none !important;
  }

  :deep(.is-flod) {
    display: none !important;
  }
</style>