<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-tree :data="assetStructureList"
               :load="expandTable"
               :expand-on-click-node="false"
               lazy
               @node-click="(data) => showAuth=data.type"
               :props="defaultProps">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div v-if="data.type === 1"  @click="selectDataStur(node)">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
          <div v-if="data.type === 2" @click="selectDataStur(node)">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</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="表名称">{{dataStructure.name}}</el-descriptions-item>
              <el-descriptions-item label="表备注">{{dataStructure.as}}</el-descriptions-item>
            <el-descriptions-item label="数据量">{{dataStructure.dataTotal}}</el-descriptions-item>
            <el-descriptions-item label="是否核心">
              <el-tag size="small">{{dataStructure.tableName}}</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="asset in assetShowList" style="margin-top: 20px">
              <el-descriptions :title="asset.key" direction="vertical" border :column="1">
                <el-descriptions-item label="Type">
                  <el-tag size="small">{{asset.fieldName}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="Value">{{asset.value}}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import { selectDataDisplay, selectDataDisplayName, selectDataSource, selectDepartmen } from '@/api/kvt/kvt'

export default {
  name: "AssetShow",
  data() {
    return {
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      showAuth: null,
      assetStructureList: [
        // {
        //   name: "测试1",
        //   systemName: "云计算系统",
        //   databaseName: "yunjisuan",
        //   type: "dataSource"
        // }
      ],
      assetShowList: [
        // {key: "测试.sys_user.id", type: "String", value: 1},
        // {key: "测试.sys_user.name", type: "String", value: "张三"},
        // {key: "测试.sys_user.age", type: "Integer", value: 18},
        // {key: "测试.sys_user.email", type: "String", value: "123@136.com"},
        // {key: "测试.sys_user.sex", type: "String", value: "Y"},
      ],
      dataStructure: {}
    }
  },
  created() {
    this.selectDataSource()
  },
  methods: {
    selectDataDisplay(){
      selectDataDisplay().then(res =>{
        console.log("sss",res)
        this.assetShowList = res.data
      })
    },
    selectDataStur(node) {
        this.dataStructure = node.data
      console.log("nodedddd", this.dataStructure)
      if (node.level ===2)
        selectDataDisplayName(node.data.name).then(res =>{
          this.assetShowList = res.data
          console.log("ssssss", this.assetShowList )
        })
    },
    //查询同步表
    selectDataSource(){
      selectDataSource().then(res=>{
        console.log(res)
        this.assetStructureList = res.data
      })
    },
    // selectDataStructure(){
    //   overallDataStructure().then(res =>{
    //     console.log(res)
    //     this.assetStructureList = res.data
    //   })
    // },
    expandTable( node, resolve){
      console.log("node",node)
      if (node.level === 0) return resolve(this.assetStructureList);
      const {data} = node;
      if (node.level ==1){
        selectDepartmen(node.data.databaseName).then(res=>{
          this.childrenList = res.data
        })
        this.selectDataDisplay()
      }
      if (data.type === 2) {
        return resolve([])
      }

      setTimeout(() => {
        resolve(this.childrenList)
      }, 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>
