<template>
 <div class="database-watch">
   <el-row :gutter="20">
     <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
       <div class="my-content">
         <div class="my-b-title2">数据库综合情况</div>
         <div class="m-t-c">
           <div class="database-l">
              <div class="database-l-item">
                <div class="b-title">数据库最大连接数</div>
                <div class="b-num">{{zhForms.MAX_LJS}}</div>
              </div>
             <div class="database-l-item">
               <div class="b-title">数据库当前连接数</div>
               <div class="b-num">{{zhForms.LJS}}</div>
             </div>
             <div class="database-l-item">
               <div class="b-title">数据库当前锁死数</div>
               <div class="b-num">{{zhForms.LOCKS_NUM}}</div>
             </div>
           </div>
           <div class="database-r">
             <div class="r-t">
               <div class="echarts-t">数据库进程检测</div>
               <div class="time-filter">
                 <span v-for="item in echartsCirclyArr" @click="changeTimeFilter(item)" :key="item.value" :class="{'active':item.value === filterTime}">
                   {{item.name}}
                 </span>
               </div>

             </div>
             <div ref="echartsRef" class="echarts"></div>
           </div>
         </div>
<!--         <div class="title">数据库综合情况</div>-->
<!--         <div class="main-bottom">-->
<!--           <el-row :gutter="20">-->
<!--             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--               <div class="kuang">-->
<!--                 <div class="kuang-t">数据库当前连接数</div>-->
<!--                 <div class="b-info">-->
<!--                   <div>-->
<!--                     <span class="circle">1</span>-->
<!--                     <span class="num">{{infoObj.LJ1}}</span>-->
<!--                   </div>-->
<!--                   <div>-->
<!--                     <span class="circle">2</span>-->
<!--                     <span class="num">{{infoObj.LJ2}}</span>-->
<!--                   </div>-->
<!--                 </div>-->
<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--               <div class="kuang">-->
<!--                 <div class="kuang-t">数据库当前游标数</div>-->
<!--                 <div class="b-info">-->
<!--                   <div class="num">{{infoObj.YB}}</div>-->
<!--                 </div>-->

<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--               <div class="kuang">-->
<!--                 <div class="kuang-t">数据库当前死锁数</div>-->
<!--                 <div class="b-info">-->
<!--                   <span class="iconfont icon-lock"></span>-->
<!--                   <div class="num">{{infoObj.SS}}</div>-->
<!--                 </div>-->

<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--               <div class="kuang">-->
<!--                 <div class="kuang-t">数据库排队等待</div>-->
<!--                 <div class="b-info">-->
<!--                   <span class="icon-loading-v iconfont"></span>-->
<!--                   <div class="num">0</div>-->
<!--                 </div>-->
<!--               </div>-->
<!--             </el-col>-->
<!--           </el-row>-->
<!--         </div>-->
       </div>
     </el-col>
<!--     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--       <div class="my-content e-c">-->
<!--         <div class="title">数据库进程检测</div>-->
<!--         <div ref="echartsRef" class="echarts">-->

<!--         </div>-->
<!--       </div>-->
<!--     </el-col>-->
   </el-row>
   <div class="my-content save">
     <div class="my-b-title2">
       <span>数据库存储情况</span>
       <span title="详情" @click="openModel" class="detail-icon"><img width="20" src="../../../../../assets/imgs/detail.png" alt=""></span>
     </div>
     <div class="t-area">
       <my-table
         row-key="UUID"
         lazy
         :is-has-order="false"
         :load="getTableTreeData"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         :each-tr-height="44"
         class="blue-table"
         :headers="databaseWatchTableHeader"
         :table-data="tableData"
       >
         <template #USERATIO="{data}">
           <el-progress v-if="data.level === 0"  :class="getUSERATIO(data).classN" :percentage="getUSERATIO(data).value"></el-progress>
<!--           {{data.level === 0?getUSERATIO(data):''}}-->
         </template>
         <template #REMARKS="{data}">
           {{data.level === 0?data['REMARKS']:''}}
         </template>
         <template #DATABASE_DISK_VISUAL="{data}">
           {{data.level === 0?data['DATABASE_DISK_VISUAL']:''}}
         </template>
         <template #FREE_SPACE="{data}">
           {{data.level === 0?data['FREE_SPACE']:''}}
         </template>

<!--         <template #REMARKS="{data}">-->
<!--           {{data.level === 0?data['REMARKS']:''}}-->
<!--         </template>-->

        <template #HOST_NAME="{data}">
          <el-link @click="openModelDiaObj(data)" type="primary"  v-if="data.level === 2">{{data.HOST_NAME}}</el-link>
          <span v-else>{{data.HOST_NAME}}</span>
        </template>

       </my-table>
     </div>
   </div>
   <template v-if="isDialogIsShow">
     <data-base-detail-dialolg :filter-obj="filterForm" v-model:dialog-visible="isDialogIsShow"/>
   </template>
 </div>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {databaseWatchTableHeader} from "@/data/all-table-header";
import {
  getDataBaseDetailInfo,
  getDataBaseProcess,
  getDataBaseProcessCheck,
  getDatabaseTableData,
  getDataBaseWatchSituation
} from "@/service/data-process-watch/data-base-watch";
import {setDataBaseWatchEcharts} from "@/echarts/option";
import DataBaseDetailDialolg from "@/view/other/c-views/process-watch/database-watch/DataBaseDetailDialolg.vue";
import {uuidv4} from "@/unit/code";

export default {
  name: "DataBaseWatch",
  components: {DataBaseDetailDialolg, MyTable},
  setup() {
    const zhForms = ref({

    })
    function openModel(){
      isDialogIsShow.value = true
      filterForm.value= null
    }
    const isDialogIsShow= ref(false)
    const filterTime= ref('实时')
    const echartsCirclyArr = [
      {name:'实时',value:'实时'},
      {name:'近一天',value:'日'},
      {name:'近一周',value:'周'},
      {name:'近一月',value:'月'},
      {name:'近一年',value:'年'},
    ]
    const infoObj = ref({
      SS:0,
      LJ1:0,
      LJ2:0,
      YB:0
    })
    const filterForm = ref({})
    function openModelDiaObj(obj){
      isDialogIsShow.value = true
      filterForm.value= obj
    }
    function getTableTreeData(row,treeNode,resolve){
      console.log('sads我是',row,treeNode)
      if (treeNode.level === 0){


        getDatabaseTableData({
          SERVER_DEPLOYMENT_ID:row.SERVER_ID
        }).then(res => {
          let dataA = []
          try {
            dataA = res.data.map(i => {
              return {
                ...i,
                HOST_NAME:i.DATABASE_NAME,
                IN_TOTAL:i.SIZE,
                hasChildren:true,
                UUID:uuidv4(),
                level:1,
                children:[],
                service:row.SERVER_ID
              }
            })
          }catch {
            dataA = []
          }

          resolve(dataA)
        })
      }else{
        let dataA = []
        getDatabaseTableData({
          SERVER_DEPLOYMENT_ID:row.service,
          DATABASE_NAME:row.DATABASE_NAME
        }).then(res => {
          dataA = res.data.map(i => {
            return {
              ...i,
              HOST_NAME:i.SCHEMA_NAME,
              level:2,
              service:row.service,
              database:row.HOST_NAME,

            }
          })
          resolve(dataA)
        })

      }

    }

    function getFreeSpace(row){
      return  row.TABLESPACENAME !== 'BFKJ'?row.TABLESPACESIZE:row.BFKJ_TOTAL_MB
    }
    function getTotalSpace(row){
      return  row.TABLESPACENAME !== 'BFKJ'?row.FREETIME:row.BFKJ_TOTAL_MB
    }
    function getUSERATIO(row){

      let value
      try {
       value = (row.USE_SPACE_MB / row.TOTLE_SPACE_MB * 100).toFixed(2)
      }catch {
        value = 0
      }

      let classN = value < 65?'green':(value <85?'yellow':'red')
      let percentage = {
        value:value,
        classN:classN
      }
      return  percentage
    }
    function getSpaceIntro(data){
       if (data.TABLESPACENAME == "BFKJ"){
         return '备份使用空间'
       }else if(data.TABLESPACENAME == "PTGL"){
         return '存放业务数据'
       }else if (data.TABLESPACENAME === 'GXJH'){
         return '存放交换数据'
       }else if (data.TABLESPACENAME === 'XYXX'){
         return '存放信用数据'
       }else if (data.TABLESPACENAME === 'HXKJ'){
         return '存放核心的空间数据'
       }else if (data.TABLESPACENAME === 'ZWXX'){
         return '存放政务数据'
       }else if (data.TABLESPACENAME === 'LSKJ'){
         return '临时空间'
       }
    }
    const echartsRef =ref([])
    function getUsedSpace(row) {
     let userSpace =  (row.BFKJ_TOTAL_MB - row.BFKJ_FREE_MB)
      return  row.TABLESPACENAME !== 'BFKJ'?row.USEDSPACE:userSpace

    }
    function setSaveEcharts(){
      getDataBaseProcess(filterTime.value).then(res => {

        let data =res.msg[0].Rows
        setDataBaseWatchEcharts(echartsRef.value,data.map(i => i.SC_DATETIME),data.map(i => i.COUNT1))
      })
    }
   onBeforeMount(() => {
     getDatabaseTableData().then(res => {

       try {
         tableData.value = res.data.map(i => {
           return {
             ...i,
             hasChildren: true,
             UUID:i.SERVER_ID,
             level:0
           }
         })
       }catch {

       }
     })
     setSaveEcharts()
     getDataBaseWatchSituation().then(res => {
       let data = res.msg[0].Rows[0]
       zhForms.value ={
         ...data
       }
     })

   })
    function changeTimeFilter(item){
      filterTime.value = item.value
      setSaveEcharts()
    }
    const tableData = ref([])
    return {
      tableData,
      databaseWatchTableHeader,
      infoObj,
      echartsRef,
      echartsCirclyArr,
      filterTime,
      changeTimeFilter,
      isDialogIsShow,
      openModel,
      getTableTreeData,
      openModelDiaObj,
      filterForm,
      zhForms,
      getUSERATIO

    }
  }
}
</script>

<style scoped lang="scss">
.my-content{
  .m-t-c{
    .echarts-t{
      font-size: 14px;
      font-weight: 600;
    }
    .database-r{
      display: flex;
      flex-direction: column;
      .r-t{
        .time-filter{
          margin-right: 10px;
          span{
            &.active{
              color: #fff;
              background: #108EE9;
            }
            cursor: pointer;
            padding: 3px 10px;
            display: inline-block;
            margin-right: 15px;
          }
        }
        justify-content: space-between;
        display: flex;
      }
      margin-left: 100px;
      flex: 1;
      overflow: hidden;
    }
    .database-l{
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .b-num{
        font-weight: 600;
        font-size: 24px;
      }
      .b-title{
        font-size: 14px;
      }
    }

    display: flex;
    flex: 1;
    overflow: hidden;
  }
  display: flex;
  flex-direction: column;
}
.my-b-title2{
  display: flex;
  justify-content: space-between;

  .detail-icon{
    cursor: pointer;
    position: relative;
    top: -2px;
    margin-left: auto;
  }
  font-size: 16px;
  font-weight: 600;
  padding: 14px;
  padding-left: 20px;
  border-bottom: 1px solid var(--el-border-color);

}
.echarts{
  margin-right: 20px;
  flex: 1;
  overflow: hidden;
}
 .database-watch {
   .t-area{
     padding: 20px;
   }
   background: transparent !important;
  .my-content{
    .m-t-c{
      padding: 20px;
    }
    &.save{
      margin-top: 12px;
    }
    .b-info{
      font-size: 26px;
      font-weight: 700;
      color: #36629E;
      >div:nth-child(1){
        margin-right: 20px;
      }
      position: relative;
      .circle{

         vertical-align: top;

        display: inline-block;
        width: 16px;
        height: 16px;
        background: #7296C6;
        font-size: 12px;
        color: #fff;
        border-radius: 50%;
      }
      margin-top: 12px;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    .num{

      display: inline-block;
      margin: 7px;

    }
    .kuang-t{
      text-align: center;
      font-weight: 500;
      font-size: 15px;
      font-family: '微软雅黑';
      color: #416AA0;
    }
    .main-bottom{
      text-align: center;
      margin-left: 20px;
      margin-right: 20px;
    }
    .kuang{

      margin-top: 10px;
      height: 100px;
      border-radius: 4px;
      border: 1.2px solid #37649C;
      padding-top: 10px;
    }
    box-shadow: 0 0 6px #ECF1F7;
    background: #fff;

    .title{

      border-radius: 0 30px 30px 0;
      padding: 3px 10px;
      margin-top: 15px;
      display: inline-block;
      font-size: 14px;
      color: #37649C;
      font-weight: 600;
      background-color: #DAEBFF;
    }
    min-height: 400px;
  }
 }
:deep{
  .el-progress.green .el-progress__text{
    color: #65c100;
  }
  .el-progress.yellow .el-progress__text{
    color: #FFA700;
  }
  .el-progress.red .el-progress__text{
    color: #FF0000;
  }
}
</style>
