<template>
  <div :class="[`${prefixCls}-bottom`, '!dark:bg-dark-900']">
    <div class="datacenter-left">
      <div class="page-name">
        <p>数据目录</p>
      </div>
      <div class="ztree-container">
        <a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
          :replace-fields="{ children: 'child', key: 'id', value: 'name', title: 'name' }" v-if="treeData.length"
          defaultExpandAll="true" v-model:checkedKeys="checkedKeys">
          <template #title0010><span style="color: #1890ff">sss</span></template>
        </a-directory-tree>
      </div>
    </div>
    <Tabs>
      <template v-for="item in  achieveList " :key="item.type">
        <TabPane :tab="[`${item.typeName}成果(${item.count})`]">
          <component :is="item.type == 'MR'?'MapData':'FileData'" :listData="item.items" :numb="1" />
          <!-- <MapData v-if="item.type == 'MR'" :listData="item.items" /> -->
          <!-- <FileData v-if="item.type == 'DR'" :listData="item.items" /> -->
        </TabPane>
      </template>
    </Tabs>
  </div>
</template>

<script lang="ts">
import { Tabs } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';
import MapData from './item/MapData.vue';
import FileData from './item/FileData.vue';
import { onMounted } from 'vue';
import { directoryTree, platList } from '/@/api/resource/plat';

const prefixCls = 'account-center-bottom'

export default defineComponent({
  components: {
    Tabs,
    TabPane: Tabs.TabPane,
    MapData,
    FileData,
  },
  setup() {
    const treeData = ref([]);
    const expandedKeys = ref([]);
    const selectedKeys = ref([]);
    const checkedKeys = ref([]);
    const achieveList = ref([]);
    watch(expandedKeys, () => {
      console.log('expandedKeys', expandedKeys);
    });
    watch(selectedKeys, () => {
      console.log('selectedKeys', selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log('checkedKeys', checkedKeys);
    });

    onMounted(() => {
      directoryTree().then((r) => { if (r) treeData.value = r });
      platList().then((r) => { if (r) console.log(r), achieveList.value = r });
    });

    return {
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      prefixCls: 'account-center',
      achieveList,
    };
  },
});
</script>
<style lang="less" scoped>
.account-center-bottom {
  background: #fff;
  height: calc(100vh - 80px);
  overflow: hidden;
}

.ztree-container {
  float: left;
  overflow: auto;
  width: 100%;
  height: auto;
  max-height: 976px;
}

.datacenter-left .page-name {
  // background: #333333;
  border-bottom: solid 1px #DEDEDE;
}

.datacenter-left .page-name p {
  height: 42px;
  line-height: 42px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  text-align: center;
  margin-bottom: 0px;
}

.datacenter-left {
  float: left;
  width: 250px;
  height: auto;
  margin-right: 16px;
  border-top: none;
  background: #F8F8F8;
  overflow: auto;
  height: calc(100% - 20px);
  max-height: 1306px;
}

.account-center {
  &-bottom {
    padding: 10px;
    margin: 16px;
    // background-color: @component-background;
    border-radius: 3px;
  }
}
</style>
