<template>
  <div class="container">
    <BoardTopNav nowMenu="2"></BoardTopNav>
    <div class="num1">{{ num1 }}</div>
    <div class="num2">{{ num2 }}</div>
    <div class="title1">监控单元</div>
    <div class="title2">传感器</div>
    <div v-for="(i,k) in alarmCountGroupAlarmType" :class="'num'+(k+3)">
      {{ i.alarmCount }}
    </div>
    <div v-for="(i,k) in alarmCountGroupAlarmType" :class="'title'+(k+3)">
      {{ i.alarmTypeName }}
    </div>

    <div class="table1">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;width: 8%">
          告警编号
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 8%">
          告警类型
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 15%">
          告警单元
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 30%">
          告警信息
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 11%">
          告警位置
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 20%">
          告警时间
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 8%">
          处理情况
        </div>
      </div>
      <vue-seamless-scroll :class-option="{...chart1TableOption,limitMoveNum:8}" :data="table1Data" class="case-item"
                           style="height: calc(100% - 33px);overflow: hidden;">
        <div v-for="(item, index) in table1Data" :key="index">
          <div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
            <div class="scrollTable" style="width: 8%">
              {{ item.data1 }}
            </div>
            <div class="scrollTable" style="width: 8%">
              {{ item.data2 }}
            </div>
            <div class="scrollTable" style="width: 15%">
              {{ item.data3 }}
            </div>
            <div class="scrollTable" style="width: 30%">
              {{ item.data4 }}
            </div>
            <div class="scrollTable" style="width: 11%">
              {{ item.data5 }}
            </div>
            <div class="scrollTable" style="width: 20%">
              {{ item.data6 }}
            </div>
            <div class="scrollTable" style="width: 8%">
              <span style="color: #67C23A;">已处理</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="right">
      <el-row>
        <el-col v-for="i in tableData" :key="i.monitorUnitId" :span="12">
          <div class="item">
            <div class="titleBg"></div>
            <div class="title">
              <span style="margin-right: 28px;"> {{ i.monitorUnitName }} </span>
              <el-tag :type="i.alarmStatus === 1 ?'success' : 'danger'">{{ i.alarmStatus === 1 ? '正常' : '异常' }}</el-tag>
            </div>
            <div class="img"></div>
          </div>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination :page-size="pageSize" :pager-count="11" :total="total" layout="prev, pager, next"
                       @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
import {
  sceneAllNums,
  getLimitSubMonitorUnit,
  getAlarmCountGroupAlarmType,
  getAlarmInfos
} from '@/api/board/smartScene'

export default {
  components: {
    vueSeamlessScroll,
    BoardTopNav
  },
  data() {
    return {
      num1: 0,
      num2: 0,
      alarmCountGroupAlarmType: [],
      LimitSubMonitorUnitList: [],
      tableData: [],
      pageSize: 4,
      total: 1,
      chart1TableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0,
      },
      table1Data: []
    }
  },
  mounted() {
    this.setAllNum()
    this.setLimitSubMonitorUnit()
    this.setAlarmCountGroupAlarmType()
    this.setAlarmInfos()
  },
  methods: {
    async setAllNum() {
      const {subSum, sum} = await sceneAllNums()
      this.num1 = subSum
      this.num2 = sum
    },
    async setLimitSubMonitorUnit() {
      const data = await getLimitSubMonitorUnit()
      this.LimitSubMonitorUnitList = data.rows
      this.tableData = data.rows.slice(0, 4)
      this.total = data.total
    },
    currentChange(e) {
      this.tableData = this.LimitSubMonitorUnitList.slice(4 * (e - 1), 4 * (e - 1) + 4)
    },
    async setAlarmCountGroupAlarmType() {
      let {data: data} = await getAlarmCountGroupAlarmType()
      data.sort((a, b) => {
        return b.alarmCount - a.alarmCount
      })
      data = data.slice(0, 6)
      this.alarmCountGroupAlarmType = data
    },
    async setAlarmInfos() {
      const {rows: data} = await getAlarmInfos()
      console.log(data)
      this.table1Data = data.map((e,i)=>{
        return {
          data1: i,
          data2: e.alarmLevelName,
          data3: e.alarmTypeName,
          data4: '无线检测 检测值为 21° - 25°',
          data5: e.monitorUnitName,
          data6: '2021.01.01 00:00:00',
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background-image: url("~@/assets/board/smartScene/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.menu {
  background-image: url("~@/assets/board/common/subheadClick1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;
}

.menu .el-dropdown {
  font-size: 0.8vw;
  color: #d4d4d4;
}

.menuClick {
  background-image: url("~@/assets/board/common/subheadClick.png");
  color: #f3f3f3;
}

.num1 {
  position: absolute;
  top: 21%;
  left: 18%;
  transform: translate(-50%, -50%);
  font-size: 3vw;
  color: #15d654;
}

.num2 {
  position: absolute;
  top: 21%;
  left: 33%;
  transform: translate(-50%, -50%);
  font-size: 3vw;
  color: #00fff0;
}

.num3 {
  position: absolute;
  top: 52%;
  left: 7.5%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #d73827;
}

.num4 {
  position: absolute;
  top: 52%;
  left: 15%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #1ef16d;
}

.num5 {
  position: absolute;
  top: 52%;
  left: 22.5%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #f2711f;
}

.num6 {
  position: absolute;
  top: 52%;
  left: 30%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #2a46f9;
}

.num7 {
  position: absolute;
  top: 52%;
  left: 37.5%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #00a3fd;
}

.num8 {
  position: absolute;
  top: 52%;
  left: 45%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #eff721;
}

.title1 {
  position: absolute;
  top: 28%;
  left: 18%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #62bff2;
}

.title2 {
  position: absolute;
  top: 28%;
  left: 33%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  color: #62bff2;
}

.title3 {
  position: absolute;
  top: 48%;
  left: 7.5%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title4 {
  position: absolute;
  top: 48%;
  left: 15%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title5 {
  position: absolute;
  top: 48%;
  left: 22.5%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title6 {
  position: absolute;
  top: 48%;
  left: 30%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title7 {
  position: absolute;
  top: 48%;
  left: 37.5%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title8 {
  position: absolute;
  top: 48%;
  left: 45%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title9 {
  position: absolute;
  top: 61%;
  left: 26.1%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title10 {
  position: absolute;
  top: 13%;
  left: 74.3%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.table1 {
  position: absolute;
  top: 63%;
  left: 3.5%;
  width: 45.4%;
  height: 32%;
}

.scrollTable {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
}

.right {
  position: absolute;
  top: 16%;
  left: 52%;
  width: 44.8%;
  height: 80%;

  .item {
    width: 22vw;
    height: 37vh;
    position: relative;
    border: 1px solid #1ea6ec;
    margin-bottom: 12px;

    .titleBg {
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 10%;
      background-color: #063b5a;
    }

    .title {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff9f6;
      font-size: 0.9vw;

      .el-tag.el-tag--success {
        vertical-align: top !important;
      }
    }

    .img {
      background-image: url("~@/assets/board/smartScene/device.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      width: 100%;
      height: 90%;
      top: 10%;
    }

  }

  .pagination {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;

    .el-pagination {
      display: inline-block;
    }
  }
}
</style>
