<!--
 * @Author: your name
 * @Date: 2022-04-19 14:38:28
 * @LastEditTime: 2022-05-05 11:36:25
 * @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";
import {selectHiddenRanking} from "@/api/standingBook/hidden"
import {selectTrobleRanking} from "@/api/standingBook/trouble"
export default {
  name: "",
  components: {
    Chars,
  },
  data() {
    return {
      btnArr: ["隐患处置", "事故数量"],
      btnV: 0,
      options: null,
      // charData: [50, 40, 20, 40, 10, 10, 30, 10, 30, 50],
      // xData:['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
      arr: [
      ],
      countList1:[],
      countList2:[]
    };
  },
  computed: {},
  mounted() {
    this.getcount();
  },
  computed: {
    charsArr() {
      return (this.arr = this.arr.sort((a, b) => {
        return b.value - a.value;
      }));
    },
  },
  methods: {
    getcount(){
      selectHiddenRanking().then(response => {
        this.countList1 = response.data;
        this.arr = response.data;
        this.bottomOptions();
        this.getcount2();
      });
    },
    getcount2(){
      selectTrobleRanking().then(response => {
        this.countList2 = response.data;
    });
    },
    btnClick(index) {
      if (this.btnV == index) return;
      this.btnV = index;
      if (index === 0) {
        this.arr =this.countList1;
      } else {
        this.arr = this.countList2;
      }
      this.bottomOptions();
    },

    bottomOptions() {
      const colors = ["#1890FF"];
      this.options = {
        color: colors,
        tooltip: {
          // trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          // },
          formatter: "{b}: {c}(个)",
        },
        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",
              // },
            },
            max:"dataMax",
            // prettier-ignore
            data: this.charsArr.map(item=>item.name),
          },
        ],
        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: "dataMax"
          },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            data: this.charsArr.map((item) => item.value),
            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>