<!--
 * @Author: your name
 * @Date: 2022-04-19 14:38:28
 * @LastEditTime: 2022-04-21 17:25:21
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
  <div class="chars-box all-flex-h">
    <div class="title">隐患处理和事故数量</div>
    <div class="btn-wrapper">
      <!-- <div @click="btnClick(0)">燃气事故</div> -->
      <div
        v-for="(item, index) in btnArr"
        :key="item"
        :style="{
          background: activeArr.indexOf(index) >= 0 ? colors[index] : '',
          borderColor: activeArr.indexOf(index) >= 0 ? colors[index] : '',
          color: activeArr.indexOf(index) >= 0 ? '#fff' : '',
        }"
        :class="[active(index)]"
        @click="btnClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="chars">
      <Chars ref="chars" :options="options" />
    </div>
  </div>
</template>

<script>
import Chars from "@/components/allCharsCom/Chars";

export default {
  name: "",
  components: {
    Chars,
  },
  data() {
    return {
      colors: [],
      btnArr: ["燃气数量", "隐患事故"],
      activeArr: [0, 1],
      btnV: 0,
      options: null,
      charData: [
        [1, 2, 3, 4, 5],
        [10, 30, 30, 20, 30],
      ],
    };
  },
 
  mounted() {
    this.bottomOptions();
  },
  methods: {
    active(index){
      return "active"+index
    },
    btnClick(index) {
      const ind = this.activeArr.indexOf(index);
      this.$refs.chars.myChats.dispatchAction({
        type: "legendToggleSelect",
        // 图例名称
        name: this.btnArr[index],
      });
      if (ind >= 0) {
        this.activeArr.splice(ind, 1);
      } else {
        this.activeArr.push(index);
      }
      this.bottomOptions();
    },
    bottomOptions() {
      const colors = ["#1890FF", "#FFC736"];
      this.colors = colors;
      this.options = {
        color: colors,
        tooltip: {
          show:false,
          // trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          // },
        },
        grid: {
          top: "30",
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {},
        legend: {
          // data: ['Evaporation', 'Temperature'],
          // left: 'right'
          show: false,
          // right: 30,
          // top: 0,
          // data: [
          //   {
          //     name: this.btnArr[0],
          //     textStyle: {
          //       backgroundColor: colors[0],
          //     },
          //   },
          //   {
          //     name: this.btnArr[1],
          //     textStyle: {
          //       backgroundColor: colors[1],
          //     },
          //   },
          // ],
          // formatter: function (name) {
          //   return name;
          // },
          // icon: "none",
          // itemGap: -20,
          // textStyle: {
          //   padding: [6, 8],
          //   fontSize: 12,
          //   borderRadius: 3,
          //   color: "#fff",
          // },
          // inactiveColor: "#ccc",
          // inactiveBackground: "#ccc",
          // selected: {
          //   // 选中'系列1'
          //   燃气数量: this.activeArr.indexOf(0) >= 0,
          //   // 不选中'系列2'
          //   隐患事故: this.activeArr.indexOf(1) >= 0,
          // },
          // selectorLabe:{
          //   color:"red",
          // }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },

            // prettier-ignore
            data: ['2017', '2018', '2019', '2020', '2021'],
            axisLabel: {
              formatter: "{value}",
              color: "#333",

              // textStyle: {
              // },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位 (起)",
            position: "left",
            nameTextStyle: {
              color: "#333",
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value}",
              // textStyle: {
              color: "#333",
              // },
            },

            min: 0,
            max: 10,
          },
          {
            type: "value",
            name: "单位 (个)",
            position: "right",
            nameTextStyle: {
              color: "#333",
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value}",
              // textStyle: {
              color: "#333",
              // },
            },
            min: 0,
            max: 50,
          },
        ],
        series: [
          {
            name: this.btnArr[0],
            type: "bar",
            data: this.charData[0],
            yAxisIndex: 0,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colors[0] },
                { offset: 1, color: "#ffffff" },
              ]),
            },
            barWidth: 6,
            barGap: "0%",
          },
          {
            name: this.btnArr[1],
            type: "line",
            data: this.charData[1],
            yAxisIndex: 1,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colors[1] },
                { offset: 1, color: "#ffffff" },
              ]),
            },
            barWidth: 6,
            barGap: "0%",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
// "#1890FF", "#FFC736
.chars-box {
  width: 100%;
  height: 100%;
  position: relative;
  .title {
    font-size: 16px;
    margin: 22px 0 11px 19px;
    font-weight: 600;
  }
  .btn-wrapper {
    display: flex;
    font-size: 12px;
    justify-content: flex-end;
    margin-right: 34px;
    margin-bottom: 12px;
    > div {
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #c5c5c5;
      padding: 3px 6px;
      margin-left: 3px;
      // &.left {
      //   background-color: red;
      // }
      cursor: pointer;
      &.active0:hover{
        background:#4e9de7 !important;
        border-color:#4e9de7;
        color:#fff
      }
       &.active1:hover{
        background:#f0cb6d !important;
        border-color:#f0cb6d;
        color:#fff
      }
    }
  }
  .chars {
    flex: 1;
    // background-color: red;
  }
}
</style>
