<template>
  <div class="big-type-distribution-wrap">
    <nav-temp htmlType="t1" :title="title">
      <div class="conter-block" slot="mk-center">
        <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 class="echarts-legend-c">
          <div class="legend-for">
            <div
              class="legend-item"
              v-for="(item, idx) in templist[typeName]"
              :key="idx"
            >
              <div
                class="color-block"
                :style="`background: ${echartsOption.colorList[idx]};`"
              ></div>
              <div class="title-block">
                {{
                  item.name.length > 10
                    ? item.name.substr(0, 10) + "..."
                    : item.name
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav-temp>
  </div>
</template>
<script>
import EchartsPieWrap from "./echartsPie";
import NavTemp from "./navTemp";
export default {
  name: "typeDistribution",
  components: {
    EchartsPieWrap,
    NavTemp,
  },
  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: 80%; height: 100%;",
        colorList: [
          "#00deff",
          "#ff643e",
          "#8882f7",
          "#01b3d0",
          "#ff9724",
          "#168efe",
          "#00c279",
          "#ffce2a",
          "#ff88a7",
          "#3785b3",
          "#2e966b",
          "#8d68d8",
          "#c77856",
          "#ff4df9",
          "#0066ff",
          "#788a00",
          "#73c0de",
          "#91cc75",
          "#5470c6",
          "#ff69d6",
          "#d9815c",
          "#00b604",
          "#b2942e",
          "#b2942e",
          "#0656da",
          "#ff4e00",
          "#387289",
          "#5aa1bd",
          "#5443f9",
          "#708694",
          "#cd1fc7",
          "#ff00ae",
          "#a26f00",
          "#277900",
          "#00b604",
          "#ac29ff",
          "#ff3737",
          "#eae700",
          "#b1af01",
        ],
        eId: "typeEchartsPie",
      },
      title: "类型分布统计",
      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: 278px;
  display: flex;
  flex-wrap: wrap;
  .conter-block {
    width: 100%;
    height: 208px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    background-size: contain;
    .tabs-block {
      width: 305px;
      height: 28px;
      background: #00029d;
      display: flex;
      color: #fff;
      background: #072d81;
      border-radius: 14px;
      overflow: hidden;
      > div {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        letter-spacing: 7px;
        cursor: default;
      }
      .div-select {
        background: #0b79c5;
      }
    }
    .echarts-legend-c {
      width: 40%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .legend-for {
        width: 100%;
        width: 100%;
        height: calc(100% - 25px);
        overflow: auto;
        .legend-item {
          height: 25px;
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          .color-block {
            width: 9px;
            height: 8px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .echarts-legend-c .legend-for::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 3px;
  }
  .echarts-legend-c .legend-for::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px #004eb0;
    background: #004eb0;
  }
  .echarts-legend-c .legend-for::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #042764;
    border-radius: 10px;
    background: #042764;
  }
}
</style>
