<template>
  <div class="courtMain">
    <div class="left">
      <div class="leftOne">
        <div class="title">预计统计列表 一级</div>
        <div
          class="courtHouse"
          id="courtHouse"
          @mouseenter="mouseOver"
          @mouseleave="mouseLeave"
        >
          <div class="warnListContent" v-for="(item, index) in warnList1" :key="index">
            <div class="warnArray">
              <!-- <span>{{ item.id }}</span> -->
              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
              <div class="warnArrayBox">
                <div style="margin-top: 2%; float: left">
                  报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
                </div>
                <div style="margin-top: 2%">
                  报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
                  <!-- <span>{{ item.content }}</span> -->
                </div>
                <div style="margin-top: 2%; float: left">
                  风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="leftTwo">
        <div class="title">预计统计列表 二级</div>
        <div
          class="courtHouse"
          id="courtHouse2"
          @mouseenter="mouseOver2"
          @mouseleave="mouseLeave2"
        >
          <div class="warnListContent" v-for="(item, index) in warnList2" :key="index">
            <div class="warnArray">
              <!-- <span>{{ item.id }}</span> -->
              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
              <div class="warnArrayBox">
                <div style="margin-top: 2%; float: left">
                  报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
                </div>
                <div style="margin-top: 2%">
                  报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
                  <!-- <span>{{ item.content }}</span> -->
                </div>
                <div style="margin-top: 2%; float: left">
                  风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="leftThree"></div> -->
    </div>
    <div class="right">
      <div class="title">预计统计列表 三级</div>
      <div
        class="courtHouse"
        id="courtHouse3"
        @mouseenter="mouseOver3"
        @mouseleave="mouseLeave3"
      >
        <div class="warnListContent" v-for="(item, index) in warnList3" :key="index">
          <div class="warnArray">
            <!-- <span>{{ item.id }}</span> -->
            <img :src="item.icon" style="width: 7%; margin-left: 3%" />
            <div class="warnArrayBox">
              <div style="margin-top: 2%; float: left">
                报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
              </div>
              <div style="margin-top: 2%">
                报警原因:<span class="spancolor">{{ "「" + item.cause + "」" }}</span>
                <!-- <span>{{ item.content }}</span> -->
              </div>
              <div style="margin-top: 2%; float: left">
                风险等级:<span class="spancolor">{{ "「" + item.risk + "」" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetLevelAlarm } from "../api/index";

export default {
  name: "court",
  data() {
    return {
      intervalTime: null, //定时器
      intervalTime1: null, //定时器
      intervalTime2: null, //定时器
      //报警数组 一级
      warnList1: [],
      //报警数组 二级
      warnList2: [],
      //报警数组 三级
      warnList3: [],
      courtList: [
        {
          name: "空闲中",
          count: "7",
        },
        {
          name: "已开庭",
          count: "15",
        },
        {
          name: "已预约",
          count: "17",
        },
        {
          name: "法官办公室",
          count: "86",
        },
      ], // 智慧法庭小房子
      houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
      alarmFirstLevel: [],
      alarmSecondLevel: [],
      alarmThirdLevel: [],
    };
  },
  mounted() {
    // setTimeout(() => {
    window.alarmFirstLevel = this.alarmFirstLevel;
    window.alarmSecondLevel = this.alarmSecondLevel;
    window.alarmThirdLevel = this.alarmThirdLevel;
    // window.createMqtt = this.createMqtt();
    // console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222');
    //一级告警
    this.getFirstAlarm();
    //二级告警
    this.getSecondAlarm();
    //三级告警
    this.getThirdAlarm();
    //
    let name = "courtHouse2";
    let name1 = "courtHouse3";
    this.autoScrollalarm2(67, 50, 0, document.getElementById("courtHouse"));
    this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse2"), name);
    this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse3"), name1);
    // }, 1000);
  },
  watch: {
    alarmFirstLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      //console.log("alarmFirstLevel",val)
      if (val.length != 0) {
        this.upmqttData(val);
      }
    },
    alarmSecondLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      //console.log("alarmSecondLevel",val)
      this.upmqttData(val);
    },
    alarmThirdLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      //console.log("alarmThirdLevel",val)
      this.upmqttData(val);
    },
  },
  methods: {
    //获取一级告警
    getFirstAlarm() {
      GetLevelAlarm({
        AlarmLevel: "1",
        DeviceTypes: "",
      })
        .then((res) => {
          this.warnList1 = Object.keys(res.data.data).map((item, index) => {
            if (res.data.data[index].AlarmLevel == 1) {
              res.data.data[index].AlarmLevel = "一级";
            }
            return {
              id: index + 1,
              icon: require("../assets/images/warnRed.png"),
              time: this.$moment(res.data.data[index].AlarmTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              cause: res.data.data[index].AlarmName,
              risk: res.data.data[index].AlarmLevel,
            };
          });
        })
        .catch((err) => {});
    },
    //获取二级告警
    getSecondAlarm() {
      GetLevelAlarm({
        AlarmLevel: "2",
        DeviceTypes: "",
      })
        .then((res) => {
          this.warnList2 = Object.keys(res.data.data).map((item, index) => {
            if (res.data.data[index].AlarmLevel == 2) {
              res.data.data[index].AlarmLevel = "二级";
            }
            return {
              id: index + 1,
              icon: require("../assets/images/warnOrange.png"),
              time: this.$moment(res.data.data[index].AlarmTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              cause: res.data.data[index].AlarmName,
              risk: res.data.data[index].AlarmLevel,
            };
          });
        })
        .catch((err) => {});
    },
    //获取三级告警
    getThirdAlarm() {
      GetLevelAlarm({
        AlarmLevel: "3",
        DeviceTypes: "",
      })
        .then((res) => {
          this.warnList3 = Object.keys(res.data.data).map((item, index) => {
            if (res.data.data[index].AlarmLevel == 3) {
              res.data.data[index].AlarmLevel = "三级";
            }
            return {
              id: index + 1,
              icon: require("../assets/images/warnBlue.png"),
              time: this.$moment(res.data.data[index].AlarmTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              cause: res.data.data[index].AlarmName,
              risk: res.data.data[index].AlarmLevel,
            };
          });
        })
        .catch((err) => {});
    },
    //获取mqtt数据
    upmqttData(val) {
      let icon = null;
      var warnListMqtt = [];
      warnListMqtt = Object.keys(val).map((item, index) => {
        if (val[index].AlarmLevel == 1) {
          val[index].AlarmLevel = "一级";
          icon = require("../assets/images/warnRed.png");
        } else if (val[index].AlarmLevel == 2) {
          val[index].AlarmLevel = "二级";
          icon = require("../assets/images/warnOrange.png");
        } else if (val[index].AlarmLevel == 3) {
          val[index].AlarmLevel = "三级";
          icon = require("../assets/images/warnBlue.png");
        }
        return {
          id: index + 1,
          icon: icon,
          time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
          cause: val[index].AlarmName,
          risk: val[index].AlarmLevel,
        };
      });
      //console.log("warnListMqtt",warnListMqtt)
      for (let i = 0; i < warnListMqtt.length; i++) {
        if (warnListMqtt[i].risk == "三级") {
          this.warnList3.splice(0, 0, warnListMqtt[i]);
        } else if (warnListMqtt[i].risk == "二级") {
          this.warnList2.splice(0, 0, warnListMqtt[i]);
        }
        if (warnListMqtt[i].risk == "一级") {
          this.warnList1.splice(0, 0, warnListMqtt[i]);
        }
      }
    },
    autoScrollalarm(stepLength, speed, delay, element, name) {
      let that = this;
      if (name == "courtHouse2") {
        let step = 1;
        element.scrollTop = 0;
        function start() {
          that.intervalTime1 = setInterval(scrolling, speed);
          element.scrollTop += step;
        }

        function scrolling() {
          if (
            element.scrollTop % stepLength !== 0 &&
            element.scrollTop === element.scrollHeight - element.offsetHeight
          ) {
            // element.scrollTop += step
            step = 1;
            element.scrollTop = 0;
          } else {
            if (
              element.scrollTop === 0 ||
              element.scrollTop === element.scrollHeight - element.offsetHeight
            ) {
              // 触顶或触底\
              // step *= -1; // 转换方向
            }
            clearInterval(that.intervalTime1);
            setTimeout(start, delay);
          }
        }

        if (element.offsetHeight !== element.scrollHeight) {
          // 元素内容没有溢出时，不触发
          setTimeout(start, delay);
        }
      } else if (name == "courtHouse3") {
        let step = 1;
        element.scrollTop = 0;
        function start() {
          that.intervalTime2 = setInterval(scrolling, speed);
          element.scrollTop += step;
        }

        function scrolling() {
          if (
            element.scrollTop % stepLength !== 0 &&
            element.scrollTop === element.scrollHeight - element.offsetHeight
          ) {
            // element.scrollTop += step
            step = 1;
            element.scrollTop = 0;
          } else {
            if (
              element.scrollTop === 0 ||
              element.scrollTop === element.scrollHeight - element.offsetHeight
            ) {
              // 触顶或触底\
              // step *= -1; // 转换方向
            }
            clearInterval(that.intervalTime2);
            setTimeout(start, delay);
          }
        }

        if (element.offsetHeight !== element.scrollHeight) {
          // 元素内容没有溢出时，不触发
          setTimeout(start, delay);
        }
      }
    },
    autoScrollalarm2(stepLength, speed, delay, element) {
      let that = this;
      let step = 1;
      element.scrollTop = 0;
      function start() {
        that.intervalTime = setInterval(scrolling, speed);
        element.scrollTop += step;
      }

      function scrolling() {
        let scrollTop1 = element.scrollTop + 1;
        if (
          scrollTop1 % stepLength !== 0 &&
          scrollTop1 === element.scrollHeight - element.offsetHeight
        ) {
          // element.scrollTop += step
          step = 1;
          element.scrollTop = 0;
        } else {
          if (
            element.scrollTop === 0 ||
            scrollTop1 === element.scrollHeight - element.offsetHeight
          ) {
            // 触顶或触底\
            // step *= -1; // 转换方向
          }
          clearInterval(that.intervalTime);
          setTimeout(start, delay);
        }
      }

      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        setTimeout(start, delay);
      }
    },
    //鼠标移入事件
    mouseOver() {
      let that = this;
      clearInterval(that.intervalTime);
      that.intervalTime = null;
    },
    mouseLeave() {
      if (this.intervalTime == null) {
        this.autoScrollalarm2(67, 50, 0, document.getElementById("courtHouse"));
      }
    },
    //鼠标移入事件
    mouseOver2() {
      let that = this;
      clearInterval(that.intervalTime1);
      that.intervalTime1 = null;
    },
    mouseLeave2() {
      if (this.intervalTime1 == null) {
        let name = "courtHouse2";
        this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse2"), name);
      }
    },
    //鼠标移入事件
    mouseOver3() {
      let that = this;
      clearInterval(that.intervalTime2);
      that.intervalTime2 = null;
    },
    mouseLeave3() {
      if (this.intervalTime2 == null) {
        let name = "courtHouse3";
        this.autoScrollalarm(67, 50, 0, document.getElementById("courtHouse3"), name);
      }
    },
  },
  beforeDestroy() {
    let that = this;
    // 离开当前路由前的操作
    clearInterval(that.intervalTime);
    clearInterval(that.intervalTime1);
    clearInterval(that.intervalTime2);
    that.intervalTime = null;
    that.intervalTime1 = null;
    that.intervalTime2 = null;
  },
  components: {},
};
</script>

<style lang="less" scoped>
@fontsize: 0.6rem;
.courtMain {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;

  .left {
    width: 25.5%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: leftAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .leftOne {
      width: 100%;
      height: 40%;
      .title {
        width: 100%;
        height: 14%;
        background: url("../assets/images/title.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        padding-left: 12%;
        box-sizing: border-box;
      }
      .courtHouse {
        height: 95%;
        width: 100%;
        display: block;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
        }
        .warnListContent {
          height: 32%;
          width: 95%;
          color: #fff;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding-left: 3%;
          box-sizing: border-box;
          border-bottom: 0.08rem solid #eee;
          margin-left: 0.5rem;
          .warnArray {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            line-height: 2;
            font-size: 0.6rem;
            .warnArrayBox {
              margin-left: 3%;
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-items: flex-start;
              span {
                margin: 0.5rem;
              }
              .spancolor {
                color: rgb(218, 25, 25);
              }
            }
          }
        }
      }
    }
  }
  @keyframes leftAnimation {
    0% {
      position: relative;
      left: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      left: 0%;
      transform: scale(1);
    }
  }
  .leftTwo {
    width: 100%;
    height: 51%;
    //   position: relative;
    .title {
      width: 100%;
      height: 12%;
      background: url("../assets/images/title.png") no-repeat;
      background-size: 100% 100%;
      color: #fff;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      padding-left: 12%;
      box-sizing: border-box;
    }
    .courtHouse {
      height: 93%;
      width: 100%;
      display: block;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
      }
      .warnListContent {
        height: 28%;
        width: 95%;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 3%;
        box-sizing: border-box;
        border-bottom: 0.08rem solid #eee;
        margin-left: 0.5rem;
        .warnArray {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          line-height: 2;
          font-size: 0.6rem;
          .warnArrayBox {
            // display: flex;
            //   flex-direction: column;
            //   align-items: flex-start;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 3%;
            span {
              margin: 0.5rem;
            }
            .spancolor {
              color: darkorange;
            }
          }
        }
      }
    }
    #caseEcharts {
      width: 100%;
      height: calc(100% - 16%);
      border: 1px solid blue;
    }
  }
  .leftThree {
    width: 100%;
    height: 40%;
    border: 1px solid white;
  }
}
.right {
  width: 25.5%;
  height: 95%;
  padding: 0.5% 0.3% 1% 0.3%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  background: url(../assets/images/leftKuang.png) no-repeat;
  background-size: 100% 100%;
  -webkit-animation-name: rightAnimation;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 1s;
  .title {
    width: 100%;
    height: 5%;
    background: url("../assets/images/title.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding-left: 12%;
    box-sizing: border-box;
  }
  .courtHouse {
    height: 95%;
    width: 100%;
    display: block;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
    .warnListContent {
      height: 14%;
      width: 95%;
      color: #fff;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-left: 3%;
      box-sizing: border-box;
      border-bottom: 0.08rem solid #eee;
      margin-left: 0.5rem;
      .warnArray {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        line-height: 2;
        .warnArrayBox {
          // display: flex;
          //   flex-direction: column;
          //   align-items: flex-start;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 3%;
          span {
            margin: 0.5rem;
          }
          .spancolor {
            color: deepskyblue;
          }
        }
      }
    }
  }
}
@keyframes rightAnimation {
  0% {
    position: relative;
    right: 38%;
    transform: scale(0);
  }
  100% {
    position: relative;
    right: 0%;
    transform: scale(1);
  }
}

.caseTitle {
  width: 23%;
  height: 10%;
  background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-left: 5%;
  box-sizing: border-box;
  margin-top: 2%;
}
</style>
