<template>
  <div class="turnover-detail">
    <div class="card-board">
      <contrast-card v-for="(data,key)  in currentData.head" style="height: 100%;width: 20%;" :class="{'selectCard': key}"
                     @click.native="selectLegend(key)">
        <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px"
                            :title-style="{'font-weight': 'bold'}" :title="key" :content="data.amount" isBold/>
        <div
          style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;">
          <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
          <table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
          <table-column style="float: left;width: 35%;" :data="data.hb" name="rate"
                        cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res;"/>
        </div>
      </contrast-card>
    </div>
    <div class="menu">
      <input type="button" :class="{'selectedBtn': currentBtn === 'day'}" value="日统计"
             @click="changeDimension('day')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'month'}" value="月统计"
             @click="changeDimension('month')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'year'}" value="年统计"
             @click="changeDimension('year')">
    </div>
    <div class="chart">
      <div ref="chart" style="width: 100%;height: 100%;" @click=""/>
    </div>
  </div>
</template>
<script>

import TitleContentMark from "../components/layout/title-content-mark.vue";
import TableColumn from "../components/table/table-column.vue";
import ContrastCard from "../components/card/contrast-card.vue";
import * as echarts from "echarts";
import {getTrunOver} from "./turnoverDetail"

export default {
  name: "TurnoverDetail",
  components: {ContrastCard, TableColumn, TitleContentMark},
  data() {
    return {
      today: '2022-06-26',
      curPageCode: this.$route.query.code ? this.$route.query.code : "yye",
      currentData: {},
      mockDataDay: {
        head: {
          "营业额": {
            title: "营业额",
            amount: "20,303",
            hb: [
              {
                title: "昨日",
                amount: "21,000",
                rate: "-3.32%",
              },
              {
                title: "上月",
                amount: "21,000",
                rate: "+4.92%",
              }
            ]
          },
          "汽运营业额": {
            title: "汽运营业额",
            amount: "10,000",
            hb: [
              {
                title: "昨日",
                amount: "11,000",
                rate: "-10.00%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "+0.00%",
              }
            ]
          },
          "水运营业额": {
            title: "水运营业额",
            amount: "20,303",
            hb: [
              {
                title: "昨日",
                amount: "11,000",
                rate: "-10.00%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "+0.00%",
              }
            ]
          },
          "铁运营业额": {
            title: "铁运营业额",
            amount: "303",
            hb: [
              {
                title: "昨日",
                amount: "300",
                rate: "-1.00%",
              },
              {
                title: "上月",
                amount: "301",
                rate: "+0.64%",
              }
            ]
          }
        },
        detail: [
          {"汽运(元)": 0, "水运(元)": 0, "铁运(元)": 0, "date": "2023-05-06"}
        ]
      },
      chart: null,
      currentBtn: "day",
      currentLegend: '汽运(元)',
      currentCard: '营业额',
      chartOption:{
        legend: {
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {},
        dataset: {
          dimensions: ['date', '汽运(元)', '水运(元)', '铁运(元)'],
          source: []
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 45,
            color: 'white'
          }
        },
        yAxis: {
          axisLabel: {
            color: 'white'
          }
        },
        series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: "#00CCD2",
              },
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  {offset: 0, color: '#00CCD2'},
                  {offset: 1, color: '#00A2FF'}
                ]
              },
            },
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: "#FFFAB7",
              },
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  {offset: 0, color: '#FFFAB7'},
                  {offset: 1, color: '#FFF459'}
                ]
              },
            },
            {
              type: 'bar',
              label: {
                show: true,
                position: 'top',
                color: "#81FBB8",
              },
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  {offset: 0, color: '#81FBB8'},
                  {offset: 1, color: '#28C76F'}
                ]
              },
            },
            {
              type: 'line',
              color: 'red',
              data: []
            }
        ]
      }
    }
  },
  watch: {},
  methods: {
    back(){
      this.$router.push({path: '/'});
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    async changeDimension(dimension) {
      this.currentBtn = dimension;
      switch (dimension) {
        case 'day':
          await this.getDayDate();
          this.refreshChart();
          break;
        case 'month':
          await this.getMonthDate();
          this.refreshChart();
          break;
        case 'year':
          await this.getYearDate();
          this.refreshChart();
          break;
        default:
          return;
      }
    },
    refreshChart() {
      this.chartOption.dataset.source = this.currentData.detail
      if (this.chart) {
        this.chart.setOption(this.chartOption);
      }
    },
    selectLegend(title) {
      console.log(title)
      let name;
      this.chart.dispatchAction({
        type: 'legendAllSelect'
      });
      switch (title) {
        case '营业额':
          break;
        case '汽运营业额':
          name = "汽运(元)";
          break;
        case '水运营业额':
          name = "水运(元)";
          break;
        case '铁运营业额':
          name = "铁运(元)";
          break;
        default:
          break;
      }
      console.log(name)
      if (name) {
        this.chart.dispatchAction({
          type: 'legendInverseSelect'
        });
        this.chart.dispatchAction({
          type: 'legendSelect',
          name: name
        })
        this.chartOption.series[3].encode = {x: 'date', y: name};
        this.chartOption.series[3].data = undefined;
      } else {
        this.chartOption.series[3].data = [];
      }
      this.currentLegend = name;
      this.currentCard = data.title;
      this.chart.setOption(this.chartOption);

    },
    //获取日维度数据
    async getDayDate() {
      this.currentData = await getTrunOver("day", this.curPageCode, this.today)
    },
    //获取月维度数据
    async getMonthDate() {
      this.currentData = await getTrunOver("month", this.curPageCode, this.today)
    },
    //获取月维度数据
    async getYearDate() {
      this.currentData = await getTrunOver("year", this.curPageCode, this.today)
    },
  },
  async mounted() {
    await this.getDayDate();
    // this.currentData = this.mockDataDay;
    this.refreshChart();
    setTimeout(() => {
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);
      this.chart.setOption(this.chartOption);
      window.addEventListener('resize', this.resizeChart);
    }, 500);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  props: {},

}
</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: 70%;
}

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>
