<template>
  <div class="target-achievement">
    <div class="menu">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L022'}" value="上海事业部"
             @click="changeDimension('L022')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L026'}" value="广东事业部"
             @click="changeDimension('L026')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L024'}" value="江苏事业部"
             @click="changeDimension('L024')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L025'}" value="天津事业部"
             @click="changeDimension('L025')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L004'}" value="成都事业部"
             @click="changeDimension('L004')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L025'}" value="山东事业部"
             @click="changeDimension('L005')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L007'}" value="河南事业部"
             @click="changeDimension('L007')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L008'}" value="华西事业部"
             @click="changeDimension('L008')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'L009'}" value="湛江事业部"
             @click="changeDimension('L009')">
    </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"),
      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();
      }
    },
    //dimension 事业部code
    async changeDimension(dimension) {
      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);
    },
  },

  getEcharts() {
    this.changeDimension('L022');
  },

  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');

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

}
</script>

<style scoped>
.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>
