
<template>
  <!-- 树形结构 -->
  <div class="left-tree">
    <template v-for="node in treeData" :key="node.id">
      <a-row
        class="item-row-first"
        @click="rowClick(node.id, node.type)"
        :class="{ active: current === node.id }"
      >
        <span
          :class="
            node.children.length > 0 ? (current === node.id ? 'img-open' : 'img-pickup') : 'no-img'
          "
        ></span>
        <span class="label">{{ node.name }}</span>
      </a-row>
      <template v-for="item in node.children" :key="item.id">
        <a-row
          class="item-row-second"
          v-if="current === node.id || currentTreeType === 'secode'"
          :class="{ activeSecond: currentSecond === item.id }"
          @click="secondRowClick(item.id, node.type)"
        >
          <span class="label">{{ item.name }}</span>
        </a-row>
      </template>
    </template>
  </div>
</template>
          
<script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import moment from 'moment';
import eventBus from '/@/utils/eventBus';
const props = {
  /**
   * 显示类型
   *   只能出入String 的数组，而其数组中的项目只能包含['1','2','3','4','5','6']等，其最多6项
   *   不传默认全部
   * */
  showType: { type: Array < String > [], default: ['1', '2', '3', '4', '5', '6'] },
};
export default defineComponent({
  name: 'left-tree',
  components: {},
  props,
  setup(props, { emit }) {
    const data = reactive({
      //当前结点id
      current: '0',
      //第二层当前ID
      currentSecond: '',
      //当前树形类型
      currentTreeType: '',
      //当前选择类型
      currentType: '',
      showType: props.showType,
      treeTypeData: [
        { id: '1001', type: '1', name: '图片资料', children: [] },
        { id: '1002', type: '2', name: '视频资料', children: [] },
        { id: '1003', type: '3', name: '文件资料', children: [] },
        { id: '1004', type: '4', name: '地灾动态简报', children: [] },
        { id: '1005', type: '5', name: '评估简报', children: [] },
        { id: '1006', type: '6', name: 'BIM模型', children: [] },
      ],
      treeData: [],
      fileData: [],
    });
    /**
     * 获取文件数据
     */
    const getFileData = () => {
      return [];
    };
    /**
     * 生成树形数据
     */
    const getTreeData = (files) => {
      let treeFiles = files;
      data.treeData = [];
      //如果没有文件数据，给个测试数据
      if (treeFiles.length < 1 && data.showType.includes('3')) {
        treeFiles = [
          { id: '2001', code: '001', name: '***文件资料1' },
          { id: '2002', code: '002', name: '***文件资料2' },
          { id: '2003', code: '003', name: '***文件资料3' },
        ];
      }
      data.treeTypeData.map((item) => {
        let obj = null;
        if (data.showType.includes(item.type)) {
          obj = item;
        }
        if (obj) {
          //如果是文件资料则添加文件资料
          obj.children = obj.type === '3' ? treeFiles : [];
          data.treeData.push(obj);
        }
      });
    };
    /**
     * 点击行事件
     */
    const rowClick = (id, type) => {
      data.current = data.current === id ? '' : id;
      data.currentTreeType = '';
      data.currentType = type;
      eventBus.emit('AppendixTreeEventBus', { type });
    };

    const secondRowClick = (id, type) => {
      data.currentSecond = id;
      data.currentTreeType = 'second';
      data.currentType = type;
      eventBus.emit('AppendixTreeEventBus', { type, id });
    };
    onMounted(() => {
      let files = [];
      //如果要显示文件资料则进行文件查询
      if (data.showType.includes('3')) {
        files = getFileData();
      }
      getTreeData(files);
    });
    return {
      ...toRefs(data),
      getFileData,
      getTreeData,
      rowClick,
      secondRowClick,
    };
  },
});
</script>
      <style lang="less" scoped>
.left-tree {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  .item-row-first {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    padding: 0 4px;
    // justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      background: linear-gradient(90deg, rgba(22, 192, 255, 0.24) 0%, rgba(22, 192, 255, 0) 100%);
      color: #27fefb;
    }
    .img-open {
      display: flex;
      height: 28px;
      width: 24px;
      margin-top: 3px;
      background-image: url('/@/assets/images/dialog/arrow-r.png');
      background-size: 100% 100%;
    }
    .img-pickup {
      display: flex;
      height: 25px;
      width: 27px;
      background-image: url('/@/assets/images/dialog/arrow-d.png');
      background-size: 100% 100%;
    }
    .no-img {
      display: flex;
      height: 18px;
      width: 16px;
    }
    .label {
      margin-left: 4px;
    }
  }
  .item-row-second {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 20px;

    &:hover {
      background: linear-gradient(90deg, rgba(22, 192, 255, 0.24) 0%, rgba(22, 192, 255, 0) 100%);
      color: #27fefb;
    }
    .label {
      margin-left: 20px;
    }
  }
  .active {
    background: linear-gradient(90deg, rgba(22, 192, 255, 0.24) 0%, rgba(22, 192, 255, 0) 100%);
    color: #27fefb;
  }
  .activeSecond {
    background: linear-gradient(90deg, rgba(22, 192, 255, 0.24) 0%, rgba(22, 192, 255, 0) 100%);
    color: #27fefb;
  }
}
</style>