<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-tree :data="assetStructureList"
               :expand-on-click-node="false"
               :load="expandTable"
               lazy
               @node-click="(data) => showAssets=data.type">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div v-if="data.type === 'dataSource'">{{ data.dataSource.name + '('+data.dataSource.dataSourceDatabaseName + '-' + data.dataSource.fromSystem+')' }}</div>
          <div @click="getDeptAndUser(data,'dataTable',data.dataTable)" v-if="data.type === 'dataTable'">{{ data.dataTable.tableName + '-'+data.dataTable.tableAnnotation + '(' + data.dataTable.recordCount+'条)' }}</div>
        </div>
      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <el-card>
          <div slot="header" class="clearfix">
            <span>资产模型基本信息</span>
          </div>
          <el-descriptions border :column="2">
            <el-descriptions-item label="表名称">{{tableObject.tableName}}</el-descriptions-item>
            <el-descriptions-item label="表备注">{{tableObject.tableAnnotation}}</el-descriptions-item>
            <el-descriptions-item label="数据量">{{tableObject.recordCount}}</el-descriptions-item>
            <el-descriptions-item label="是否核心">
              <el-tag size="small">是</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <span>模型数据</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="dataKvt in dataKvtModelList" style="margin-top: 20px; height: 300px;">
              <el-descriptions :title="dataKvt.fieldsName" direction="vertical" border :column="1" style="max-height: 200px; overflow-y: auto;">
                <el-descriptions-item label="Type" style="max-height: 180px; overflow-y: auto;">
                  <el-tag size="small">{{dataKvt.fieldsType}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="Value">{{dataKvt.fieldsValue}}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>

        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import {queryBigStructure} from "@/api/dataSource/data";
import {getShowModel} from "@/api/dataSource/dataKvt";

export default {
  name: "AssetShow",
  data() {
    return {
      tableObject: {},
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      showAuth: null,
      assetStructureList: [],
      childrenList: [],
      dataKvtModelList: []
    }
  },
  created() {
    this.getBigStructure()
  },
  methods: {
    getDeptAndUser(dataObject,dataType,dataTable){
      console.log(dataObject,dataTable)
      this.tableObject = dataObject.dataTable
      console.log(dataTable.id)
      getShowModel(dataTable.id).then(
        res => {
          console.log("模型:",res.data)
          let data = res.data;
          this.dataKvtModelList = []
          data.forEach(d => {
            d.forEach(da => {
              this.dataKvtModelList.push(da)
            })

          })
          console.log("结果",this.dataKvtModelList)
        }
      )
    },
    getBigStructure() {
      queryBigStructure().then(
        res => {
          this.assetStructureList = res.data.dataSourceDecorationList
          console.log("BigStructure",this.assetStructureList)
        }
      )
    },
    expandTable( node, resolve){
      if (node.level === 0) return resolve(this.assetStructureList);
      if (node.level > 1) return resolve([]);
      const {data} = node;
      if (data.type === 'dataSource') {
        this.title = data.name + '('+data.dataSource.dataSourceDatabaseName + '-' + data.dataSource.fromSystem+')'
      }
      if (data.type === 'dataTable') {
        this.title = data.tableName + '('+data.dataTable.tableAnnotation + '-' + data.dataTable.recordCount+')'
      }
      setTimeout(() => {
        resolve(data.dataTableList)
        this.showAuth = data.type;
      }, 500);
    }
  }
}
</script>

<style scoped>
.el-aside {
  margin: 0;
  padding: 0;
  width: 400px;
  background-color: white;
}
.el-main {
  background-color: #f1f1f1;
}
.custom-tree-node{
  height: 30px;
}
.el-descriptions-row>th{
  width: 200px;
}
</style>
