<!--
 * @Author: your name
 * @Date: 2022-04-19 14:38:28
 * @LastEditTime: 2022-05-05 11:16:06
 * @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">
      <div class="left">
        <span class="text">{{ textData[0].text }}</span
        ><span class="num">{{ textData[0].num }}</span
        >{{ textData[0].unit }}
      </div>
      <div class="right">
        <span class="text">{{ textData[1].text }}</span
        ><span class="num">{{ textData[1].num }}</span
        >{{ textData[1].unit }}
      </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,
      textData: [
        { text: "隐患总数", num: 192, unit: "件" },
        { text: "已整改", num: 182, unit: "件" },
      ],
      charData: [
        [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
        [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
      ],
    };
  },
  mounted() {
    this.bottomOptions();
  },
  methods: {
    btnClick(index) {
      if (this.btnV == index) return;
      this.btnV = index;
      if (index === 0) {
        this.charData = [
          [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
          [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
        ];
        const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
          return prev + cur;
        }, 0);
        const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
          return prev + cur;
        }, 0);
        // 更改按钮下的文字
        this.textData = [
          { text: "隐患总数", num: num1, unit: "件" },
          { text: "已整改", num: num2, unit: "件" },
        ];
      } else {
        this.charData = [
          [20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
          [2, 1, 3, 1, 2, 3, 1, 1, 1, 1, 1, 1],
        ];

        const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
          return prev + cur;
        }, 0);
        const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
          return prev + cur;
        }, 0);

        // 更改按钮下的文字
        this.textData = [
          { text: "事故数量", num: num1, unit: "件" },
          { text: "伤亡人数", num: num2, unit: "人" },
        ];
      }
      this.bottomOptions();
    },
    bottomOptions() {
      const colors = ["#1890FF", "#FFC736"];
      this.options = {
        color: colors,
        tooltip: {
          // show:false,
          // formatter: "{a}: {c}(件)",
          formatter: (parm) => {
            console.log(parm);
            return `${parm.seriesName}：${parm.value}(${
              this.textData[parm.seriesIndex].unit
            })`;
          },
          // trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          // },
        },
        grid: {
          top: "40",
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {},
        legend: {
          // data: ['Evaporation', 'Temperature'],
          // left: 'right'
          show: false,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },

            // prettier-ignore
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisLabel: {
              formatter: "{value}",
              color: "#333",

              // textStyle: {
              // },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位 (件)",
            position: "left",
            nameTextStyle: {
              color: "#333",
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              formatter: "{value}",
              // textStyle: {
              color: "#333",
              // },
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            min: 0,
            max: 60,
            max: Math.max.apply(null, this.charData[0]) + 10,
          },
        ],
        series: [
          {
            name: this.textData[0].text,
            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.textData[1].text,
            type: "bar",
            data: this.charData[1],
            yAxisIndex: 0,
            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>
.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>
