<template>
  <div class="turnover-detail">
    <div class="menu">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'domain'}" value="领域细分" @click="clickBtn('subdivide','domain')">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'area'}" value="区域细分" @click="clickBtn('subdivide','area')">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'base'}" value="基地细分" @click="clickBtn('subdivide','base')">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === 'business'}" value="事业部细分" @click="clickBtn('subdivide','business')">
    </div>
    <div class="menu">
      <input type="button" :class="{'selectedBtn': currentBtn.date === 'day'}" value="日统计" @click="clickBtn('date','day')">
      <input type="button" :class="{'selectedBtn': currentBtn.date  === 'month'}" value="月统计" @click="clickBtn('date','month')">
      <input type="button" :class="{'selectedBtn': currentBtn.date  === 'year'}" value="年统计" @click="clickBtn('date','year')">
    </div>
    <div class="card-board" v-if="currentBtn.subdivide === 'domain'">
      <contrast-card v-for="data in currentData.head" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectCard(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: 40px; 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="card-board" v-if="currentBtn.subdivide !== 'domain'">
      <contrast-card v-for="data in currentData.head" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectCard(data)" :style="listCardStyle">
        <div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
          <table-column style="float: left;width: 35%;" :data="data.data" name="title" :title="data.title" show-head :title-style="{'font-size': '18px','padding-left':'7%','white-space': 'nowrap'}"/>
          <table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" show-head/>
          <table-column style="float: left;width: 20%;" :data="data.data" name="yesterday" title="昨日" show-head/>
        </div>
      </contrast-card>
    </div>
    <div class="chart">
      <display-board class="trade_left" :title="listTitle" title_size="large">
        <winners-list style="height: 96%" id="ar_company_list" :rows="currentData[currentCard]?currentData[currentCard].list:[]" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量（万吨）':{'width':'30%'}}"/>
      </display-board>
      <line-bar-chart style="width: 75%;height: 100%;" :data="currentData[currentCard]?currentData[currentCard].detail:[]" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter"/>
    </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 data from "./mockData/order_proportion.json";
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import LineBarChart from "../components/chart/line-bar-chart.vue";

export default {
  name:"OrderProportion",
  components: {LineBarChart, WinnersList, DisplayBoard, ContrastCard, TableColumn, TitleContentMark},
  data() {
    return {
      currentData: {},
      mockData: data,
      chart: null,
      currentCard:null,
      listTitle: "当日订单量占比",
      chartTitle: "当日订单委托单位占比",
      listCardStyle:{
        width: "18%",
      },
      currentBtn:{
        date: "day",
        subdivide: "domain",
      },
    }
  },
  methods: {
    back(){
      this.$router.push({path: '/'});
    },
    changeDimension(){
      this.currentData = this.mockData[this.currentBtn.subdivide][this.currentBtn.date];
      this.currentCard = this.currentData.head[0].title;
      this.calcCardWidth();
    },
    clickBtn(type,dimension){
      this.currentBtn[type] = dimension;
      this.changeDimension();
    },
    selectCard(data){
      this.currentCard = data.title;
    },
    formatter(param){
      return "订单量：<br>" + param[0].marker + param[0].name + "：\t" + param[0].data.value + "<br> " + param[1].marker + "占比：" + param[1].data.proportion + "%";
    },
    lineFormatter(param){
      return param.data.proportion + '%';
    },
    calcCardWidth(){
      this.listCardStyle.width = "calc((100% - 4rem) / " + this.currentData.head.length + ")";
    }
  },
  mounted() {
    this.changeDimension();
    setTimeout(() => {
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);
      this.chart.setOption(this.chartOption);
    }, 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: 2%;
}
.chart{
  width: 100%;
  height: 65%;
  display: flex;
  justify-content: space-between;
  padding: 0 2rem 2rem 2rem;
}
input[type="button"]{
  height: 80%;
  margin: 0.5%;
  border: none;
  font-size: 12px;
  border-radius: 25px;
  font-weight: bold;
  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>
