<template>
  <div class="turnover-detail">
    <div class="card-board">
      <contrast-card v-for="(data,key)  in currentData.head" style="height: 100%;width: 23%;"
                     :class="{'selectCard': currentCard === key}"
                     @click.native="selectLegend(key)">
        <title-content-mark style="color: #369afa;float: left;width: 30%;font-size: 18px"
                            :title-style="{'font-weight': 'bold','line-height': '30px'}" :mark-style="{'bottom': '12%'}" :title="key" :content="data.amount" mark="万元" isBold/>
        <div
          style="width: 70%; 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"
import {conver_amont} from "../../utils/numUtil";
import moment from 'moment'
export default {
  name: "TurnoverDetail",
  components: {ContrastCard, TableColumn, TitleContentMark},
  data() {
    return {
      today: moment().format("yyyy-MM-DD"),
      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: {
          trigger: 'axis',
          valueFormatter: this.valueFormatter
        },
        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",
              formatter:this.labelFormatter(1)
            },
            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",
              formatter:this.labelFormatter(2)
            },
            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",
              formatter:this.labelFormatter(3)
            },
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                {offset: 0, color: '#81FBB8'},
                {offset: 1, color: '#28C76F'}
              ]
            },
          },
          {
            type: 'line',
            color: 'red',
            lineStyle:{
              width: 3,
            },
            data: []
          }
        ]
      }
    }
  },
  watch: {},
  methods: {
    back() {
      this.$router.push({path: '/'});
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    valueFormatter(param) {
      return conver_amont(param);
    },
    labelFormatter(dimensionNames){
      return function (param){
        return conver_amont(param.value[param.dimensionNames[dimensionNames]]) + "万元";

      }
    },
    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) {
      let name;
      this.chart.dispatchAction({
        type: 'legendAllSelect'
      });
      switch (title) {
        case '营业额':
          break;
        case '汽运营业额':
          name = "汽运(万元)";
          break;
        case '水运营业额':
          name = "水运(万元)";
          break;
        case '铁运营业额':
          name = "铁运(万元)";
          break;
        case '汽运成本':
          name = "汽运(万元)";
          break;
        case '水运成本':
          name = "水运(万元)";
          break;
        case '铁运成本':
          name = "铁运(万元)";
          break;

        case '汽运毛利':
          name = "汽运(万元)";
          break;
        case '水运毛利':
          name = "水运(万元)";
          break;
        case '铁运毛利':
          name = "铁运(万元)";
          break;
        default:
          break;
      }
      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 = 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>
