<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <data-source-show v-if="showAssets === 'dataSource'" :source="source"></data-source-show>
        <data-asset-show v-if="showAssets === 'dataTable'" :asset="asset" :source="source"></data-asset-show>
<!--        <el-card>-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>资产模型基本信息</span>-->
<!--          </div>-->
<!--          <el-descriptions border :column="2">-->
<!--            <el-descriptions-item label="表名称">{{asset.tableName}}</el-descriptions-item>-->
<!--            <el-descriptions-item label="表备注">{{asset.tableComment}}</el-descriptions-item>-->
<!--            <el-descriptions-item label="数据量">{{asset.tableCount}}</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 v-if="kvtList.length > 0" :gutter="20">-->
<!--            <el-col :span="6" v-for="(kvt,index) in kvtList[0]" style="margin-top: 20px">-->
<!--              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">-->
<!--                <el-descriptions-item label="Type">-->
<!--                  <el-tag size="small">{{kvt.type}}</el-tag>-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item label="Value">{{kvt.value=='' ? 'null':kvt.value}}</el-descriptions-item>-->
<!--              </el-descriptions>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row v-if="kvtList.length == 0" :gutter="20">-->
<!--            <el-col :span="6" v-for="(value,index) in structure" style="margin-top: 20px">-->
<!--              <el-descriptions :title="source.dataSourceName+'.'+asset.tableName+'.'+index" direction="vertical" border :column="1">-->
<!--                <el-descriptions-item label="Type">-->
<!--                  <el-tag size="small">{{value}}</el-tag>-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item label="Value">null</el-descriptions-item>-->
<!--              </el-descriptions>-->
<!--            </el-col>-->
<!--          </el-row>-->

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

<script>

import {dataAssetList, listSource, structureList} from "@/api/etl/source";
import DataSourceShow from "@/views/etl/assetShow/modules/dataSourceShow.vue";
import DataAssetShow from "@/views/etl/assetShow/modules/dataAssetShow.vue";

export default {
  name: "AssetShow",
  components: {DataAssetShow, DataSourceShow},
  data() {
    return {
      showAssets: '',
      source: {},
      asset: {},
      sourceList: [],
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'tableList',
        label: 'label'
      },
      showAuth: null,
      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"},
      ],
      kvtList: [],
      structure: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      listSource({}).then(response => {
        this.sourceList = response.data.rows;
        this.sourceList.forEach(source => {
          if (source.type=='PostGreSql'){
            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
          }else{
            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
          }

          source.dataType = 'dataSource'
          if (source.tableList!=null){
            source.tableList.forEach(table => {
              table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
              table.dataType = 'dataTable'
            })
          }
        })
        this.total = response.data.total;
      });
    },
    // structureList(){
    //   structureList(this.source).then(res => {
    //     console.log(res)
    //     this.kvtList = res.data.kvtList
    //     this.structure = res.data.structure
    //   })
    // },
    handleNodeClick(data) {
      if (data.dataType === 'dataSource'){
        this.source = data
        dataAssetList(data).then(res => {
          res.data.forEach(table => {
            table.dataType = "dataTable"
            table.label=table.tableName+"-"+table.tableComment+"("+table.tableCount+"条)"
          })
          data.tableList = res.data
          this.sourceList[this.sourceList.indexOf(data)].tableList = res.data
          this.title = data
        })

      }else{
        this.asset= data
        this.sourceList.forEach(source => {
          if (source.tableList!=null){
            source.tableList.forEach(table => {
              if (table.tableName === data.tableName){
                this.source = source
              }
            })
          }
        })
        // console.log(this.source)
        // this.source.sql = 'select * from '+(data.modeName == null ? '' : data.modeName+'.')+data.tableName +' limit 1'
        // setTimeout(() => {
        //   this.structureList()
        // }, 50);

      }
      this.showAssets = data.dataType
    },
    expandTable( node, resolve){
      if (node.level === 0) return resolve(this.assetStructureList);
      const {data} = node;
      if (data.type === 'dataTable') {
        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>
