<!--部门选择框-->
<template>
  <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" :height="500" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
    <BasicTree
      ref="treeRef"
      :treeData="treeData"
      v-bind="getBindValue"
      @select="onSelect"
      @check="onCheck"
      :checkable="true"
      :fieldNames="fieldNames"
      :checkedKeys="checkedKeys"
      :checkStrictly="getCheckStrictly"
    />
    <!--树操作部分-->
    <template #insertFooter>
      <a-dropdown placement="top">
        <template #overlay>
          <a-menu>
            <!--
              <a-menu-item v-if="multiple" key="1" @click="checkALL(true)">全部勾选</a-menu-item>
              <a-menu-item v-if="multiple" key="2" @click="checkALL(false)">取消全选</a-menu-item>
              -->
            <a-menu-item key="3" @click="expandAll(true)">展开全部</a-menu-item>
            <a-menu-item key="4" @click="expandAll(false)">折叠全部</a-menu-item>
          </a-menu>
        </template>
        <a-button style="float: left"> 树操作 <Icon icon="ant-design:up-outlined" /> </a-button>
      </a-dropdown>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { queryDepartTreeSync, queryTreeList } from '/@/api/common/api';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { treeProps } from '/@/components/Form/src/jeecg/props/props';
  import { BasicTree, TreeActionType } from '/@/components/Tree';
  import { useTreeBiz } from '/@/components/Form/src/jeecg/hooks/useTreeBiz';
  import { propTypes } from '/@/utils/propTypes';
  import { queryFxcTplTree } from '/@/views/page/PageTitleconfig.api';

  export default defineComponent({
    name: 'FxcTplSelectModal',
    components: {
      BasicModal,
      BasicTree,
    },
    props: {
      ...treeProps,
      modalTitle: {
        type: String,
        default: '数据来源选择',
      },
      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit, refs }) {
      //注册弹框
      const [register, { closeModal }] = useModalInner();
      const attrs = useAttrs();
      const treeRef = ref<Nullable<TreeActionType>>(null);
      const { createMessage } = useMessage();

      let propValue = props.value === '' ? [] : props.value;
      const getBindValue = Object.assign({}, unref(props), unref(attrs), { value: propValue });
      const queryUrl = getQueryUrl();
      const [{ visibleChange, checkedKeys, getCheckStrictly, getSelectTreeData, onCheck, onLoadData, treeData, checkALL, expandAll, onSelect }] =
        useTreeBiz(treeRef, queryUrl, getBindValue);
      const searchInfo = ref(props.params);
      const tree = ref([]);
      const fieldNames = {
        key: props.rowKey,
      };

      function handleOk() {
        const keys = unref(getTree().getCheckedKeys()).join(',');
        let contains = keys.includes(',');
        if (contains) {
          createMessage.warn('数据源只能单选！');
        } else {
          getSelectTreeData((options, values) => {
            emit('getSelectResult', options, values);
            closeModal();
          });
        }
      }

      function getTree() {
        const tree = unref(treeRef);
        if (!tree) {
          throw new Error('tree is null!');
        }
        return tree;
      }

      function getQueryUrl() {
        let queryFn = queryFxcTplTree;
        return (params) => queryFn(Object.assign({}, params, { primaryKey: props.rowKey }));
      }

      return {
        tree,
        handleOk,
        searchInfo,
        treeRef,
        treeData,
        onCheck,
        onSelect,
        checkALL,
        expandAll,
        fieldNames,
        checkedKeys,
        register,
        getBindValue,
        getCheckStrictly,
        visibleChange,
        onLoadData,
      };
    },
  });
</script>
