<template>
  <div class="project-e-trend-census">
    <div class="trend-conter">
      <e-echarts-line
        ref="echartsLineTrend"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="resultOption"
      />
    </div>
  </div>
</template>
<script>
import EEchartsLine from "@/components/Echarts/EEchartsLine";
import * as echarts from "echarts";
export default {
  name: "ETrendCensus",
  components: {
    EEchartsLine
  },
  props: ["result"],
  data() {
    return {
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ["#FC6A16", "#1EEEFF"],
        eId: "trendEchartsLine",
      },
      typeName: "alarm",
      resultOption: {
        color: ["#FC6A16", "#1EEEFF"],
        title: {
          text: "",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: -5,
          right: 5,
          data: ["报警", "预警"],
          // icon: "circle",
          textStyle: {
            color: "#344567",
            fontSize: 12,
            fontWeight: 400
          },
        },
        grid: {
          left: "10",
          right: "10",
          bottom: "5",
          top: 37,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: true,
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              // color: "#E8E8E8",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              // color: "#E8E8E8",
            },
          },
        },
        series: [
          {
            name: "报警",
            type: "line",
            smooth: true,
            symbolSize: 2,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(252,106,22,0.8)",
                },
                {
                  offset: 1,
                  color: "rgba(252,106,22,0.1)",
                },
              ]),
            },
            markPoint: {
              symbolSize: 35,
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            label: {
              show: false,
              formatter: function (params) {
                return echarts.format.formatTime("yyyy-MM-dd", params.value);
              },
              backgroundColor: "#7581BD",
            },
            data: [],
          },
          {
            name: "预警",
            type: "line",
            markPoint: {
              symbolSize: 35,
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(30,238,255,0.8)",
                },
                {
                  offset: 1,
                  color: "rgba(30,238,255,0.1)",
                },
              ]),
            },
            smooth: true,
            symbolSize: 2,
            data: [],
          },
        ],
      },
    };
  },
  watch: {
    result: {
      handler: function (val, oldVal) {
        this.resultOption.xAxis.data = val["name"];
        this.resultOption.series[0].data = val["alarm"];
        this.resultOption.series[1].data = val["warning"];
        this.updateEcharts();
      },
      deep: true,
    },
  },
  methods: {
    // 类型发生变化根据新数据刷新 图表信息
    updateEcharts() {
      this.$refs.echartsLineTrend.updateEchart();
    },
  },
};
</script>

<style lang="scss">
.project-e-trend-census {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .trend-conter {
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    background-size: contain;
    padding: 0;
    .tabs-block {
      width: 305px;
      height: 38px;
      background: #bfbfbf94;
      display: flex;
      color: #fff;
      > div {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        letter-spacing: 7px;
        cursor: default;
      }
      .div-select {
        background: #0010ff;
      }
    }
  }
}
</style>
