<template>
  <div class="turnover-detail">
    <div class="card-board">
      <contrast-card :mouseHand="true" 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')">
      <input type="button" :class="{'selectedBtn': currentBtn === 'yoy'}" value="同期对比"
             @click="changeDimension('yoy')">
    </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: 'bar',
            label: {
              show: true,
              position: 'top',
              color: "#00CCD2",
              formatter:this.labelFormatterWeight(4)
            },
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                {offset: 0, color: '#91cc75'},
                {offset: 1, color: '#91cc75'}
              ]
            },
          },
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: "#FFFAB7",
              formatter:this.labelFormatterWeight(5)
            },
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                {offset: 0, color: '#f2cc78'},
                {offset: 1, color: '#f2cc78'}
              ]
            },
          },
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: "#81FBB8",
              formatter:this.labelFormatterWeight(6)
            },
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                {offset: 0, color: '#ee6666'},
                {offset: 1, color: '#ee6666'}
              ]
            },
          }
        ]
      },
      discountOption : {
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Precipitation  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  );
                }
              }
            },
            // prettier-ignore
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    'Precipitation  ' +
                    params.value +
                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  );
                }
              }
            },
            // prettier-ignore
            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Precipitation(2015)',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              1000, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Precipitation(2016)',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              2, 5.9, 11.1, 18.7, 48.3, 69.2, 21.6, 46.6, 55.4, 18.4, 10.3, 2000
            ]
          }
        ]
      }
    }
  },
  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]]) + "万元";
      }
    },
    labelFormatterWeight(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;
        case 'yoy':
          await this.getYearYoyDate();
          this.refreshDiscountChart();
          break;
        default:
          return;
      }
    },
    refreshChart() {
      this.chartOption.dataset.source = this.currentData.detail
      if (this.chart) {
        this.chart.dispose();
        let chartDom = this.$refs.chart;
        this.chart = echarts.init(chartDom);
        this.chart.setOption(this.chartOption);
      }
    },

    refreshDiscountChart(tspt) {
      this.chart.dispose();
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);
      this.discountOption.xAxis = this.currentData.detail.sumData.xAxis
      this.discountOption.series = this.currentData.detail.sumData.series
      if(tspt==10){
        this.discountOption.xAxis = this.currentData.detail.tspt10.xAxis
        this.discountOption.series = this.currentData.detail.tspt10.series
      }
      if(tspt==20){
        this.discountOption.xAxis = this.currentData.detail.tspt20.xAxis
        this.discountOption.series = this.currentData.detail.tspt20.series
      }
      if(tspt==30){
        this.discountOption.xAxis = this.currentData.detail.tspt30.xAxis
        this.discountOption.series = this.currentData.detail.tspt30.series
      }
      this.chart.setOption(this.discountOption);
    },


    selectLegend(title) {
      let name;
      let tspt;
      this.chart.dispatchAction({
        type: 'legendAllSelect'
      });
      switch (title) {
        case '营业额':
          break;
        case '汽运营业额':
          name = "汽运(万元)";
          tspt = 10;
          break;
        case '水运营业额':
          name = "水运(万元)";
          tspt = 30;
          break;
        case '铁运营业额':
          name = "铁运(万元)";
          tspt = 20;
          break;
        case '汽运成本':
          name = "汽运(万元)";
          tspt = 10;
          break;
        case '水运成本':
          name = "水运(万元)";
          tspt = 30;
          break;
        case '铁运成本':
          name = "铁运(万元)";
          tspt = 20;
          break;

        case '汽运毛利':
          name = "汽运(万元)";
          tspt = 10;
          break;
        case '水运毛利':
          name = "水运(万元)";
          tspt = 30;
          break;
        case '铁运毛利':
          name = "铁运(万元)";
          tspt = 20;
          break;
        default:
          break;
      }
      if (this.currentBtn == 'yoy') {
        this.refreshDiscountChart(tspt)
      } else {
        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 getYearYoyDate() {
      this.currentData = await getTrunOver("yoy", 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>
