<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: 'businessList', title: 'businessName', key: 'businessId', value: 'businessId' }"
          >
            <!-- 图标 -->
            <template #icon="data">
              <icon-font iconClass="icon-tree-wenjianjia" color="#43505e" fontSize="24px" v-if="data.type == '1'"></icon-font>
            </template>
            <!-- 标题 -->
            <template #title="data">
              <span class="not-tree-edit">
                <span class="edit-title" :title="data.businessName + (showCode && data.businessCode ? '(' + data.businessCode + ')' : '')">
                  {{ data.businessName }}<span v-if="showCode && data.businessCode">({{ data.businessCode }})</span></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="BuinessTree">
import { computed, ref, onMounted } from 'vue';
import { BusinessCategoryApi } from '../../api/BusinessCategoryApi';
import { useGeneratorStore } from '@/store/modules/generator';

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

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

// store
const generatorStore = useGeneratorStore();

// 当前选中应用数据
const buinessSelectAppData = computed(() => generatorStore.buinessSelectAppData ?? {});

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

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

// 获取分类列表
const getTreeData = (isSelect = false) => {
  apiLoading.value = true;
  BusinessCategoryApi.getBusinessTree({ searchText: searchText.value })
    .then(res => {
      treeData.value = setData(res);
      // 是否默认选中
      if (props.showDefaultSelect && isSelect && buinessSelectAppData.value?.businessCategoryId) {
        expandedKeys.value = [buinessSelectAppData.value.businessCategoryId];
        currentSelectKeys.value = [buinessSelectAppData.value?.businessId];
        emits('treeSelect', buinessSelectAppData.value);
      }
    })
    .finally(() => (apiLoading.value = false));

  function setData(arr) {
    if (arr && arr.length > 0) {
      arr.forEach(item => {
        item.type = '1';
        item.businessId = item.businessCategoryId;
        item.businessName = item.categoryName;
        if (item.businessList && item.businessList.length > 0) {
          item.businessList.forEach(mItem => {
            mItem.type = '2';
            mItem.businessCategoryId = item.businessCategoryId;
          });
        }
      });
    }
    return arr;
  }
};

// 选中节点
const selectNode = (selectedKeys, metadata) => {
  if (metadata.node.type == '2') {
    let obj = {
      businessCategoryId: metadata.node.businessCategoryId,
      businessId: metadata.node.businessId
    };
    if (props.showDefaultSelect) {
      generatorStore.setBuinessSelectAppData(obj);
    }
    emits('treeSelect', metadata.node);
  }
};

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

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

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