<template>
  <div class="big-trend-wrap">
    <div class="mk-top">{{title}}</div>
    <div class="mk-conter">
      <echarts-line-wrap
        ref="echartsLineTrend"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="resultOption"
      ></echarts-line-wrap>
    </div>
    <div class="mk-bottom"></div>
  </div>
</template>
<script>
import echartsLineWrap from "./echartsLineT";
import * as echarts from "echarts";
export default {
  name: "typeDistribution",
  components: {
    echartsLineWrap
  },
  props: ['result'],
  data() {
    return {
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: ['#FC6A16', '#1EEEFF'],
        eId: "trendEchartsLine"
      },
      title: "报警预警趋势",
      typeName: "alarm",
      resultOption: {
        color: ['#FC6A16', '#1EEEFF'],
        title: {
          text: "",
          show: false
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          top: 5,
          right: 5,
          data: ["报警", "预警"],
          icon: "circle",
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "5",
          top: 30,
          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: true,
            symbolSize: 12,
            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)"
                }
              ])
            },
            label: {
              show: false,
              formatter: function(params) {
                return echarts.format.formatTime("yyyy-MM-dd", params.value);
              },
              backgroundColor: "#7581BD"
            },
            data: []
          },
          {
            name: "预警",
            type: "line",
            smooth: false,
            symbolSize: 12,
            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">
.big-trend-wrap {
  width: 100%;
  height: 287px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  .mk-top {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    color: #02d9fd;
    padding-left: 0;
    align-items: end;
    padding-bottom: 0px;
    letter-spacing: 1px;
    background-size: cover;
    padding-top: 4px;
    background-image: url("../../../../assets/images/big/boxleft-top.png");
  }

  .mk-conter {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    background-image: url("../../../../assets/images/big/boxleft-center.png");
    background-size: contain;
    .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;
      }
    }
  }
  .mk-bottom {
    height: 30px;
    width: 100%;
    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
  }

}
</style>
