<template>
  <div>
    <el-container :style="{height: mainHeight + 'px'}">
      <el-aside width="400px" style="background-color: rgb(238, 241, 246);height: 80%">
          <el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>

      <el-container>

        <el-main>
          <el-tabs v-model="activeName">
            <el-tab-pane label="资产结构" name="structure">
              <OverallAssets v-if="showAssets == null"/>
              <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
              <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
            </el-tab-pane>
            <el-tab-pane label="资产数据" name="data">
              <el-card style="height: 280px">
                <div slot="header" class="clearfix">
                  <span>查询语句</span>
                </div>
                <el-input type="textarea" v-model="source.sql" style="width: 1080px;" :rows="6"></el-input>
                <el-button style="float: right;margin-top: 20px" @click="sql()">查询</el-button>

              </el-card>
              <br>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>数据资产</span>
                </div>
                <el-table :data="structureList" v-if="structureList!=null">
                  <el-table-column v-for="(assets,index) in assetsList" :label="index+' ('+assets+')'" width="140">
                    <template slot-scope="scope">
                      {{scope.row[index].value}}
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>

            </el-tab-pane>
          </el-tabs>

        </el-main>
      </el-container>
    </el-container>

<!--    <el-dialog title="数据结构" :visible.sync="dialogTableVisible">-->
<!--      <el-table :data="tableAssets">-->
<!--        <el-table-column property="field" label="字段名" width="150"></el-table-column>-->
<!--        <el-table-column property="type" label="类型" width="150"></el-table-column>-->
<!--        <el-table-column property="null" label="是否为空" width="150"></el-table-column>-->
<!--        <el-table-column property="key" label="键" width="150"></el-table-column>-->
<!--        <el-table-column property="default" label="默认值" width="150"></el-table-column>-->
<!--      </el-table>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogTableVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {assetModelList, assetsList, dataAssetList, listSource, statisticsInfo, structureList} from "@/api/etl/source";
import OverallAssets from "@/views/etl/assets/dashboard/OverallAssets.vue";
import OverallSpecificAssets from "@/views/etl/assets/dashboard/OverallSpecificAssets.vue";
import OverallAssetStructure from "@/views/etl/assets/dashboard/OverallAssetStructure.vue";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets},
    props: {},
    data() {
      return {
        mainHeight: window.innerHeight - 85,
        assetsCompute:{
          assetsModuleSum: 0,
          dataModuleSum: 0,
          dataSourceSum: 0
        },
        showAssets: null,
        title: {},
        activeName: 'structure',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dataSourceName: null,
          linkAddress: null
        },
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        sourceList: [],
        assetsList:[],
        structureList:[],
        tableAssets:[],
        defaultProps: {
          children: 'tableList',
          label: 'label'
        },
        sourceData:{},
        source: {
          sql: ''
        },
        statisticsInfo:{}
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      test(data){
        this.sourceData = data
      },
      handleNodeClick(data) {
        this.source = data
        if (data.dataType === 'dataSource'){
          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.title= data
        }
        this.showAssets = data.dataType
      },
      sql(){
        structureList(this.source).then(res => {
          console.log(res)
          this.structureList = res.data.kvtList
        })
      },
      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;
        });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    }
  };
</script>
<style scoped>
.el-aside {
  margin: 0;
  padding: 0;
  width: 400px;
  background-color: white;
}
.el-main {
  background-color: #f1f1f1;
}
.custom-tree-node{
  height: 30px;
}
</style>
