<template>
  <div class="object-tree">
    <h-b-tree
      ref="demoHbtreeRef"
      id="AuthIndex-queryTree"
      v-bind="props"
      v-model:expandKeys="props.expandKeys"
      v-model:selectedKeys="props.selectedKeys"
      :checkable="state.checkable"
      :check-strictly="state.checkStrictly"
      :draggable="state.draggable"
      :show-header="state.showHeader"
      :show-search="state.showSearch"
      :show-tool-bar="state.showToolBar"
      :show-line="state.showLine"
      close-icon="PlusSquareOutlined"
      open-icon="MinusSquareOutlined"
      :display-format="displayFormat"
      :fieldNames="{ title: 'title', key: 'value1', enable: 'newDisabled' }"
      :placeholder="placeholderText"
      @select="select"
      :useUniqueKey="true"
      :is-scroll-x="true"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, watch } from 'vue';
import { useTree } from '@crami/bui-platform';
/* import { commonApi } from '@/api/commonApi/index'; */
import { commonApi } from '@remote/icpx-platform/commonApi';
import { useI18n } from '@crami/locale';

const paraListProp = {
  paraList: {
    type: Object,
    default: () => {
      return {};
    },
  },
  name: {
    type: String,
    default: '',
  },
};
export default defineComponent({
  name: 'ObjectTreeNode',
  props: paraListProp,
  emits: ['objectSelectTree'],
  setup(_, { emit }) {
    const { t } = useI18n();
    const displayFormat = function (data: any) {
      return data.title;
    };
    const paramsList: any = computed(() => {
      return _.paraList || {};
    });

    const placeholderText = computed(() => {
      return _.name
        ? t('authManage.placeholderNameText', { name: _.name })
        : t('authManage.placeholderText');
    });

    const [demoHbtreeRef, props] = useTree({
      pageName: 'ObjectTreeNode',
      treeDataApi: {
        url: commonApi().system.getGetTreeRootDataList.url,
        method: commonApi().system.getGetTreeRootDataList.method,
        params: {
          ...commonApi().system.getGetTreeRootDataList.params,
          treeViewName: paramsList.value?.TreeViewName,
        },
      },
      treeChildrenDataApi: {
        url: commonApi().system.getGetTreeChildDataList.url,
        method: commonApi().system.getGetTreeChildDataList.method,
        params: {
          ...commonApi().system.getGetTreeChildDataList.params,
          treeViewName: paramsList.value?.TreeViewName,
        },
      },
      // immediate: false,
      defaultSelected: false,
      beforeRequest: params => {
        return {
          ...params,
        };
      },
      beforeRequestChildren: (params, node) => {
        return {
          ...params,
          key: node.value1,
          value1: node.value1,
          value2: node.value2,
          value3: node.value3,
          value4: node.value4,
          value5: node.value5,
          value6: node.value6,
        };
      },
      afterRequest: data => {
        getNewTreeData(data);
        return data;
      },
      afterRequestChildren: data => {
        getNewTreeData(data);
        return data;
      },
    });

    watch(
      () => _.paraList,
      () => {
        demoHbtreeRef.value?.setInputSearchValue && demoHbtreeRef.value?.setInputSearchValue();
      },
      { deep: true },
    );

    // 递归处理数据结构
    const getNewTreeData = treeData => {
      for (let i = 0, leni = treeData.length; i < leni; i++) {
        let item = treeData[i];
        if (paramsList.value?.filters) {
          if (item.value3 == paramsList.value?.filters) {
            item.newDisabled = true;
          } else {
            item.newDisabled = false;
          }
        } else {
          item.newDisabled = true;
        }
        if (item.children && item.children.length) {
          getNewTreeData(item.children);
        }
      }
    };

    const state = reactive({
      checkable: false,
      draggable: false,
      checkStrictly: true,
      showHeader: true,
      showToolBar: false,
      showSearch: true,
      asyncQuery: true,
      showLine: false,
    });

    // 选中树节点
    const select = (_, e: any) => {
      emit('objectSelectTree', e);
    };
    return {
      demoHbtreeRef,
      props,
      state,
      displayFormat,
      select,
      placeholderText,
    };
  },
});
</script>
<style lang="less" scoped>
.object-tree {
  width: 100%;
  height: calc(100vh - 300px);
  margin-bottom: 20px;
  & > div {
    margin-bottom: 20px;
  }
}
</style>
