<!--
 * @Description: MySQL访问情况统计子面板组件
 * @Author: laoliu
 * @Date: 2022-3-8 9:43:52
-->
<template>
  <!-- 数据库访问指标 -->
  <div>
    <div class="index-area" style="text-align:right">
      <div class="index-title">
        <span>--------------------- MySQL数据库：{{dbInfo.sqlDatabaseDTO.databaseName}} ---------------------</span>
      </div>
      <div class="db-index">
        <p class="title1">表总数</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalTables}}</p>
      </div>
      <div class="db-index">
        <p class="title1">列总数</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalCols}}</p>
      </div>
      <div class="db-index">
        <p class="title1">行总数</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalRows}}</p>
      </div>
      <div class="db-index">
        <p class="title1">数据总量</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalDataStr}}M</p>
      </div>
      <div class="db-index mouse-pointer" @click="handleShowTableList">
        <p class="title2">最多列 >></p>
        <p class="table-name">{{dbInfo.sqlDatabaseDTO.maxColTable}}</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalColsInTable}}</p>
      </div>
      <div class="db-index mouse-pointer" @click="handleShowTableList">
        <p class="title2">最多行 >></p>
        <p class="table-name">{{dbInfo.sqlDatabaseDTO.maxRowTable}}</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalRowsInTable}}</p>
      </div>
      <div class="db-index mouse-pointer" @click="handleShowTableList">
        <p class="title2">最大数据 >></p>
        <p class="table-name">{{dbInfo.sqlDatabaseDTO.maxDataTable}}</p>
        <p class="text">{{dbInfo.sqlDatabaseDTO.totalDataInTableStr}}M</p>
      </div>
    </div>

    <div class="index-area" style="text-align:right">
      <div class="index-title">
        <span>--------------------- MongoDB数据库：{{dbInfo.mongoStatDTO.dbName}} ---------------------</span>
      </div>
      <div class="db-index">
        <p class="title1">表总数</p>
        <p class="text">{{dbInfo.mongoStatDTO.collections}}</p>
      </div>
      <div class="db-index">
        <p class="title1">对象总数</p>
        <p class="text">{{dbInfo.mongoStatDTO.objects}}</p>
      </div>
      <div class="db-index">
        <p class="title1">对象均量</p>
        <p class="text">{{dbInfo.mongoStatDTO.avgObjSizeStr}}K</p>
      </div>
      <div class="db-index">
        <p class="title1">数据总量</p>
        <p class="text">{{dbInfo.mongoStatDTO.dataSizeStr}}M</p>
      </div>
      <div class="db-index">
        <p class="title1">存储总量</p>
        <p class="text">{{dbInfo.mongoStatDTO.storageSizeStr}}M</p>
      </div>
      <div class="db-index">
        <p class="title1">索引总数</p>
        <p class="text">{{dbInfo.mongoStatDTO.indexes}}M</p>
      </div>
      <div class="db-index">
        <p class="title1">索引总量</p>
        <p class="text">{{dbInfo.mongoStatDTO.indexSizeStr}}M</p>
      </div>
    </div>

    <el-drawer :visible.sync="showDrawer" size="53%" :with-header="false" direction="rtl">
      <div class="drawer-header">
        <b>数据库【{{dbInfo.sqlDatabaseDTO.databaseName}}】表信息统计</b>
      </div>
      <div class="drawer-content" :style="dynamicHeight">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column width="200" prop="tableName" label="表名称"></el-table-column>
          <el-table-column width="100" prop="totalRows" label="行数"></el-table-column>
          <el-table-column width="100" prop="totalCols" label="列数"></el-table-column>
          <el-table-column width="140" prop="tableDataStr" label="Data数据量(M)"></el-table-column>
          <el-table-column width="140" prop="tableIndexStr" label="Index数据量(M)"></el-table-column>
          <el-table-column prop="tableTotalDataStr" label="总数据量(M)"></el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Constant from '../../global/CommonConst.js'
import Util from '../../global/CommonUtil.js'

export default {
  name: 'MysqlSubpanel',
  props: ["curServer"],

  data() {
    return {
      // 数据库统计相关变量
      dbInfo: {
        sqlDatabaseDTO: {},
        mongoStatDTO: {}
      }, 
      refreshTimer: null,

      // 查看数据库列表相关变量 
      showDrawer: false,
      tableData: []
    }
  },

  computed: {
    dynamicHeight() {
      return 'height:' + (this.$root.windowHeight - 90) + 'px';
    },
  },

  methods:{
    showDatabaseInfo() {
      this.refreshDatabaseInfo();
    },

    refreshDatabaseInfo() {
      // return;
      if (!this.curServer) return;
      
      let url = Util.fillUrlArgments(this.commonUrl.URL_GET_DATABASE_INFO, 
          this.curServer.serverId, this.curServer.appId);
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.dbInfo = result.data;
        }
      })
    },

    listTableInfo() {
      let url = Util.fillUrlArgments(this.commonUrl.URL_LIST_SQL_TABLES_INFO, 
          this.curServer.serverId, this.curServer.appId);
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.tableData = result.data;
        }
      })
    },

    handleShowTableList() {
      this.showDrawer = true;
      this.listTableInfo();
    }
  },

  watch: {
    curServer: {
      handler(_newName, _oldName) {
        this.refreshDatabaseInfo();
      },
      immediate: false
    }    
  },

  mounted() {
  	this.showDatabaseInfo();

    //设置访问统计数据刷新定时器
    this.refreshTimer = setInterval(() => {
      this.refreshDatabaseInfo();
    }, Constant.INTERVAL_SYSTEM_DB_INFO);
  },

  destroyed() {
    clearInterval(this.refreshTimer);
  }
}
</script>

<style scoped>
.index-area {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content : space-between;
  text-align: left;
  border: solid 0px;
}
.index-title {
  margin-bottom:20px;
  width:100%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.db-index {
  width: 13%;
  height: 120px;
  border: solid #c3c3c3 2px;
}
p.title1 {
  margin: 15px 0 24px 20px;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
}
p.title2 {
  margin: 15px 0 12px 20px;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
}
p.table-name {
  margin-top: 0;
  text-align: center;
  font-size: 13px;
}
p.text {
  margin-top: 0;
  text-align: center;
  font-size: 23px;
}

.drawer-header {
  height: 70px;
  padding-top: 22px;
  text-align: center;
  border: solid 0px;
}
.drawer-content {
  margin: 0 20px;
  text-align: left;
  font-size: 16px;
  overflow: scroll;
  border: solid 1px;
}
</style>