<template>
  <div class="serverList">
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <div class="tableCon" ref="tableDataRef">
     <!--  分页栏 -->
      <!-- 搜索 
      <div class="tableTop">
        <el-form :inline="true" class="searchForms searchCommon"> 
            <el-input v-model="logName" placeholder="输入IP/主机名称或实例ID进行搜索" style="width: 300px;"></el-input>
          <el-form-item style="margin-right:0;">
            <el-button type="primary" icon="search" :loading="isQuery" @click="searchHandler">搜索</el-button>
          </el-form-item>
        </el-form>      
      </div> -->
      <!-- 表格 -->  
      <table-form
        v-loading.body="isLoadingTableData" 
        :colData="colData" :data="tableData"    
        :row-key="rowKey" 
        :max-height="height" 
        :submiting="submiting" 
        :isShowOper="isShowOper" 
        border 
        :stripe="true"
        :sortable="sortable" 
        :row-class-name="tableRowClassName">
        <el-table-column 
          v-if="reserveSelection" 
          :reserve-selection="reserveSelection" 
          type="selection" 
          width="35">
        </el-table-column>
        <el-table-column 
          v-for="item in colData" 
          :key="item.prop" 
          :prop="item.prop" 
          :label="item.label" 
          :width="item.width" 
          :align="item.align" 
          :sortable="item.sortable || sortable">
           <template slot-scope="scope">
            <div v-if="item.prop === 'pluginstatus'">          
              {{ scope.row.pluginstatus === '01' ? '运行中': '已停止' }}        
            </div>
            <div v-else-if="item.prop === 'cpuusage'">
              {{ scope.row.cpuusage }}  %
            </div>
            <div v-else-if="item.prop === 'memusage'">
              {{ scope.row.memusage }}  %
            </div>
            <div v-else-if="item.prop === 'diskusage'">
              {{ scope.row.diskusage }}  %
            </div>
            <span v-else>{{ scope.row[item.prop] }}</span>       
          </template>
        </el-table-column>
     <!-- 操作 -->
        <el-table-column slot="fixedColumn" label="操作" fixed="right" width="250" align="center">
           <template slot-scope="scope">
          <el-button style="display:inline-block;margin-left:4px;margin-bottom:2px;"
              size="mini"
              plain
              @click="handleEdit($event, scope.row)">
              监控图表
            </el-button>
          <el-button
              size="mini"
              plain
              @click="handleAlarm($event,scope.row)">
              报警规则
            </el-button>
            </template>
        </el-table-column>
      </table-form>
      <!-- 分页 -->
      <el-row type="flex" justify="end" class="tableBottom">
        <el-pagination 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="currentPage" 
          :page-sizes="pageSizes" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
        </el-pagination>
      </el-row>
    </div>  
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import TableForm from '@/components/Table.vue'

import Api from '@/api/index.js'

export default {
  name: 'ServerList',
  components: {
    BreadCrumb,
    TableForm
  },
  data () {
    return {
      hostid: '',
      dialogLoading: false,
      breadCrumbList: [], // 面包屑
      /* -- 表格数据 -- */
      isQuery: false,
      colData: [], // 表格信息
      tableData: [],
      rowKey: 'id',
      userguid: '',
      submiting: false,
      sortable: true,
      isShowOper: false,
      selectionData: [], // 已勾选数据列表
      /* --- 分页 -- */
      reserveSelection: true,
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 50, 100],
      total: null,
      height: '330',
      isLoadingTableData: false,
      checkAll: true,
      roleId: '',
      index: null // 当前行
    }
  },
  computed: {
    gisopUserInfo() {
      return this.$store.state.gisopUserInfo
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.handleFn)
  },
  created() {
    this.getselectServersByPage()
  },
  mounted() {
    this.breadCrumbList = [
      { title: '服务器监控' },
      { title: '主机监控' }
    ]
    this.colData = [
      { prop: 'servername', label: '实例name/主机名', width: '200', sortable: false, align: 'center' },
      { prop: 'pluginstatus', label: '插件状态', width: '140', sortable: true, align: 'center' },
      { prop: 'agentversion', label: '插件版本', width: '140', sortable: true, align: 'center' },
      { prop: 'serverip', label: 'IP', sortable: true, align: 'center' },
      { prop: 'cpuusage', label: 'CPU使用率', width: '160', sortable: true, align: 'center', cpuratio: '' },
      { prop: 'memusage', label: '内存使用率', width: '160', sortable: true, align: 'center', memratio: '' },
      { prop: 'diskusage', label: '磁盘使用率', width: '160', sortable: true, align: 'center', diskratio: '' }
      ]
    this.loginduserguid = this.gisopUserInfo.userguid
    if (this.loginduserguid === undefined) {
      return false
    } else {
      this.loginduserguid = this.loginduserguid.trim()
    }
     // 钩子
    this.$nextTick(() => {
      this.handleFn()
    })
    window.addEventListener('resize', this.handleFn)
  },
  watch: {
    gisopUserInfo (val) {
      if (val.userguid === undefined) {
        return false
      } else {
        this.loginduserguid = val.userguid.trim()
      }
    }
  },
  methods: {
    tableRowClassName (row, index) {
      if (index === this.index) {
        return 'info-row'
      }
      return ''
    },
    // resize的函数
    handleFn () {
      this.height = this.$refs.tableDataRef.clientHeight - 52
    },
     // 监控图表
    handleEdit (e, rowData) { 
      this.hostid = rowData.hostid
      this.$router.push({
        name: 'MonitorChart',
        params: {
          hostid: this.hostid
        }
      })
    },
    // 报警规则
    handleAlarm(e, rowData) {
      this.hostid = rowData.hostid
      this.$router.push({
        name: 'AlarmRules',
        params: {
          hostid: this.hostid
        }
        })    
    },
     // 分页操作
    handleSizeChange(val) {
      this.pageSize = val
      if (this.tableData !== null) {
        this.getselectServersByPage()
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      if (this.tableData !== null) {
        this.getselectServersByPage()
      }
    },
    // 获取服务器列表
    getselectServersByPage (currentPage, pageSize) {     
      this.currentPage = currentPage
      this.pageSize = pageSize
        Api.getselectServersByPage(this.currentPage, this.pageSize)
        .then(data => {
        this.isLoadingTableData = false
        let datas = data.data
        if (data.status === 0) {
          if (datas.total > 0) {
           this.tableData = datas.data 
           this.total = datas.total     
          } else {           
            this.$message({
              type: 'warning',
              message: '获取数据为空！'
            })
          }
        } else {
          this.$message({
            type: 'error',
            message: '获取数据失败！'
          })
        }
      })    
    }
  /*   // 查询
    searchHandler () {
      this.getPartList()
    } */
    }
}

</script>
<style lang="scss">
.serverList {
  width: 100%;
  position: relative;
  overflow: hidden;

  .tableCon {
    width: 100%;

    .tableTop {
      height: 60px;
      line-height: 38px;
      padding: 10px 10px;
      overflow: hidden;

      .searchForms {
        float: left;
      }
      .btnHandle {
        float: right;
      }
    }
    .tableBottom {
      padding: 15px 10px 0;
      height: 51px;
    }
  }
}

</style>
