<template>
  <div>
    <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>
  </div>
</template>

<script>
import {dataAssetList, listSource, structureList} from "@/api/etl/source";

export default {
  watch:{
    'asset':{
      handler(val){
      },
      immediate: true
    },
    'source':{
      handler(val){
        this.structureList()
      },
      immediate: true
    }
  },
  props:{
    asset:{},
    source: {}
  },
  name: "dataAssetShow",
  data() {
    return {
      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() {
  },
  methods: {
    structureList(){
      this.source.sql = 'select * from '+(this.source.modeName == null ? '' : this.source.modeName+'.')+this.asset.tableName +' limit 1'
      structureList(this.source).then(res => {
        console.log(res)
        this.kvtList = res.data.kvtList
        this.structure = res.data.structure
      })
    },
    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>

</style>
