<template>
  <div class="big-type-distribution-wrap">
    <div class="title-t">{{title}}</div>
    <div class="count-echarts-wrap">
      <div class="tabs-block">
        <div @click="typeName = 'alarm'" :class="typeName === 'alarm' ? 'div-select' : ''">报警</div>
        <div @click="typeName = 'waraing'" :class="typeName === 'waraing' ? 'div-select' : ''">预警</div>
      </div>
      <echarts-pie-wrap
        ref="echartsPieType"
        :styles="echartsOption.styles"
        :colorList="echartsOption.colorList"
        :eId="echartsOption.eId"
        :option="templist[typeName]"
      ></echarts-pie-wrap>
    </div>
  </div>
</template>
<script>
import EchartsPieWrap from "./echartsPie";
export default {
  name: "typeDistribution",
  components: {
    EchartsPieWrap
  },
  props: ['result'],
  data() {
    return {
      resultList: [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" }
      ],
      templist: {
        alarm: [],
        waraing: []
      },
      echartsOption: {
        styles: "width: 100%; height: 100%;",
        colorList: [],
        eId: "typeEchartsPie"
      },
      title: "最近2天警情同比",
      typeName: 'alarm'
    };
  },
  watch: {
    typeName(val, old) {
      if (val) {
        this.updateEcharts()
      }
    },
    result: {
      handler: function(list, oldVal) {
        this.templist = {
          alarm: [],
          waraing: []
        }
        if (list) {
          for(var i = 0; i < list.length; i++) {
            // console.log(list[i]['typeCode'].indexOf('a'))
            if (list[i]['typeCode'].indexOf('a') === 0) {
              this.templist['alarm'].push({ value: list[i].alarmTotal, name: list[i].typeName })
            } else if (list[i]['typeCode'].indexOf('w') === 0) {
              this.templist['waraing'].push({ value: list[i].alarmTotal, name: list[i].typeName })
            }
          }
        }
        // console.log(this.templist)
        this.updateEcharts()
      },
      deep: true
    }
  },
  methods: {
    // 类型发生变化根据新数据刷新 图表信息
    updateEcharts() {
      this.$refs.echartsPieType.updateEchart()
    }
  }
};
</script>

<style lang="scss">
.big-type-distribution-wrap {
  width: 100%;
  height: 350px;
  display: flex;
  flex-wrap: wrap;
  .title-t {
    font-size: 16px;
    letter-spacing: 1px;
    height: 60px;
    width: 100%;
    background-size: cover;
    display: flex;
    justify-content: left;
    padding-left: 45px;
    align-items: center;
    padding-bottom: 10px;
    background-image: url("../../../../assets/images/big/b.png");
  }
  .count-echarts-wrap {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    .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>
