<template>
  <div class="big-e-trend-census">
    <nav-temp htmlType="t1" :title="title">
      <div class="trend-conter" slot="mk-center">
        <e-echarts-line
          ref="echartsLineTrend"
          :styles="echartsOption.styles"
          :colorList="echartsOption.colorList"
          :eId="echartsOption.eId"
          :option="resultOption"
        />
      </div>
    </nav-temp>
  </div>
</template>
<script>
import EEchartsLine from "@/components/Echarts/EEchartsLine";
import * as echarts from "echarts";
import NavTemp from "./navTemp";
export default {
  name: "ETrendCensus",
  components: {
    EEchartsLine,
    NavTemp,
  },
  props: ["result"],
  data() {
    return {
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
        eId: "trendEchartsLine",
      },
      title: "实时用能分析",
      typeName: "alarm",
      resultOption: {
        color: ["#1890FF", "#EE6666", "#FFCC00"],
        title: {
          text: "",
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 5,
          right: 5,
          data: ["用水", "用电", "用气"],
          // icon: "circle",
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: 400
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "5",
          top: 70,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: true,
          data: [],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "用水",
            type: "line",
            smooth: false,
            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",
            smooth: false,
            symbolSize: 2,
            label: {
              show: false,
              formatter: function (params) {
                return echarts.format.formatTime("yyyy-MM-dd", params.value);
              },
              backgroundColor: "#7581BD",
            },
            markPoint: {
              symbolSize: 35,
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            data: [],
          },
          {
            name: "用气",
            type: "line",
            smooth: true,
            symbolSize: 2,
            markPoint: {
              symbolSize: 35,
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            data: [],
          },
        ],
      },
    };
  },
  watch: {
    result: {
      handler: function (val) {
        this.resultOption.xAxis.data = val["name"];
        this.resultOption.series[0].data = val["electricityMeter"];
        this.resultOption.series[1].data = val["waterMeter"];
        this.resultOption.series[2].data = val["gasMeter"];
        this.updateEcharts();
      },
      deep: true,
    },
  },
  methods: {
    // 类型发生变化根据新数据刷新 图表信息
    updateEcharts() {
      this.$refs.echartsLineTrend.updateEchart();
    },
  },
};
</script>

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

  .trend-conter {
    width: 100%;
    height: 280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    background-size: contain;
    // padding: 25px 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>
