<template>
  <div class="content-main-manage">
    <div class="manage-main-center">
      <!-- <div style="display: flex;justify-content: space-between;">
        <div v-for="(item,index) in columns1" :key="index"  style="display: flex;flex:1;align-items: center;justify-content: center;">
       {{item.title}}<br>
       告警数丨告警设备数
      </div>
      </div>
       <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
          <div v-for="(item,index) in data1" :key="index"  style="display: flex;flex:1;align-items: center;justify-content: center;">
          <span>{{item.num1}} {{item.num2}}</span>
        </div>
      </div> -->
       <!--今日告警表格 -->
       <!-- <div>
         <div v-for="(item,i) in testTableData" :key="i">
          <div>{{item.name}} {{item.alarmNum}}{{item.alarmEquip}} {{item.alarm1}}{{item.alarmEquip1}}</div>
         </div>
       </div> -->
     <Table :columns="columns1" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading" @on-cell-click="cellClick">
        <template slot="loading">
            <Loading-animation></Loading-animation>
        </template>
        <!-- <template slot-scope="{ row,index }" v-for="(item,i) in testColumns" :slot="item.slot" >
          <span v-if="i==0" style="text-decoration: underline;cursor: pointer;}">{{row.name}}</span>
          <template v-else>
            <span style="display:inline-block;width:49%;text-align:right;color:#F8952B;text-decoration: underline;cursor: pointer;}">
              {{row.alarmNum}} {{row.alarm1}}
            </span>
            <span style="display:inline-block;width:2%;">丨</span>
            <span style="display:inline-block;width:49%;text-align:left;padding-left:4px;text-decoration: underline;cursor: pointer;">
              {{row.alarmEquip}}
            </span>
          </template>
      </template> -->
     </Table>
    </div>
  </div>
</template>
<script>
export default {
  name: "AlarmToday",
  components:{
  },
  data() {
    return {
      loading: false,
       columns1: [],
      // testColumns: [{title:'设备',key:'name',align: 'center'},{title:'线网',key:'alarmNum',align: 'center'},{title:'1号线',key:'equipmentTypeName',align: 'center'}],
      // testTableData: [{alarmNum:1,alarmEquip: 2,name:'UPS',alarm1:1111111111,alarmEquip1: 22222222,},{alarmNum:67,alarmEquip: 672,name:'UPS2'},{alarmNum:8,alarmEquip: 72,name:'UPS3'}],
      tableData: [],
      rowObj: {},
      columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '告警等级',
            key: 'alertRankName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '警示颜色',
            slot: 'alertRankColor',
            align: 'center',
          },
          {
            title: '设备类型',
            key: 'equipmentTypeName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '设备名称',
            key: 'equipmentName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '告警内容',
            key: 'alertContent',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '来源应用',
            key: 'appName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          }, 
          {
            title: '告警时间',
            key: 'alertTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '处理状态',
            key: 'processingStatusDesc',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 160,
        }
      ],
    };
  },
  mounted() {
    // this.initTableColumn('columns1');
    this.getTableData()
  },
  methods: {
    initTableColumn(columnName){
      for(let i = 0; i < this[columnName].length; i++){
        if(!this[columnName][i].renderHeader) {
          // this.$set(this[columnName][i], 'ellipsis', true);
          this.$set(this[columnName][i], 'renderHeader', (h, params) => {
            let text = ''
            let lineName = ''
            if (this[columnName][i].title == '设备') {
              text = this[columnName][i].title
            } else {
              if (this[columnName][i].title == '线网') {
                text = `<span>${this[columnName][i].title}</span><br/> <span style="color:#82ABEE">告警数丨告警设备数</span>`
              } else {
                if (this[columnName][i].title.length > 10) {
                  lineName = this[columnName][i].title.substring(0, 10) + "...";
                } else {
                  lineName = this[columnName][i].title
                }
                text = `<span style="text-decoration: underline;cursor: pointer;">${lineName}</span><br/> <span style="color:#82ABEE">告警数丨告警设备数</span>`
              }
             }
              return h('div', [
              　　　　h('Tooltip', {
              　　　　props: { placement: 'bottom', transfer: true,disabled:this[columnName][i].title .length<=10,maxWidth:400}
              　　　　}, [
              　　　　h('span', {
                     domProps:{
                      innerHTML: text
                    },
                     on: {
                        mousedown: (e) => {
                          //自定义列头的右击事件
                          this.headerClick(params.column);
                        },
                      },
                    }),
              　　　　　　h('span', {
              　　　　　　　　slot: 'content',
              　　　　　　　　style: { whiteSpace: 'normal', wordBreak: 'break-all' }
              　　　　　　},this[columnName][i].title)
              　　　　])
              　　])
            // return h('div', {
            //     domProps:{
            //       innerHTML: text
            //     },
            //     on: {
            //       mousedown: (e) => {
            //         //自定义列头的右击事件
            //         this.headerClick(params.column);
            //       },
						//     },
            // })
          });
          this.$set(this[columnName][i], 'render', (h, params) => {                  
            let renderText = ''
            if (this[columnName][i].title == '设备') {
              let equipmentTypeName = ''
              if (params.row.equipmentTypeName && params.row.equipmentTypeName.length > 10) {
                equipmentTypeName = params.row.equipmentTypeName.substring(0, 10) + "...";
              } else {
                equipmentTypeName = params.row.equipmentTypeName
              }
              renderText = `<span style="text-decoration: underline;cursor: pointer;">${equipmentTypeName}</span>`
            } else {
              renderText =  `<span style="color:#F8952B;text-decoration: underline;cursor: pointer;">${params.row['alertNum'+i]}</span><span style="text-decoration: underline;cursor: pointer;">丨${params.row['equipmentNum'+i]}</span></span>`;
            }
            return h('div', [
              　　　　h('Tooltip', {
              　　　　props: { placement: 'bottom', transfer: true,disabled:params.row.equipmentTypeName.length<=10, maxWidth:400}
              　　　　}, [
              　　　　h('span', {
                     domProps:{
                      innerHTML: renderText
                    },
                    }),
              　　　　　　h('span', {
              　　　　　　　　slot: 'content',
              　　　　　　　　style: { whiteSpace: 'normal', wordBreak: 'break-all' }
              　　　　　　},params.row.equipmentTypeName)
              　　　　])
              　　])
            // return h('div', {
            //     domProps:{
            //       innerHTML: renderText
            //     },
            // })
          });
        }
      }
    },
    headerClick (column) {
      let keywords = ''
        if (column.title == '设备' || column.title == '线网') {
          return
        } else {
          keywords = column.title
          sessionStorage.setItem("currentTabs",'实时告警列表-线网视图')
        }
        let skipParams = {
          keywords: keywords,
          todayText: '今日',
        }
        this.$emit('skipEquipTabs',skipParams)
    },
    cellClick (row, column, data, event) {
      let keywords = ''
      if (column.title == '设备') {
        keywords = ''
        sessionStorage.setItem("currentTabs",'实时告警列表-设备视图')
      } else {
        if (column.title == '线网') {
          keywords = ''
        } else {
          keywords = column.title
        }
       sessionStorage.setItem("currentTabs",'实时告警列表-线网视图')
      }
      let skipParams = {
        keywords: keywords,
        todayText: '今日',
        equipmentTypeId: row.equipmentTypeId
      }
      this.$emit('skipEquipTabs',skipParams)
    },
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    selectChange (selection) {
      this.idArr = selection.map(item => item.id)
    },
    // 获取表格数据
    getTableData () {
      this.loading = true
      this.$get('metroapi/alert/processing/todayAlert/list').then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.columns1 = res.data.category.map((item)=> {
              let keyName = ''
              if (item == '设备') {
                keyName = 'equipmentTypeName'
              }
              return {title: item,key: keyName,align: 'center'}
            })
            this.initTableColumn('columns1')
            this.tableData = res.data.data
            this.tableTotal = res.data.count
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    }, 
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  position: relative;
  height: 100%;
}
.common-form {
  display: flex;
  flex-wrap: wrap;
}
>>> .common-form-list .ivu-form-item {
  margin-bottom: 10px;
}
.manage-main-center {
  width: 100%;
  height: 100%;
}
.common-table {
  height: 100%;
}
>>> .common-table .ivu-table-body {
  max-height: calc(100% - 50px);
  overflow: hidden;
  overflow-y: auto;
}
>>> .common-table .ivu-table th {
  height: 50px;
 }
 >>> .common-table .ivu-table td {
  height: 49.5px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 50px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 375px);
 }
 >>> .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .app-table .ivu-table-tip {
  height: calc(100vh - 375px);
 }
 >>> .common-table .ivu-table-tip table {
 display: none;
}
 >>> .modal-table {
   overflow: auto !important;
 }
 >>> .modal-table .ivu-spin-fix {
   height: 200px;
 }
  >>> .modal-table .ivu-table-tip {
   height: 200px;
 }
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
.common-form-item-text {
  font-size: 11px;
  color: #85A3D4;
  margin: 10px 0;
}
/deep/ .ivu-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
.common-modal-select {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  margin-left: 35PX;
}
</style>