<template>
  <div style="display: flex; flex-direction: column">
    <!-- <div ref="chart" class="item" style="width: 280px; height: 259px" /> -->
    <!-- <ul style="margin: auto; font-size: 16px">

      <li @click="showStice('重大风险')" style="margin-bottom: 12px">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ff0b0b;
            margin: 0 4px;
          "
        ></span>
        <span
          >重大风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("重大风险")
          }}</span>
        </span>
      </li>
      <li @click="showStice('较大风险')" style="margin-bottom: 12px">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #ff833d;
            margin: 0 4px;
          "
        ></span>
        <span
          >较大风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("较大风险")
          }}</span>
        </span>
      </li>
      <li @click="showStice('一般风险')" style="margin-bottom: 12px">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #fbff3d;
            margin: 0 4px;
          "
        ></span>
        <span
          >一般风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("一般风险")
          }}</span>
        </span>
      </li>
      <li @click="showStice('低风险（蓝色）')">
        <span
          style="
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #35c2ff;
            margin: 0 4px;
          "
        ></span>
        <span
          >低风险
          <span style="color: rgb(68, 241, 255)">{{
            showValue("低风险")
          }}</span>
        </span>
      </li>
    </ul> -->
    <div class="tab-en">
      <div class="tab" :class="addClass(1)" @click="changeTab(1)">风险预警</div>
      <div class="tab" :class="addClass(2)" @click="changeTab(2)">火灾预测</div>
    </div>
    <div style="display: flex; flex-direction: column" v-show="idx == 1">
      <div
        style="
          border: 1px solid #ccc;
          height: 20px;
          width: 50px;
          margin-left: 370px;
          line-height: 20px;
        "
      >
        单位：栋
      </div>
      <!-- 风险预警 -->
      <div
        style="display: flex; flex-wrap: wrap; justify-content: space-around"
      >
        <div class="card">
          <div class="left-card">
            <div class="card-item">重大风险</div>
          </div>
          <div class="right-card">{{ showValue("重大风险") }}</div>
        </div>
        <div class="card">
          <div class="left-card" style="background: #ff833d">
            <div class="card-item">较大风险</div>
          </div>
          <div class="right-card">{{ showValue("较大风险") }}</div>
        </div>
        <div class="card">
          <div class="left-card" style="background: #fbff3d">
            <div class="card-item">一般风险</div>
          </div>
          <div class="right-card">{{ showValue("一般风险") }}</div>
        </div>
        <div class="card">
          <div class="left-card" style="background: #35c2ff">
            <div class="card-item">低风险</div>
          </div>
          <div class="right-card">{{ showValue("低风险") }}</div>
        </div>
      </div>
    </div>
    <!-- 预测 -->
    <div style="width: 434px; height: 340px; margin-left: 2px;" v-show="idx==2">
      单位：起
      <div ref="chart" style="width: 434px; height: 230px" />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import toolUtils from "@/utils/echartsTooltip";
export default {
  props: {
    riskList: Array,
    qy: String,
    monthData: Array,
  },
  data() {
    return {
      chart: null,
      timer: "",
      label: [],
      labelColor: {
        重大风险: "#FF0B0B",
        较大风险: "#ff833d",
        一般风险: "#fbff3d",
        低风险: "#35c2ff",
      },
      idx: 1,
    };
  },
  watch: {
    monthData: {
      handler(val) {
        // console.log("-----------3333", val);
        this.chart = null;
        if (val.length > 0) {
          this.$nextTick(() => {
            const chartDom = this.$refs.chart;
            // 初始化图表实例
            this.chart = echarts.init(chartDom);

            this.initChart(val);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    showValue(label) {
      const item = this.riskList.find((item) => item.fxdj === label);
      return item ? item.sl : 0;
    },
    initChart(srcData) {
      var fontColor = "#30eee9";
      const option = {
        backgroundColor: "#11183c",
        grid: {
          left: "1%",
          right: "3%",
          top: "10%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          // trigger: "item",
          trigger: "axis",
          confine: true,
          extraCssText: "z-index: 1000;",
          backgroundColor: "#02809a",
          borderColor: "rgba(0,213,255, .6)",
          formatter: '{b}: {c}',
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: true,
          x: 0,
          y: "0",
          icon: "stack",
          itemWidth: 20,
          itemHeight: 10,
          textStyle: {
            color: "#1bb4f6",
          },
          // data: ["已采纳", "已发布"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: fontColor,
              interval: 1,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#195384",
              },
            },
            data: srcData.map((item) => {
              // return `${item.y.substring(5,7)}月`;
              return item.y;
            }),
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            // max: 1000,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#2ad1d2",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            stack: "总量",
            // symbol: "circle",
            // symbolSize: 8,
            itemStyle: {
              normal: {
                type: "solid",
                color: "#0092f6",
                lineStyle: {
                  color: "#0092f6",
                  width: 1,
                },
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: "red",
                },
              },
            },
            // data: srcData.slice(0, -1).map((item) => {
            //   return item.hzqs;
            // }),
            data:[srcData[0].hzqs,srcData[1].hzqs,srcData[2].hzqs,srcData[3].hzqs,srcData[4].hzqs,srcData[5].hzqs,srcData[6].hzqs,srcData[7].hzqs,srcData[8].hzqs,srcData[9].hzqs,srcData[10].hzqs]
          },
          {
            type: "line",
            // data: srcData.map((item) => {
            //   return item.hzqs;
            // }),
            data:[null,null,null,null,null,null,null,null,null,null,srcData[10].hzqs,srcData[11].hzqs],
            lineStyle: {
              normal: {
                type: "dotted",
                color: "#fd87ab",
              },
            },
          },
        ],
      };
      this.chart.setOption(option);
      //自适应图表
      window.onresize = this.chart.resize;
      // 自动轮播
      toolUtils.autoHover(this.chart, option, 12, 5000);
    },
    createData() {
      let dataArr = [];
      for (var i = 0; i < 200; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            value: 25,
            itemStyle: {
              normal: {
                color: "#0475bd",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
    showStice(val) {
      this.$emit("showFxyj", val);
    },
    addClass(v) {
      return this.idx == v ? " tab active" : "tab";
    },
    changeTab(idx) {
      this.idx = idx;
    },
  },
};
</script>

<style scoped lang="less">
.tab-en {
  display: flex;
  margin-left: 8px;
}
.tab {
  width: 120px;
  height: 27px;
  margin: 9px 12px;
  background: #ccc;
  transform: perspective(0.5em) rotateX(5deg);
  font-size: 16px;
  text-align: center;
  line-height: 27px;
  color: black;
}
.active {
  background: rgb(93, 169, 231);
  color: #fff;
}
.card {
  width: 200px;
  height: 70px;
  display: flex;
  margin-top: 16px;
  .left-card {
    width: 100px;
    background: red;
  }
  .right-card {
    flex: 1;
    background: #fff;
    color: #000;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    line-height: 70px;
  }
  .card-item {
    color: #000;
    border: 1px solid rgb(194, 231, 234);
    height: 40px;
    width: 80%;
    margin: auto;
    line-height: 40px;
    font-size: 14px;
    margin-top: 15px;
    text-align: center;
  }
}
</style>
