<template>
  <div class="order-proportion">
    <div class="menu">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === '01'}" value="领域细分" @click="clickBtn('subdivide','01')">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === '02'}" value="区域细分" @click="clickBtn('subdivide','02')">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === '03'}" value="基地细分" @click="clickBtn('subdivide','03')">
      <input type="button" :class="{'selectedBtn': currentBtn.subdivide === '04'}" value="事业部细分" @click="clickBtn('subdivide','04')">
    </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 === '01'">
      <contrast-card :mouseHand="true" v-for="data in currentHeadData" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.key}" @click.native="selectCard(data)">
        <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :mark-style="{'bottom': '12%'}" :title="data.title" :content="data.amount" mark="万吨" 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: 'rgb(51, 255, 102)'}; if(data.indexOf('+') !== -1){res.color = 'rgb(255, 51, 0)'} res;"/>
        </div>
      </contrast-card>
    </div>
    <div class="card-board" v-if="currentBtn.subdivide !== '01'">
      <contrast-card :mouseHand="true" v-for="data in currentHeadData" style="height: 100%;width: 18%;" :class="{'selectCard': currentCard === data.key}" @click.native="selectCard(data)" :style="listCardStyle">
<!--        标题-->
        <div style="width: 100%; height: 20%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
          <table-column style="float: left;width: 80%;" :data="[]" name="title" :title="data.title" :title-formatter="value=> value+'(万吨/万元)'" show-head :title-style="{'font-size': '18px','padding-left':'3%','white-space': 'nowrap','font-weight': 'bold',}"/>
          <table-column style="float: left;width: 0;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="[]" name="today"/>
          <table-column style="float: left;width: 20%;" :data="[]" name="yesterday" :title="dateTimeChoice[currentBtn.date]" show-head/>
        </div>
        <div style="width: 100%; height: 80%; float:left; padding: 2%;margin-top: 1%; line-height: 28px; display: flex; align-items: center; font-size: 14px;">
          <table-column style="float: left;width: 30%;" :data="data.data" name="title"/>
          <table-column style="float: left;width: 50%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="data.data" name="today" :value-formatter="converAmont"/>
          <table-column style="float: left;width: 20%;" :data="data.data" name="yesterday" :value-formatter="converAmont"/>
        </div>
      </contrast-card>
    </div>
    <div class="chart">
      <display-board class="trade_left" title="订单量占比" title_size="large">
        <winners-list style="height: 96%;overflow: auto;" id="ar_company_list" :rows="currentDetailData" :show-icon="false" :columns-style="{'title':{'width':'50%'},'订单量（万吨）':{'width':'30%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
      </display-board>
      <line-bar-chart ref="chart" style="width: 75%;height: 100%;" :data="currentDetailData" x="company" y="value" :title="chartTitle" :formatter="formatter" :line-formatter="lineFormatter" bar-formatter="{@value}万吨"/>
    </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 DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import LineBarChart from "../components/chart/line-bar-chart.vue";
import {getHeadData} from "./js/orderProportionHeadData";
import {conver_amont} from "../../utils/numUtil";
import {getDetailData} from "./js/orderProportionDetailData";
import moment from "moment";

export default {
  name:"OrderProportion",
  components: {LineBarChart, WinnersList, DisplayBoard, ContrastCard, TableColumn, TitleContentMark},
  data() {
    return {
      today: moment().format("yyyy-MM-DD"),
      currentHeadData:[],
      currentDetailData:[],
      chart: null,
      currentCard:null,
      chartTitle: "当日订单委托单位占比",
      listCardStyle:{
        width: "18%",
      },
      currentBtn:{
        date: "day",
        subdivide: "01",
      },
      dateTimeChoice:{
        day: '昨日',
        month: "上月",
        year: "去年",
      }
    }
  },
  methods: {
    converAmont(value){
      return conver_amont(value);
    },
    back(){
      this.$router.push({path: '/'});
    },
    changeDimension(type){
      this.getHeadData(type);
    },
    getHeadData(type){
      getHeadData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
        (res) => {
          this.currentHeadData = res;
          // if (type && type !== "date"){
            this.currentCard = res[0]?res[0].key:null;
            this.chartTitle = res[0]?(res[0].title + '委托单位占比'):null;
          // }
          this.calcCardWidth();
          this.getDetailData();
        }
      );
    },
    getDetailData(){
      getDetailData({cur_day: this.today,date:this.currentBtn.date,type:this.currentBtn.subdivide,key:this.currentCard},
        (res) => {
          this.currentDetailData = res;
        }
      );
    },
    clickBtn(type,dimension){
      this.currentBtn[type] = dimension;
      this.changeDimension(type);
    },
    selectCard(data){
      this.currentCard = data.key;
      this.chartTitle = data.title + '委托单位占比';
      this.getDetailData();
    },
    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.currentHeadData.length + ")";
    },
    refreshData(){
      this.getHeadData();
    },
  },
  mounted() {
    this.changeDimension();
  },
  watch:{
    countDown(n,o){
      if (n === 1){
        this.refreshData();
      }
    },
  },
  props:{
    countDown:{
      type: Number
    }
  }
}
</script>
<style scoped>
.order-proportion{
  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>
