<template>
  <div class="panel">
    <div class="panel-search">
      <a-input v-model:value.trim="searchText" allowClear placeholder="请输入，回车搜索" @pressEnter="search"
        ><template #prefix> <icon-font iconClass="icon-opt-search"></icon-font> </template
      ></a-input>
    </div>
    <div class="panel-content" :style="{ height: 'calc(100% - 51px)' }">
      <template v-for="(nodeGroup, index) in baseDataList.nodeGroups" :key="index + 'base'">
        <node-group
          :node-group="nodeGroup"
          v-model:selectKeys="baseSelectKeys"
          @changeSelect="changeSelect"
          :iconList="iconList"
          @dbclick="dbclick"
        ></node-group>
      </template>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import NodeGroup from './node_group.vue';
import { searchTree, deepClone, getPortalDesignIcon } from '@/utils/common/util';

const emits = defineEmits(['dbclick', 'dataDone']);

const jsonData = {
  nodeGroups: [
    {
      id: '1',
      name: '新闻组件',
      groupCode: 'new',
      groupName: '新闻组件',
      portalComponentList: [
        {
          id: '3',
          name: '轮播图',
          componentId: '3',
          componentCode: 'CAROUSEL',
          componentGroupId: '3',
          componentName: '轮播图',
        },
        {
          id: '4',
          name: '新闻通知',
          componentId: '4',
          componentCode: 'NEWS',
          componentGroupId: '4',
          componentName: '新闻通知'
        }
      ]
    },
    {
      id: '2',
      name: '业务组件',
      groupCode: 'business',
      groupName: '业务组件',
      portalComponentList: [
        {
          id: '5',
          name: '流程中心',
          componentId: '5',
          componentCode: 'FLOW_CENTER',
          componentGroupId: '5',
          componentName: '流程中心'
        },
        {
          id: '6',
          name: '应用入口',
          componentId: '6',
          componentCode: 'APPLICATION_ENTRANCE',
          componentGroupId: '6',
          componentName: '应用入口'
        },
        {
          id: '7',
          name: '日历',
          componentId: '7',
          componentCode: 'CALENDAR',
          componentGroupId: '7',
          componentName: '日历'
        },
        {
          id: '8',
          name: '本月工作',
          componentId: '8',
          componentCode: 'MONTH_WORK',
          componentGroupId: '8',
          componentName: '本月工作'
        },
        {
          id: '9',
          name: '快捷入口',
          componentId: '9',
          componentCode: 'QUICK_ENTRANCE',
          componentGroupId: '9',
          componentName: '快捷入口'
        }
      ]
    }
  ]
};

const searchText = ref('');

// 组件列表
const baseDataList = ref(deepClone(jsonData));

// 组件分类选中展开列表
const baseSelectKeys = ref([]);

const iconList = ref(getPortalDesignIcon());

onMounted(() => {
  baseSelectKeys.value = jsonData.nodeGroups.map(item => item.id);
  emits('dataDone');
});

// 改变选中
const changeSelect = id => {
  let targetArray = 0;
  targetArray = baseSelectKeys.value;

  const findIndex = targetArray.findIndex(item => item === id);

  if (findIndex !== -1) {
    targetArray.splice(findIndex, 1);
  } else {
    targetArray.push(id);
  }
};

const search = () => {
  const targetList = baseDataList.value;
  const sourceList = jsonData;

  const arr = searchTree(targetList.nodeGroups, sourceList.nodeGroups, searchText.value, 'portalComponentList', 'id', 'name');
  targetList.nodeGroups = deepClone(arr.resultList);
};

const dbclick = val => {
  emits('dbclick', val);
};
</script>

<style scoped lang="less">
.panel {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  height: 100%;
  box-sizing: border-box;
}
.panel-search {
  padding: 0 16px;
}
.panel-content {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  overflow-y: auto;

  scrollbar-width: none;
}
</style>
