<template>
  <div class="target-achievement">
    <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')">
    </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="list">
      <el-table :data="data" height="650" style="font-size: 18px" :header-cell-style="headStyleJs" :cell-style="bodyStyleJs">
        <el-table-column
          prop="group_name"
          label="" width="300">
        </el-table-column>
        <el-table-column
          label="吨位(万吨)">
          <el-table-column
            prop="unit_weight"
            :formatter="cellNumFormatter"
            label="实际值">
          </el-table-column>
          <el-table-column
            prop="target_unit_weight"
            :formatter="cellNumFormatter"
            label="目标值">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="营业额(万元)">
          <el-table-column
            prop="sell_settle_amount"
            :formatter="cellNumFormatter"
            label="实际值">
          </el-table-column>
          <el-table-column
            prop="target_sell_settle_amount"
            :formatter="cellNumFormatter"
            label="目标值">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="净利润(万元)">
          <el-table-column
            prop="gross_profit_amount"
            :formatter="cellNumFormatter"
            label="实际值">
          </el-table-column>
          <el-table-column
            prop="target_gross_profit_amount"
            :formatter="cellNumFormatter"
            label="目标值">
          </el-table-column>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>
<script>

import mockData from "./mockData/target-achievement.json";
import {getData} from "./js/targetAchievementData";
import {conver_amont} from "../../utils/numUtil";

export default {
  name:"TargetAchievement",
  data() {
    return {
      borderLabel:[
        '吨位(万吨)',
        '营业额(万元)',
        '营业额(万元)',
      ],
      borderField:[
        'target_unit_weight',
        'target_sell_settle_amount',
      ],
      currentBtn:{
        date: this.$route.query.code ? this.$route.query.code : "day",
        subdivide: "01",
      },
      dateTimeChoice:{
        day: '昨日',
        month: "上月",
        year: "去年",
      },
      rowHeight: "50px",
      data: mockData["01"][this.$route.query.code ? this.$route.query.code : "day"]
    };
  },
  methods: {
    clickBtn(type,dimension){
      this.currentBtn[type] = dimension;
      this.getData();
    },
    getData() {
      getData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
        (res) => {
          this.data = res;
        }
      );
    },
    bodyStyleJs(param){
      var {row, rowIndex,column} = param;
      let style = {
        height: this.rowHeight,
        "text-align": "center"
      };
      if (row.group_name && (row.group_name.indexOf("总计") !== -1 || row.group_name.indexOf("小计") !== -1)){
        style["font-weight"] = "bolder";
        style["font-size"] = "x-large";
      }
      if (column && (column.property === "group_name" || this.borderField.includes(column.property))){
        style["border-right"] = "1px solid #aaaa";
      }
      style["background-color"] = (rowIndex % 2 === 1)?"#0E5FFF20":"#0E5FFF30";
      return style;
    },
    headStyleJs(param){
      let style = {
        "background-color": "var(--global-background-color)",
        "text-align": "center",
        color: "white"
      };
      if (!param.column.label || this.borderLabel.includes(param.column.label) || this.borderField.includes(param.column.property)){
        style["border-right"] = "1px solid #aaaa";
      }
      return style;
    },
    cellNumFormatter(row, column, cellValue, index){
      return conver_amont(cellValue);
    }
  },
  mounted() {
    this.getData();
  },
  watch:{
    countDown(n,o){
      if (n === 1){
        this.getData();
      }
    },
  },
  props:{
    countDown:{
      type: Number
    }
  }
};
</script>
<style scoped>
.target-achievement{
  width: 100%;
  height: 100%;
}
.menu{
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
  padding-left: 2%;
}
.list{
  height: 80%;
  width: 100%;
  color: white;
  padding: 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;
}
.el-table{
  color: white;
  background-color: rgba(0,0,0,0);
  border: none;
}

.el-table::-webkit-scrollbar { width: 0 !important }

.list /deep/ td.el-table__cell {
  border: none;
}
.list /deep/ th.el-table__cell {
  border: none;
}
.list /deep/ .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}

/* // ----------修改elementui表格的默认样式----------- */
.list /deep/ .el-table__body-wrapper::-webkit-scrollbar {
// 整个滚动条
  width: 0; // 纵向滚动条的宽度
  background: rgba(213, 215, 220, 0.3);
  border: none;
}
.list /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  // 滚动条轨道
  border: none;
}

.list /deep/ tr:hover>td.el-table__cell{background-color:#0000}

/* // --------------------隐藏table gutter列和内容区右侧的空白 start */
.list /deep/ th.gutter {
  display: none;
  width: 0;
}
/*
.list /deep/ colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

 */
.list /deep/ tr{
  background-color: #0000;
}

.list /deep/ .el-table--group::after{
  display: none;
}

/* // --------------------隐藏table gutter列和内容区右侧的空白 end */

.unSelectedBtn{
  color: #00c8d6;
  background-color: #1234a1;
}
</style>
