<template>
  <div class="turnover-detail">
    <div class="card-board">
      <contrast-card v-for="data in currentData.head" style="height: 100%;width: 20%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectLegend(data)">
        <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :title="data.title" :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";

export default {
  name:"TurnoverDetail",
  components: {ContrastCard, TableColumn, TitleContentMark},
  data() {
    return {
      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:[
              { date: '2月1日', '汽运(元)': 0, '水运(元)': 747, '铁运(元)': 674 },
              { date: '2月2日', '汽运(元)': 300, '水运(元)': 786, '铁运(元)': 848 },
              { date: '2月3日', '汽运(元)': 500, '水运(元)': 547, '铁运(元)': 256 },
              { date: '2月4日', '汽运(元)': 100, '水运(元)': 632, '铁运(元)': 677 },
              { date: '2月5日', '汽运(元)': 300, '水运(元)': 167, '铁运(元)': 176 },
              { date: '2月6日', '汽运(元)': 800, '水运(元)': 264, '铁运(元)': 584 },
              { date: '2月7日', '汽运(元)': 100, '水运(元)': 116, '铁运(元)': 110 },
              { date: '2月8日', '汽运(元)': 500, '水运(元)': 527, '铁运(元)': 610 },
              { date: '2月9日', '汽运(元)': 1000, '水运(元)': 277, '铁运(元)': 625 },
              { date: '2月10日', '汽运(元)': 358, '水运(元)': 854, '铁运(元)': 775 },
              { date: '2月11日', '汽运(元)': 290, '水运(元)': 801, '铁运(元)': 355 },
              { date: '2月12日', '汽运(元)': 239, '水运(元)': 648, '铁运(元)': 837 },
              { date: '2月13日', '汽运(元)': 413, '水运(元)': 375, '铁运(元)': 175 },
              { date: '2月14日', '汽运(元)': 379, '水运(元)': 678, '铁运(元)': 462 },
              { date: '2月15日', '汽运(元)': 470, '水运(元)': 787, '铁运(元)': 707 },
              { date: '2月16日', '汽运(元)': 893, '水运(元)': 507, '铁运(元)': 645 },
              { date: '2月17日', '汽运(元)': 544, '水运(元)': 473, '铁运(元)': 471 },
              { date: '2月18日', '汽运(元)': 387, '水运(元)': 799, '铁运(元)': 615 },
              { date: '2月19日', '汽运(元)': 123, '水运(元)': 942, '铁运(元)': 988 },
              { date: '2月20日', '汽运(元)': 795, '水运(元)': 518, '铁运(元)': 481 },
              { date: '2月21日', '汽运(元)': 885, '水运(元)': 917, '铁运(元)': 716 },
              { date: '2月22日', '汽运(元)': 327, '水运(元)': 682, '铁运(元)': 947 },
              { date: '2月23日', '汽运(元)': 599, '水运(元)': 768, '铁运(元)': 284 },
              { date: '2月24日', '汽运(元)': 731, '水运(元)': 665, '铁运(元)': 408 },
              { date: '2月25日', '汽运(元)': 569, '水运(元)': 150, '铁运(元)': 358 },
              { date: '2月26日', '汽运(元)': 642, '水运(元)': 747, '铁运(元)': 697 },
              { date: '2月27日', '汽运(元)': 963, '水运(元)': 674, '铁运(元)': 532 },
              { date: '2月28日', '汽运(元)': 522, '水运(元)': 273, '铁运(元)': 587 },
        ]
      },
      mockDataMonth:{
        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:[
          { date: '1月', '汽运(元)': 544, '水运(元)': 473, '铁运(元)': 471 },
          { date: '2月', '汽运(元)': 387, '水运(元)': 799, '铁运(元)': 615 },
          { date: '3月', '汽运(元)': 123, '水运(元)': 942, '铁运(元)': 988 },
          { date: '4月', '汽运(元)': 795, '水运(元)': 518, '铁运(元)': 481 },
          { date: '5月', '汽运(元)': 885, '水运(元)': 917, '铁运(元)': 716 },
          { date: '6月', '汽运(元)': 327, '水运(元)': 682, '铁运(元)': 947 },
          { date: '7月', '汽运(元)': 599, '水运(元)': 768, '铁运(元)': 284 },
          { date: '8月', '汽运(元)': 731, '水运(元)': 665, '铁运(元)': 408 },
          { date: '9月', '汽运(元)': 569, '水运(元)': 150, '铁运(元)': 358 },
          { date: '10月', '汽运(元)': 642, '水运(元)': 747, '铁运(元)': 697 },
          { date: '11月', '汽运(元)': 963, '水运(元)': 674, '铁运(元)': 532 },
          { date: '12月', '汽运(元)': 522, '水运(元)': 273, '铁运(元)': 587 },
        ]
      },
      mockDataYear:{
        head:{
        "营业额":{
          title: "营业额",
          amount: "20,303",
          hb: [
            {
              title: "去年",
              amount: "21,000",
              rate: "-3.32%",
            },
          ]
        },
        "汽运营业额":{
          title: "汽运营业额",
          amount: "10,000",
          hb: [
            {
              title: "去年",
              amount: "11,000",
              rate: "-10.00%",
            },
          ]
        },
        "水运营业额":{
          title: "水运营业额",
          amount: "20,303",
          hb: [
            {
              title: "去年",
              amount: "11,000",
              rate: "-10.00%",
            },
          ]
        },
        "铁运营业额":{
          title: "铁运营业额",
          amount: "303",
          hb: [
            {
              title: "去年",
              amount: "300",
              rate: "-1.00%",
            },
          ]
        }
        },
        detail:[
          { date: '2022年', '汽运(元)': 544, '水运(元)': 674, '铁运(元)': 532 },
          { date: '2023年', '汽运(元)': 387, '水运(元)': 273, '铁运(元)': 587 },
        ]
      },
      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();
      }
    },
    changeDimension(dimension){
      this.currentBtn = dimension;
      switch (dimension) {
        case 'day':
          this.currentData = this.mockDataDay;
          this.refreshChart();
          break;
        case 'month':
          this.currentData = this.mockDataMonth;
          this.refreshChart();
          break;
        case 'year':
          this.currentData = this.mockDataYear;
          this.refreshChart();
          break;
        default:
          return;
      }
    },
    refreshChart(){
      this.chartOption.dataset.source = this.currentData.detail
      if (this.chart){
        this.chart.setOption(this.chartOption);
      }
    },
    selectLegend(data){
      let name;
      this.chart.dispatchAction({
        type: 'legendAllSelect'
      });
      switch (data.title) {
        case '营业额':
          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 = data.title;
      this.chart.setOption(this.chartOption);

    },
  },
  mounted() {
    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>
