<!-- 报警记录 -->
<template>
  <div class="alarm-record">
    <div class="header">
      <div class="left">
        <el-button class="btn" @click="goPage">趋势分析</el-button>
      </div>
      <div class="center">
        {{$x_factory.plantName}}{{$x_crew ? ' - ' + $x_crew.shortName : ''}} - 报警记录
        <!-- {{$x_factory.plantName}} - 报警记录 -->
      </div>
      <div class="right">
        <span class="txt">仅显示报警中</span>
        <el-switch v-model="tableQuery.onlyWarn" active-color="#0984FF" @change="changeState" />
      </div>
    </div>
    <div class="main global">
      <div class="table">
        <el-table ref="table" :data="tableData" height="100%" @selection-change="selectTable" @row-click="switchSelect"
          v-loading="loadingtable" :element-loading-background="loadingColor">
          <el-table-column type="selection" min-width="5%" align="center" :selectable="tableCanSelect"></el-table-column>
          <el-table-column type="index" label="序号" min-width="5%" align="center"></el-table-column>
          <el-table-column label="机组名称" min-width="10%" align="center">
            <template v-slot="scope">
                {{scope.row.deviceId | getDeviceNameById}}
            </template>
          </el-table-column>
          <el-table-column prop="kkscode.cpName" label="测点名称" min-width="20%" align="center"></el-table-column>
          <el-table-column prop="kkscode.kksCode" label="测点编码" min-width="20%" align="center"></el-table-column>
          <el-table-column prop="kkscode.cpUnit" label="单位" min-width="5%" align="center"></el-table-column>
          <el-table-column prop="value" label="报警值" min-width="10%" align="center">
			  <template v-slot="scope">
				  <div class="warn-state" :style="{color: getWarnColor(scope.row.alertStat)}">
					<i class="el-icon-warning-outline" />{{scope.row.value}}
				  </div>
			  </template>
		  </el-table-column>
          <el-table-column label="报警时刻" min-width="15%" align="center">
            <template v-slot="scope">
                {{scope.row.valueTime | dateFormat('YYYY/MM/DD HH:mm:ss')}}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="10%" align="center">
            <template v-slot="scope">
              <el-button v-if="!scope.row.eventInfo" class="table-btn" type="text" size="small" @click.stop="delForm(scope.row)">解除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="page" layout="prev, pager, next" :total="tableTotal" @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
  import {
    ChartStyle
  } from '@/common/const.js';
  import {
    dateFormat,
    getDeviceNameById,
	getWarnColor
  } from '@/common/util.js';
  import Warn from '@/api/warn.js';
  export default {
    components: {},
    data() {
      return {
        loadingtable: false,
        loadingColor: ChartStyle.loadingColor,
        // 查询参数
        tableQuery: {
          onlyWarn: false, // 是否仅显示正在报警中的记录
          pageNo: 0, // 0为第一页
          pageSize: 10
        },
        tableData: null,
        tableTotal: 100,
        pointList: [], // 表格里选择的报警点
        pointListMax: 12, // 报警最多选择数量
        // 报警表格是否可选，小于5个点可选，大于5个点，则已选的点可选
        tableCanSelect: row => this.pointList.length < this.pointListMax || this.pointList.find(i => i.id ==row.id),
		getWarnColor: getWarnColor,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      // 跳转到趋势分析
      goPage() {
        if(!this.pointList.length) {
          this.$message.warning('请选择一个测点');
          return;
        }
        this.$router.push('/TrendAnalysis?pointList=' + JSON.stringify(this.pointList));
      },
      // 返回上一页
      back() {
        this.$router.go(-1);
      },
      // 获取报警记录
      async getList() {
        // this.tableData = this.initWarnRecordData();
        this.loadingtable = true;
        try {
          if(this.$x_crew) this.tableQuery.deviceId = this.$x_crew.deviceId;
          else this.tableQuery.plantId = this.$x_factory.plantId;
          // this.tableQuery.plantId = this.$x_factory.plantId;
          if(this.tableQuery.onlyWarn) this.tableQuery.eventInfo = 0;
          else delete this.tableQuery.eventInfo;
        	let res = await Warn.getWarnList(this.tableQuery);
        	this.tableData = res.content;
        	this.tableTotal = res.totalElements;
        } catch (e) {
        	console.log(e);
        }
        this.loadingtable = false;
      },
      // 翻页
      pageChange(val) {
        this.tableQuery.pageNo = val - 1;
        this.getList();
      },
      // 改变状态筛选
      changeState(val) {
        this.tableQuery.pageNo = 0;
        this.getList();
      },
      // 表格里选择报警点
      selectTable(row) {
        // 如果是增加操作，则去重，并只保留5个
        if (row.length > 1 && row.length > this.pointList.length) {
          let map = {},
            hasSame = false,
            count = this.pointListMax;
          for (let i = 0; i < row.length; i++) {
            let item = row[i];
            if (!map[item.kkscode.kksCode] && count > 0) {
              map[item.kkscode.kksCode] = 1;
              count--;
            } else {
              if (map[item.kkscode.kksCode]) hasSame = true;
              this.$refs.table.toggleRowSelection(item);
              row.splice(i, 1);
              i--;
            }
          }
          // if (hasSame) this.$message.warning('已过滤相同测点');
        }
        this.pointList = row.map(i => {
          return {
            id: i.id,
            kksCode: i.kkscode.kksCode,
            deviceId: i.deviceId
          }
        });
      },
      // 点击表格行时,切换选中
      switchSelect(row) {
        if (this.tableCanSelect(row)) this.$refs.table.toggleRowSelection(row);
        else this.$message.warning('最多选择' + this.pointListMax + '个');
      },
      // 解除报警
      async delForm(row) {
        if (!row.id) return;
        try {
          await this.$confirm('确认解除报警？');
          await Warn.changeState({id: row.id, eventInfo: 1});
          this.$message.success('解除成功！');
          if (this.tableData.length == 1 && this.tableQuery.pageNo != 0) this.tableQuery.pageNo--; // 如果删除时是当前页的最后一条，则页数往前翻一页
          this.getList();
        } catch (e) {
          console.log(e);
        }
      },
      // 模拟报警记录
      initWarnRecordData() {
        let param = {
          size: 20, // 数据数量
          item: [{
              kkscode: {
                cpName: '本体温度',
                kksCode: 'C0A00101MKA20CT001',
                cpUnit: '℃',
              },
              value: 54,
              alertLimit: 87,
              valueTime: '2020/03/27 02:43'
            },
            {
              kkscode: {
                cpName: '绝缘过热',
                kksCode: 'C0A00101MKA20CT002',
                cpUnit: '℃',
              },
              value: 48,
              alertLimit: 73,
              valueTime: '2020/02/12 08:12'
            },
            {
              kkscode: {
                cpName: '氢参数',
                kksCode: 'C0A00101MKA20CT003',
                cpUnit: 'kv',
              },
              value: 239,
              alertLimit: 252,
              valueTime: '2020/03/25 13:32'
            },
            {
              kkscode: {
                cpName: '密封参数',
                kksCode: 'C0A00101MKA20CT004',
                cpUnit: 'mm',
              },
              value: 132,
              alertLimit: 164,
              valueTime: '2020/03/26 00:23'
            },
            {
              kkscode: {
                cpName: '定转子冷却参数',
                kksCode: 'C0A00101MKA20CT005',
                cpUnit: 'cm',
              },
              value: 302,
              alertLimit: 328,
              valueTime: '2020/03/22 16:04'
            },
            {
              kkscode: {
                cpName: '润滑参数',
                kksCode: 'C0A00101MKA20CT006',
                cpUnit: 'p',
              },
              value: 210,
              alertLimit: 234,
              valueTime: '2020/03/23 18:19'
            },
            {
              kkscode: {
                cpName: '外部冷却水',
                kksCode: 'C0A00101MKA20CT007',
                cpUnit: '℃',
              },
              value: 109,
              alertLimit: 124,
              valueTime: '2020/03/14 18:59'
            },
            {
              kkscode: {
                cpName: '化学参数',
                kksCode: 'C0A00101MKA20CT008',
                cpUnit: 'ml',
              },
              value: 214,
              alertLimit: 238,
              valueTime: '2020/03/10 23:19'
            },
            {
              kkscode: {
                cpName: '轴振监测',
                kksCode: 'C0A00101MKA20CT001',
                cpUnit: 'cm',
              },
              value: 195,
              alertLimit: 228,
              valueTime: '2020/03/11 05:28'
            },
            {
              kkscode: {
                cpName: '转速监测',
                kksCode: 'C0A00101MKA20CT001',
                cpUnit: 'm',
              },
              value: 323,
              alertLimit: 298,
              valueTime: '2020/03/13 12:41'
            }
          ],
        };
        let arr = [];
        for (let i = 0; i < param.size; i++) {
          let r = Math.floor(Math.random() * param.item.length);
          let item = Object.assign({}, param.item[r]);
          item.id = i + 1;
          arr.push(item);
        }
        return arr;
      }
    },
    filters: {
      getDeviceNameById(id) {
        return getDeviceNameById(id);
      },
      dateFormat(date, format){
          return dateFormat(new Date(date), format);
      },
    }
  };
</script>

<style lang="scss" scoped>
  .alarm-record {
    height: 100%;
    padding: 1.875rem 3.125rem;
    box-sizing: border-box;

    .header {
      height: 4.25rem;
	  line-height: 4.25rem;
      background-image: linear-gradient(270deg, rgba(197, 254, 255, 0.10) 0%, rgba(147, 252, 255, 0.50) 52%, rgba(147, 252, 255, 0.10) 100%);
      padding: 0 1.875rem;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        z-index: 1;
        height: 2.5rem;

        .btn {
          @extend %btn-default;
          margin: 0 1rem 0 0;
        }

        .btn:hover {
          @extend %btn-hover;
        }
      }

      .center {
        @extend %pos-center;
        font-size: 1.625rem;
        letter-spacing: 0.1625rem;
        text-shadow: 0 2px 8px rgba(78, 97, 214, 0.50);
      }

      .right {
        z-index: 1;
        
        .txt{
          margin-right: 0.5rem;
        }
      }
    }

    .main {
      height: calc(100% - 4.25rem);
      background: rgba(147, 252, 255, 0.08);
      padding: 1.875rem 1.875rem 0;
      box-sizing: border-box;

      .table {
        height: calc(100% - 40px);
		.warn-state{
			i{
				margin-right: 0.3rem;
			}
		}
        .table-btn {
          color: $color-cyan;
        }
      }

      .page {
        margin: 0.3125rem 0;
      }
    }
  }
</style>
