<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-tree :data="assetStructureList"
               :load="expandTable"
               :expand-on-click-node="false"
               lazy
               @node-click="showName"
               :props="defaultProps">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div v-if="data.type === 'dataSource'">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
          <div v-if="data.type === 'dataTable'">{{ data.tableName + '-'+data.asas + '(' + data.dataTotal+'条)' }}</div>
        </div>
      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <el-card>
          <div slot="header" class="clearfix">
            <span>资产模型基本信息</span>
          </div>
          <el-descriptions v-model="table" border :column="2">
            <el-descriptions-item label="表名称">{{table.tableName}}</el-descriptions-item>
            <el-descriptions-item label="表备注">{{table.asas}}</el-descriptions-item>
            <el-descriptions-item label="数据量">{{ table.dataTotal }}</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="asset in assetShowList" style="margin-top: 20px">
              <el-descriptions :title="asset.keysed" direction="vertical" border :column="1">
                <el-descriptions-item label="Type">
                  <el-tag size="small">{{asset.type}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="Value">{{asset.val}}</el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>

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

<script>
import { selectFrimary, selectShow } from "@/api/system/accredit";

export default {
  name: "AssetShow",
  data() {
    return {
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      table: null,
      showAuth: null,
      assetStructureList: [],
      childrenList: [],
      assetShowList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    expandTable( node, resolve){
      if (node.level === 0) return resolve(this.assetStructureList);
      const {data} = node;
      if (data.type === 'dataTable') {
        return resolve([])
      }
      setTimeout(() => {
        resolve(data.tableLists)
      }, 500);
    },
    showName(data) {
      console.log(data)
      this.showAuth = data.type
      if (data.type === 'dataSource'){
        this.table = data
        selectShow(data.databaseName).then(res => {
          this.assetShowList = res.data
        })
      }
      if (data.type === 'dataTable'){
        this.table = data
        selectShow(data.tableName).then(res => {
          this.assetShowList = res.data
        })
      }
    },
    init() {
      this.table = {
        tableName: 'null',
        asas: '表',
        dataTotal: '0',
      }
      selectFrimary().then(res => {
        this.assetStructureList = res.data
        console.log(res.data)
      })
    }
  }
}
</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>
