<template>
  <div class="target-achievement">
    <div class="menu">
      <input type="button" value="上海事业部" @click="changeDimension('L022', 1)" :style="dynamicStyle(1)">
      <input type="button" value="广东事业部" @click="changeDimension('L026', 2)" :style="dynamicStyle(2)">
      <input type="button" value="江苏事业部" @click="changeDimension('L024', 3)" :style="dynamicStyle(3)">
      <input type="button" value="天津事业部" @click="changeDimension('L025', 4)" :style="dynamicStyle(4)">
      <input type="button" value="成都事业部" @click="changeDimension('L004', 5)" :style="dynamicStyle(5)">
      <input type="button" value="山东事业部" @click="changeDimension('L005', 6)" :style="dynamicStyle(6)">
      <input type="button" value="河南事业部" @click="changeDimension('L007', 7)" :style="dynamicStyle(7)">
      <input type="button" value="湛江事业部" @click="changeDimension('L009', 9)" :style="dynamicStyle(9)">
    </div>
    <div class="chart">
      <div ref="chart" style="width: 100%;height: 100%;"/>
    </div>
    <div class="bar">
      <div ref="bar" style="width: 100%;height: 100%;"/>
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import moment from 'moment'
import {getShipmentWeight} from "./turnoverDetail"

export default {
  name: "DepartmentShipment",
  data() {
    return {
      // today: "2023-06-30",
      today: moment().format("yyyy-MM-DD"),
      current_index: 1,
      discountOption: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top:'30%',
          left: '5%',
          right: '5%',
          bottom: '5%'
        },
        legend: {
          align:'right',//文字在前图标在后
          left:'3%',
          top:'15%',
          textStyle:{
            fontSize: 18,//字体大小
            color: '#ffffff'//字体颜色
          },
          data: ['完成量', '未完成量']
        },
        yAxis: {
          type: 'value',
        },
        xAxis: [],
        series: []
      }
    }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    dynamicStyle(index) {
      return {
        background: index === this.current_index ? '#00F6F0' : null,
        color: index === this.current_index ? '#000000' : null,
      };
    },
    //dimension 事业部code
    async changeDimension(dimension, index) {
      this.currentBtn = dimension;
      // this.chart.dispose();
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);

      this.currentData = await getShipmentWeight(dimension, this.today)

      //折线图加载
      this.discountOption.xAxis = this.currentData.xAxis;
      this.discountOption.series = this.currentData.series;
      this.chart.setOption(this.discountOption);
      //柱状图加载
      this.discountOption.series = this.currentData.seriesBar;
      this.bar.setOption(this.discountOption);

      this.current_index = index;
    },
  },

  mounted() {
    setTimeout(() => {
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);

      let barDom = this.$refs.bar;
      this.bar = echarts.init(barDom);

      this.changeDimension('L022', 1);

      window.addEventListener('resize', this.resizeChart);
    }, 500);
  }

}
</script>

<style scoped>
.bg_color {
  background-color: #00F6F0;
}

.turnover-detail {
  width: 100%;
  height: 100%;
}

.card-board {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

.menu {
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  padding-left: 5%;
}

.chart {
  width: 100%;
  height: 45%;
}
.bar {
  width: 100%;
  height: 45%;
}

input[type="button"] {
  height: 80%;
  margin: 0.5%;
  border: none;
  font-size: 12px;
  font-weight: bold;
  border-radius: 25px;
  padding: 0 10px;
  color: #00c8d6;
  background-color: #1234a1;
}

input[type="button"]:hover {
  color: #1234a1 !important;
  background-color: #00c8d6 !important;
}

.selectedBtn {
  color: #1234a1 !important;
  background-color: #00c8d6 !important;
}

.unSelectedBtn {
  color: #00c8d6;
  background-color: #1234a1;
}

.selectCard {
  background-color: var(--card-background-select-color) !important;
}
</style>
