<!--
 * @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";
import {selectHiddenCount} from "@/api/standingBook/hidden"
import {selectCount} from "@/api/standingBook/trouble"
export default {
  name: "",
  components: {
    Chars,
  },
  data() {
    return {
      btnArr: ["天然气", "液化石油气"],
      btnV: 0,
      options: null,
      textData: [
        { text: "供应量", num: 260, unit: "km³" },
        { text: "需求量", num: 212, unit: "km³" },
      ],
      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]],
      charData1:[
        [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
        [10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
      ],
      charData2:[
        [20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
        [10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
      ],
      dayList:[]
    };
  },
  mounted() {

    //this.gethiddenCount();
    this.bottomOptions();
  },
  methods: {
    gethiddenCount(){
      this.textData =  [
        { text: "供应量", num: 260, unit: "km³" },
        { text: "需求量", num: 212, unit: "km³" },
      ];
      selectHiddenCount().then(response => {
        console.log(response)
        var ynum =[];
        var znum =[];
        // for(var item of response.data){
        //   console.log(item.zcount)
        //   znum.push(item.zcount)
        //   this.textData[0].num+=item.zcount;
        //   ynum.push(item.ycount)
        //   this.textData[1].num+=item.ycount;
        //   this.dayList.push(item.month.substr(5,7))
        // }
        this.charData1.push(znum);
        this.charData1.push(ynum);
        this.charData = this.charData1;
        console.log(this.charData1)
        this.bottomOptions();
      });
    },
    gettroubleCount(){
      this.textData = [
        { text: "供应量", num: 250, unit: "km³" },
        { text: "需求量", num: 202, unit: "km³" },
      ];
      selectCount().then(response => {
        var ynum =[];
        var znum =[];
        // for(var item of response.data){
        //   znum.push(item.count)
        //   this.textData[0].num+=item.count;
        //   ynum.push(item.hurtNum)
        //   this.textData[1].num+=item.hurtNum;
        // }
      this.charData2.push(znum);
      this.charData2.push(ynum);
      this.charData = this.charData2;
      this.bottomOptions();
    });
    },

    btnClick(index) {
      if (this.btnV == index) return;
      this.btnV = index;
      if (index === 0) {
        this.gethiddenCount();
        // 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],
        // ];
        // this.charData = this.charData1;
        // 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.gettroubleCount();
        // 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],
        // ];
        // this.charData = this.charData2;
        // 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: 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>
