<template>
  <div id='main' style="width: 100%; height: 100%;">
    <el-header height = "auto">
      <div class="header-button-box">
          <div class="search-input-box">
            <label style="font-size: small">数据库IP地址:</label>
            <el-select clearable size='mini' v-model="ipAddress"
                       style="width: 140px"
                       :placeholder="$t('common.placeholderSelect')">
              <el-option v-for="item in dataBaseIps"
                         :key="item.key"
                         :label="item.value"
                         :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="search-input-box">
            <label style="font-size: small">监控的性能事件:</label>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-button size='mini' icon="el-icon-search" style="margin-left: 10px" type="primary" @click="start()">
              {{ $t("common.look")}}
            </el-button>
          </div>
        <div class="search-input-box">
          <el-checkbox-group v-model="checkedMp" @change="handleCheckMpChange">
            <el-checkbox v-for="mp in monitorParams" :label="mp.id" :key="mp.id">{{mp.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </el-header>
      <vue-scroll>
        <el-main style="padding: 0px">
          <el-table v-for="(val, i) in tabData"
                    :data=val.tableData
                    :key="i"
                    :empty-text="$t('common.noData')"
                    tooltip-effect="dark"
                    stripe
                    style="margin-bottom: 20px"
                    max-height="500"
                    :header-cell-style="handleHead"
                    cell-class-name="table-cell"
                    border>
            <!--          header-row-class-name="table-header"-->
            <el-table-column align="center" :label="val.headName">
              <el-table-column
                v-for="(item, index) in val.tableLabel"
                :key="index"
                :prop="item.prop"
                :width="item.width"
                :label="item.label">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-main>
      </vue-scroll>
  </div>
</template>

<script>
import loading from '@/utils/Loading'
import HelperUtil from '../../utils/HelperUtil'
import DeviceService from '../../domain/services/DeviceService'

export default {
  name: 'DatabaseMonitor',

  data: function () { // 存放 数据
    return {
      databaseConfig: {},
      handleIP: {},
      ipAddress: '',
      dataBaseIps: [],
      isIndeterminate: false,
      checkAll: false,
      checkedMp: [],
      checkList: [],
      monitorParams: [
        {
          id: 1,
          name: '监控事例的等待'
        },
        {
          id: 2,
          name: '回滚段的争用情况'
        },
        {
          id: 3,
          name: '监控表空间的I/O比例'
        },
        {
          id: 4,
          name: '监控文件系统的I/O比例'
        },
        {
          id: 5,
          name: '在某个用户下查找所有的索引'
        },
        {
          id: 6,
          name: '监控SGA的命中率'
        },
        {
          id: 7,
          name: '监控SGA中字典缓冲区的命中率'
        },
        {
          id: 8,
          name: '显示所有数据库对象的类别和大小'
        },
        {
          id: 9,
          name: '监控SGA中重做日志缓存区的命中率，应该小于1%'
        },
        {
          id: 10,
          name: '监控内存和硬盘的排序比率，最好使它小于.10，增加sort_area_size'
        },
        {
          id: 11,
          name: '找ORACLE字符集'
        },
        {
          id: 12,
          name: '找使用CPU多的用户session'
        }
      ],
      tabData: [],
      tableData: [],
      tableLabel: [],
      returnList: null
    }
  },
  created: function () {
    this.init()
    this.getIp()
  },
  methods: {
    /**
     * @Description  : init
     * @author       : ls
     * @date         : 2020/11/11 17:28
     * @param        :
     * @return       :
     */
    init: function () {
      for (let i = 1; i < 13; i++) {
        this.checkList.push(i)
      }
    },
    /**
     * @Description  : getIp
     * @author       : ls
     * @date         : 2020/12/17 16:32
     * @param        :
     * @return       :
     */
    getIp: function () {
      this.databaseConfig = configSelf.oracleDatabaseConfig
      for (let t in this.databaseConfig) {
        this.dataBaseIps.push(
          {
            key: this.databaseConfig[t].ipAddress,
            value: this.databaseConfig[t].ipAddress
          }
        )
        this.handleIP[this.databaseConfig[t].ipAddress] = {
          userName: this.databaseConfig[t].userName,
          passWord: this.databaseConfig[t].passWord
        }
      }
    },
    /**
     * @Description  : start
     * @author       : ls
     * @date         : 2020/11/11 15:51
     * @param        :
     * @return       :
     */
    start: function () {
      let _this = this
      if (!(_this.ipCheck())) {
        return
      }
      if (_this.checkedMp.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DATA_MONITOR))
        return
      }
      let loadingInstance = loading.openLoading()
      var obj = {
        'ipAddress': this.ipAddress,
        'userName': this.handleIP[this.ipAddress].userName,
        'passWord': this.handleIP[this.ipAddress].passWord,
        'params': this.checkedMp
      }
      DeviceService.putDataQuery(obj).then(result => {
        _this.returnList = result
        _this.tabData = []
        _this.handleData()
        _this.Loading.closeLoading(loadingInstance)
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : handleData
     * @author       : ls
     * @date         : 2020/11/11 17:38
     * @param        :
     * @return       :
     */
    handleData: function () {
      for (let i in this.returnList) {
        if (this.returnList[i].result) {
          var arr = []
          for (let t in this.returnList[i].returnValue[0]) {
            arr.push(
              {
                label: t,
                prop: t
              }
            )
          }
          this.tabData.push(
            {
              'tableData': this.returnList[i].returnValue,
              'tableLabel': arr,
              'headName': this.monitorParams[i - 1].name
            }
          )
        } else {
          this.$message({
            message: this.monitorParams[i - 1].name.concat('查询失败！'),
            type: 'warning'
          })
        }
      }
    },
    /**
     * @Description  : handleTableData
     * @author       : ls
     * @date         : 2020/11/11 17:48
     * @param        :
     * @return       :
     */
    handleTableData: function (v, s) {
      var arr = []
      for (let t = 0; t < s.length; t++) {
        var obj = {
          // s[0]
        }
        arr.push(obj)
      }
    },
    /**
     * @Description  : handleCheckAllChange
     * @author       : ls
     * @date         : 2020/11/11 15:23
     * @param        :
     * @return       :
     */
    handleCheckAllChange: function (val) {
      this.checkedMp = val ? this.checkList : []
      this.isIndeterminate = false
    },
    /**
     * @Description  : handleCheckAllChange
     * @author       : ls
     * @date         : 2020/11/11 15:33
     * @param        :
     * @return       :
     */
    handleCheckMpChange: function (val) {
      let count = val.length
      this.checkAll = val.length === this.monitorParams.length
      this.isIndeterminate = count > 0 && count < this.monitorParams.length
    },
    /**
     * @Description  : handHead
     * @author       : ls
     * @date         : 2020/11/10 14:13
     * @param        :
     * @return       :
     */
    handleHead: function (v1, v2) {
      if (v1.rowIndex === 0 && v1.columnIndex === 0) {
        // return {'font-size': 'XX-large', 'background': '#78ed88'}
        return {'fontcolor': '#FFFFFF'}
      } else {
        return ''
      }
    },
    /**
     * @Description  : handleLabel
     * @author       : ls
     * @date         : 2020/11/10 10:19
     * @param        :
     * @return       :
     */
    handleLabel: function (val) {
      var a = []
      for (let i in val[0]) {
        a.push(
          {
            'label': i,
            'prop': i
          }
        )
      }
      return a
    },
    /**
     * @Description  : ipCheck
     * @author       : ls
     * @date         : 2020/12/11 9:49
     * @param        :
     * @return       :
     */
    ipCheck: function () {
      if (this.ipAddress === '') {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.ipDomain'))
        return false
      }
      var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      var re = new RegExp(reg)
      if (this.ipAddress === '') {
        return false
      }
      if ((!re.test(this.ipAddress))) {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.IPCHECK_CODE), this.$t('ResourceManagement.ipAddress'))
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
</style>
