<!--
 * @Author: your name
 * @Date: 2022-04-19 14:38:28
 * @LastEditTime: 2022-04-21 17:24:56
 * @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
        v-for="(item, index) in btnArr"
        :key="item"
        class="left"
        :class="{ active: btnV == index }"
        @click="btnClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="num-wrapper" v-if="false">
      <div class="left">
        <span class="text">隐患总数</span><span class="num">12</span>件
      </div>
      <div class="right">
        <span class="text">已整改</span><span class="num">10</span>件
      </div>
    </div>

    <div class="chars">
      <Chars :options="options" />
    </div>
  </div>
</template>

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

export default {
  name: "",
  components: {
    Chars,
  },
  data() {
    return {
      btnArr: ["隐患处置", "事故数量"],
      btnV: 0,
      options: null,
      charData: [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]],
    };
  },
  mounted() {
    this.bottomOptions();
  },
  methods: {
    btnClick(index) {
      if (this.btnV == index) return;
      this.btnV = index;
      if (index === 0) {
        this.charData = [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]];
      } else {
        this.charData = [[20, 10, 40, 30, 20, 20, 20, 10, 20, 10]];
      }
      this.bottomOptions();
    },
    bottomOptions() {
      const colors = ["#1890FF"];
      this.options = {
        color: colors,
        tooltip: {
          // 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,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: 30, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 6, // 刻度标签与轴线之间的距离
              // formatter: "{value} Day", // 刻度标签的内容格式器
              // textStyle: {
              color: "#333",
              // },
            },

            // prettier-ignore
            data: ['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位 (件)",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            nameTextStyle: {
              color: "#333",
            },
            axisLabel: {
              formatter: "{value}",
              // textStyle: {
              color: "#333",
              // },
            },
            min: 0,
            max: 60,
          },
        ],
        series: [
          {
            name: "Evaporation",
            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: 10,
            barGap: "0%",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.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;
      cursor: pointer;
      margin-left: 3px;
      &.active {
        background-color: #1a91ff;
        color: #fff;
        border: 1px solid #1a91ff;
      }
      &:hover {
        background: #1a91ffcc;
        color: #fff;
        border: 1px solid #3291ebcc;
      }
    }
  }
  // .num-wrapper {
  //   position: absolute;
  //   display: flex;
  //   top: 100px;
  //   right: 50px;
  //   > div {
  //     font-size: 12px;
  //     margin-left: 19px;
  //     display: inline-block;
  //     position: relative;
  //     .text {
  //       margin-right: 10px;
  //     }
  //     .num {
  //       margin-right: 2px;
  //     }
  //     &.left {
  //       &::before {
  //         content: "";
  //         position: absolute;
  //         width: 6px;
  //         height: 6px;
  //         background-color: #1a91ff;
  //         border-radius: 50%;
  //         left: -10px;
  //         top: 50%;
  //         margin-top: -3px;
  //       }
  //       &::after {
  //       }
  //       .num {
  //         color: #1a91ff;
  //       }
  //     }
  //     &.right {
  //        &::before {
  //         content: "";
  //         position: absolute;
  //         width: 6px;
  //         height: 6px;
  //         background-color: #ffcb44;
  //         border-radius: 50%;
  //         left: -10px;
  //         top: 50%;
  //         margin-top: -3px;
  //       }
  //       .num {
  //         color: #ffcb44;
  //       }
  //     }
  //   }
  // }
  .chars {
    flex: 1;
    // background-color: red;
  }
}
</style>
