<template>
  <div id="earlywarning">
    <div class="top-stauts">
      <div class="shadow">
        <img src="@/assets/AIwarning/icon_d_qi@2x.png" alt="" />
      </div>
      <div class="status-container">
        <div class="status-count">
          <img class="status-img" src="@/assets/AIwarning/icon_d_jiu@2x.png" />
          <div class="status-detail">
            <div class="status-text">AI设备总数</div>
            <div class="status-number">
              {{ screenDetail.aiDeviceCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/AIwarning/icon_d_si@2x(1).png"
          />
          <div class="status-detail">
            <div class="status-text">总人数</div>
            <div class="status-number">
              {{ screenDetail.personCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/AIwarning/icon_d_shiyi@2x.png"
          />
          <div class="status-detail">
            <div class="status-text">今日报警</div>
            <div class="status-number">
              {{ screenDetail.todayDeviceWarningCount }}
            </div>
          </div>
        </div>
      </div>
      <div class="shadow">
        <img src="@/assets/AIwarning/icon_d_ba@2x.png" alt="" />
      </div>
    </div>
    <div class="mid-container">
      <div class="today-warning">
        <Title type="long" text="今日预警"></Title>
        <ShadowContainer class="long-container">
          <div
            class="warp"
            id="warning-list"
            @mouseenter="clearScroll"
            @mouseleave="reScroll"
          >
            <div
              class="person-check"
              v-for="(warns, index) in warningList"
              :key="index"
            >
              <div class="portrait">
                <img
                  class="rect"
                  src="@/assets/AIwarning/icon_d_san@2x.png"
                  alt=""
                />
                <el-image
                  class="person-head"
                  :src="warns.alarm_big_img_url"
                  :preview-src-list="srcList"
                />
              </div>
              <div class="person-detail">
                <div class="name">
                  <div class="name-text">{{ warns.alarm_type_text }}</div>
                  <div class="work-no">
                    <img
                      class="warn-icon"
                      src="@/assets/AIwarning/icon_d_er@2x.png"
                      alt=""
                    />
                    {{ warns.area_name }}
                    ({{ warns.device_no }})
                  </div>
                </div>
                <div class="status">状态：{{ warns.status_text }}</div>
                <div class="time">时间：{{ warns.log_time_cn }}</div>
              </div>
            </div>
            <div v-if="warningList.length == 0" class="no-data">
              <img src="@/assets/nodata.png" alt="" />
              <div>暂无数据！</div>
            </div>
          </div>
        </ShadowContainer>
      </div>
      <div class="right-container">
        <Title type="long" text="整改统计"></Title>
        <ShadowContainer class="short-container">
          <div
            style="
              display: flex;
              height: 100%;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            "
          >
            <div
              style="
                display: flex;
                width: calc(50% - 2px);
                justify-content: center;
                border-right: 4px solid #114e70;
              "
            >
              <div class="chart-container">
                <div ref="todayChart" id="today-chart"></div>
                <div class="title">
                  <div class="main-title">
                    {{ todayTotal }}
                  </div>
                  <div class="sub-title">今日整改</div>
                </div>
              </div>
              <div class="chart-legends">
                <div
                  v-for="(legend, index) in todayPieChartData"
                  :key="index"
                  :style="{
                    color:
                      legend.name == '已处理'
                        ? '#18d7b9'
                        : legend.name == '处理中'
                        ? '#feba01'
                        : '#ff754c',
                  }"
                >
                  <span
                    class="rect"
                    :style="{
                      background:
                        legend.name == '已处理'
                          ? '#18d7b9'
                          : legend.name == '处理中'
                          ? '#feba01'
                          : '#ff754c',
                    }"
                  ></span>
                  {{ legend.name }} {{ legend.value }}
                </div>
              </div>
            </div>
            <div
              style="
                display: flex;
                width: calc(50% - 2px);
                justify-content: center;
              "
            >
              <div class="chart-container">
                <div ref="historyChart" id="history-chart"></div>
                <div class="title">
                  <div class="main-title">
                    {{ historyTotal }}
                  </div>
                  <div class="sub-title">历史整改</div>
                </div>
              </div>
              <div class="chart-legends">
                <div
                  v-for="(legend, index) in historyChartData"
                  :key="index"
                  :style="{
                    color:
                      legend.name == '已处理'
                        ? '#18d7b9'
                        : legend.name == '处理中'
                        ? '#feba01'
                        : '#ff754c',
                  }"
                >
                  <span
                    class="rect"
                    :style="{
                      background:
                        legend.name == '已处理'
                          ? '#18d7b9'
                          : legend.name == '处理中'
                          ? '#feba01'
                          : '#ff754c',
                    }"
                  ></span>
                  {{ legend.name }} {{ legend.value }}
                </div>
              </div>
            </div>
          </div>
        </ShadowContainer>
        <Title type="long" text="本月报警趋势"></Title>
        <ShadowContainer class="short-container">
          <div id="warning-chart" ref="warningChart"></div>
        </ShadowContainer>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getAIdata,
  getWarningList,
  getMonthWarningStatis,
  getStatis,
} from "@/api/index";
export default {
  name: "EarlyWarning",
  data() {
    return {
      warningList: [],
      classOption: {
        singleHeight: 152,
      },
      screenDetail: {},
      date: "",
      todayPieChartData: [],
      historyChartData: [],
      intervalTimer: null,
      todayTotal: 0,
      historyTotal: 0,
      srcList: [],
    };
  },
  methods: {
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      this.date = today;
    },
    renderWarningChart() {
      const xAxisData = this.warningChartData.map((item) => {
        return item.date;
      });
      const chart = this.$echarts.init(this.$refs.warningChart);

      const warnTypes = this.warningChartData[0].data.map((warnType) => {
        return warnType.name;
      });
      const seriesData = warnTypes.map((warnType) => {
        const dayDataArray = [];
        this.warningChartData.map((item) => {
          item.data.map((dayData) => {
            if (dayData.name == warnType) {
              dayDataArray.push(dayData.total);
            }
          });
        });
        return {
          name: warnType,
          data: dayDataArray,
          type: "line",
          smooth: true,
        };
      });

      const option = {
        grid: {
          top: 100,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          left: "0px",
          right: "100px",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
          itemGap: 12,
        },
        tooltip: {
          appendToBody: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
          minInterval: 1,
        },
        series: seriesData,
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("warning-chart"));
      });
    },
    renderTodayChart() {
      const chartData = [...this.todayPieChartData];
      const chart = this.$echarts.init(this.$refs.todayChart);
      let total = 0;
      chartData.map((item) => {
        total += item.value;
      });
      this.todayTotal = total;
      const option = {
        tooltip: {
          appendToBody: true,
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: chartData.map((item) => {
              return {
                ...item,
                itemStyle: {
                  color:
                    item.name == "已处理"
                      ? "#18d7b9"
                      : item.name == "处理中"
                      ? "#feba01"
                      : "#ff754c",
                },
              };
            }),
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("today-chart"));
      });
    },
    renderHistoryChart() {
      const chartData = [...this.historyChartData];
      let total = 0;
      chartData.map((item) => {
        total += item.value;
      });
      this.historyTotal = total;
      const chart = this.$echarts.init(this.$refs.historyChart);
      const option = {
        tooltip: {
          appendToBody: true,
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: ["60%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: chartData.map((item) => {
              return {
                ...item,
                itemStyle: {
                  color:
                    item.name == "已处理"
                      ? "#18d7b9"
                      : item.name == "处理中"
                      ? "#feba01"
                      : "#ff754c",
                },
              };
            }),
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("history-chart"));
      });
    },
    getAIdata() {
      getAIdata().then((res) => {
        if (res.status == 200) {
          this.screenDetail = res.data;
        }
      });
      getWarningList({
        start_log_time: `${this.date} 00:00:00`,
        end_log_time: `${this.date} 23:59:59`,
      }).then((res) => {
        if (res.status == 200) {
          this.warningList = [...res.data];
          this.srcList = res.data.map((item) => {
            return item.alarm_big_img_url;
          });
          this.intervalTimer = setInterval(() => {
            getWarningList({
              start_log_time: `${this.date} 00:00:00`,
              end_log_time: `${this.date} 23:59:59`,
            }).then((res) => {
              if (res.status == 200) {
                this.warningList = [...res.data];
                this.srcList = res.data.map((item) => {
                  return item.alarm_big_img_url;
                });
              }
            });
          }, 60000);
          this.$nextTick(() => {
            const element = document.getElementById("warning-list");
            this.autoScroll(1, 50, 1500, element);
          });
        }
      });
      // 今日统计
      getStatis({
        start_log_time: `${this.date} 00:00:00`,
        end_log_time: `${this.date} 23:59:59`,
      }).then((res) => {
        this.todayPieChartData = res.data;
        this.renderTodayChart();
      });
      getStatis().then((res) => {
        this.historyChartData = res.data;
        this.renderHistoryChart();
      });
      getMonthWarningStatis().then((res) => {
        if (res.status == 200) {
          this.warningChartData = res.data;
          this.renderWarningChart();
        }
      });
    },
    autoScroll(stepLength, speed, delay, element) {
      var that = this;
      //let step = 1
      element.scrollTop = 0;
      function start() {
        that.interval1 = setInterval(scrolling, speed);
        element.scrollTop += stepLength;
      }
      function scrolling() {
        var sTop = element.scrollTop;
        element.scrollTop += stepLength;
        if (
          sTop === element.scrollTop ||
          sTop == 0 ||
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          element.scrollTop = 0;
          clearInterval(that.interval1);
          that.timeout1 = setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        that.timeout1 = setTimeout(start, delay);
      }
    },
    clearScroll() {
      clearInterval(this.interval1);
      clearTimeout(this.timeout1);
    },
    reScroll() {
      this.$nextTick(() => {
        const element = document.getElementById("warning-list");
        this.autoScroll(1, 50, 1500, element);
      });
    },
  },

  mounted() {
    this.getTime();
    this.getAIdata();
  },
  beforeDestroy() {
    clearInterval(this.intervalTimer);
  },
};
</script>
<style lang="less" scoped>
#earlywarning {
  padding: 12px 20px;
  padding-bottom: 0;
  height: calc(100% - 24px);
}
.top-stauts {
  display: flex;
  justify-content: center;
  .shadow {
    width: 300px;
    img {
      width: 100%;
      vertical-align: top;
    }
  }
  .status-container {
    display: flex;
    width: 65vw;
    padding: 20px 0;
  }
  .status-count {
    width: calc(100% / 3 - 20px);
    margin: 0 10px;
    background: url("@/assets/realname/rect.png") no-repeat;
    background-size: 100% 100%;
    padding: 12px 20px;
    margin-bottom: 20px;
    .status-img {
      width: 120px;
    }
    .status-detail {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 120px);
      .status-text {
        font-size: 22px;
        color: #1abcec;
        text-align: right;
        line-height: 60px;
        white-space: nowrap;
      }
      .status-number {
        text-align: right;
        font-size: 44px;
        font-weight: bold;
        color: #fff;
        line-height: 60px;
        letter-spacing: 4px;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
      }
    }
  }
}
.mid-container {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 208px);
  .today-warning,
  .right-container {
    width: calc(50% - 6px);
  }
}
.warp {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.person-check {
  padding: 14px;
  background: rgba(20, 86, 144, 0.2);
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  &:hover {
    background: rgba(20, 86, 144, 0.5);
  }
  .portrait {
    position: relative;
    .rect {
      width: 160px;
      height: 110px;
      vertical-align: top;
    }
    .person-head {
      position: absolute;
      top: 8px;
      width: 144px;
      height: 94px;
      left: 8px;
    }
  }
  .person-detail {
    font-size: 14px;
    color: #c6def9;
    margin-left: 24px;
    width: calc(100% - 104px);
    line-height: calc(110px / 3);
    .name {
      display: flex;
      justify-content: space-between;
      .name-text {
        font-size: 18px;
        font-weight: 400;
        color: #feba01;
      }
      .work-no {
        font-size: 14px;
        font-weight: 400;
        color: #27acfb;
        line-height: calc(110px / 3);
        .warn-icon {
          width: 16px;
          vertical-align: top;
          margin-top: 9px;
        }
      }
    }
  }
}
#warning-chart {
  width: 100%;
  height: 100%;
}

#today-chart,
#history-chart {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url("@/assets/chart.png") no-repeat;
  background-size: 50% 50%;
  background-position: center center;
}
.no-data {
  position: absolute;
  text-align: center;
  font-size: 14px;
  color: #86919e;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  img {
    width: 300px;
    margin: 0 auto;
    vertical-align: top;
  }
}
.long-container {
  height: calc(100% - 98px);
}
.short-container {
  height: calc(50% - 106px);
}
.chart-legends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  & > div {
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    width: 100%;
    text-align: left;
    white-space: nowrap;
  }
  .rect {
    width: 8px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

.chart-container {
  position: relative;
  width: 250px;
  height: 250px;
  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    .main-title {
      font-size: 30px;
      font-weight: bold;
      color: #00fcff;
    }
    .sub-title {
      font-size: 16px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>