<template>
  <div class="box box-shadow">
    <div class="left-header">
      <span class="left-header-title">{{ props.title }}</span>
    </div>
    <!-- 搜索框-->
    <div class="search">
      <a-input
        v-model:value="searchText"
        placeholder="流程名称"
        allow-clear
        class="search-input"
        @pressEnter="getTreeData"
        @change="searchTextChange"
      >
        <template #prefix>
          <icon-font iconClass="icon-opt-search"></icon-font>
        </template>
      </a-input>
    </div>
    <div class="tree-content">
      <a-spin tip="Loading..." :spinning="apiLoading" :delay="100">
        <div v-show="treeData && treeData.length > 0" class="left-tree">
          <a-directory-tree
            :show-icon="true"
            v-model:selectedKeys="currentSelectKeys"
            v-model:expandedKeys="expandedKeys"
            @select="selectNode"
            :tree-data="treeData"
            :fieldNames="{ children: 'modelList', title: 'modelName', key: 'modelId', value: 'modelId' }"
          >
            <!-- 图标 -->
            <template #icon="data">
              <icon-font iconClass="icon-tree-wenjianjia" color="#43505e" fontSize="24px" v-if="data.categoryCode"></icon-font>
            </template>
            <!-- 标题 -->
            <template #title="data">
              <span class="not-tree-edit">
                <span class="edit-title" :title="data.modelName">
                  {{ data.modelName }}
                </span>
              </span>
            </template>
          </a-directory-tree>
        </div>
        <a-empty v-show="treeData && treeData.length == 0" class="empty" />
      </a-spin>
    </div>
  </div>
</template>

<script setup name="FlowModelTree">
import { ref, onMounted } from 'vue';
import { FlowModelApi } from '../../model/api/FlowModelApi';
import { getUUID, findResourceAndParents } from '@/utils/common/util';
import { useRoute } from 'vue-router';

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '业务树'
  },
  // 是否显示code
  showCode: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['treeSelect', 'defaultSelect']);

const route = useRoute();

// 搜索名称
const searchText = ref('');
// 加载状态
const apiLoading = ref(false);
// 配置分类树
const treeData = ref([]);
// 当前选中节点
const currentSelectKeys = ref([]);
// 当前展开的节点
const expandedKeys = ref([]);

onMounted(() => {
  getTreeData(true);
});

// 获取分类列表
const getTreeData = (isExpand = false) => {
  apiLoading.value = true;
  FlowModelApi.modelList({ searchText: searchText.value })
    .then(res => {
      treeData.value = setData(res.data);
      if (isExpand) {
        expandedKeys.value = treeData.value.map(item => item.modelId);
        const { modelId } = route.query;
        if (modelId) {
          const { nodeData } = findResourceAndParents(treeData.value, modelId, 'modelId', 'modelList');
          currentSelectKeys.value = [modelId];
          emits('treeSelect', nodeData);
        }
      }
    })
    .finally(() => (apiLoading.value = false));

  function setData(arr) {
    if (arr && arr.length > 0) {
      arr.forEach(item => {
        item.modelName = item.categoryName;
        item.modelId = getUUID();
      });
    }
    return arr;
  }
};

// 选中节点
const selectNode = (selectedKeys, metadata) => {
  if (!metadata.node.categoryCode) {
    emits('treeSelect', metadata.node);
  }
};

// 搜索值变化
const searchTextChange = () => {
  if (!searchText.value) getTreeData();
};

defineExpose({
  currentSelectKeys,
  getTreeData
});
</script>

<style scoped lang="less">
@import url('@/styles/commonTree.less');
</style>
