<template>
  <div v-loading="loading">
    <div class="search clear" style="align-items: center;">
      <el-switch
        style="margin-right: 10px;"
        v-model="isTenThound"
        active-text="万元"
        inactive-text="元" 
        />

      <el-select size="small" style="margin-right:10px" v-model="companyNo" @change="requestData">
        <el-option v-for="depart in companies" :key="depart.id" :value="depart.value" :label="depart.label" />
      </el-select>

      <el-date-picker class="fr picker" v-model="daytime" style=";width:100px" value-format="yyyy" :editable="false"
        :clearable="false" :size="'small'" type="year" format="yyyy" align="right" placeholder="选择日期"
        :picker-options="{ disabledDate(time) { return time.getTime() > Date.now(); } }" @change="requestData" />
    </div>

    <el-row style="margin-top:10px">
      <el-table border size="mini" :data="tableData" :cell-class-name="setCellClassName">
        <el-table-column fixed="left" label="月度" prop="month" align="center" width="60px" />
        <el-table-column label="当月营收目标" align="center" min-width="140px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.total_tips,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月营业收入(净)" align="center" min-width="140px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.pure_sale,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月营收完成%" align="center" min-width="140px">
          <template slot-scope="scope">
            {{Number(scope.row.completion_rate).toFixed(2) + "%"}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利完成%" align="center" min-width="140px">
          <template slot-scope="scope">
            {{Number(scope.row.cost_rate).toFixed(2) + "%"}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利指标" align="center" min-width="140px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.cost_tips,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利完成" align="center" min-width="140px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.pure_profit,isTenThound)}}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>


<script>
import asyncRequest from "@/api/newResults";
import { unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
export default {
  data(){
    return {
      loading: false,
      isTenThound:true,
      daytime: "",
      tableData: [],
      companyNo: "",
      companies:[
        { value:"",label: "所有公司"},
        { value:"GS2302231125079621",label: "北京百辰荣达国际科贸有限公司"},
        { value:"GS2302231323386950",label: "北京泓源广诚国际商贸有限公司"},
        { value:"GS2203161855277894 ",label: "北京万宇恒通国际科贸有限公司"},
        { value:"GS2302231124114965",label: "普润&锦兴&知事"}
      ]
    }
  },
  mounted() {
    this.daytime = this.transformTime();
    this.requestData();
  },
  methods: {
    unit2TenThousand,
    transformTime() {
      let time = new Date();
      let y = time.getFullYear();
      let M = time.getMonth() + 1;
      let d = time.getDate();
      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
    },
    async requestData() {
      this.loading = true;


      let jxResult = null;
      if(this.companyNo === "GS2302231124114965"){
        // console.log(1);
        jxResult = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: "GS2304031312553746" })
      };

      console.log(jxResult)

      const result = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: this.companyNo })
      
      switch(Number(result.code)){
        case 0:
          this.tableData = (result.data || []).map(tableItem => {
            /* 销售净额 = 销售额 - 退货额 **/
            const pure_sale = subtraction(tableItem.sale_total,tableItem.th_total)
            /* 指标达成率 = 销售净额 / 销售指标 **/
            const completion_rate = multiplication(division(pure_sale,tableItem.total_tips),100)
            /* 采购净额 = 采购额 - 采购退货额 **/
            const pure_purch = subtraction(tableItem.cgd_total,tableItem.cgd_th_total)
            /* 毛利润 = (本月销售净额 - 本月采购净额) **/
            const pure_profit = subtraction(pure_sale,pure_purch)
            /*  毛利率 = (本月毛利润 / 本月销售净额) * 100 **/
            const pure_interest_rate = multiplication(division(pure_profit,pure_sale) || 0,100)
            return {
              pure_sale,
              pure_purch,
              pure_profit,
              completion_rate,
              pure_interest_rate,
              month:tableItem.month,
              cost_tips:tableItem.cost_tips,
              total_tips:tableItem.total_tips,
              cost_rate: Number(tableItem.cost_tips) === 0 ? 0 : multiplication(division(pure_profit, tableItem.cost_tips) || 0, 100).toFixed(2)
            }
          })

          console.log(this.tableData);

          // const totalItem = createTotalItem(tableData)
          // totalItem.month = "年度合计"
          // /* 年度指标达成率 = (年度销售净额 / 年度销售指标) **/
          // totalItem.completion_rate = multiplication(division(totalItem.pure_sale,totalItem.total_tips),100)
          // /* 年度毛利润 = 年度销售额 - 年度采购额 **/
          // totalItem.pure_profit = subtraction(totalItem.pure_sale,totalItem.pure_purch)
          // /* 年度毛利率 = (年度毛利润 / 年度销售额) **/
          // totalItem.pure_interest_rate = multiplication(division(totalItem.pure_profit,totalItem.pure_sale),100)
          // this.tableData = [...tableData,totalItem]
          break
        default:
          break
      }
      // this.getHeight();
      this.loading = false;
    }
  }
}
</script>



<style lang="scss" scoped>

.new-results{
  .search {
    height:36px;
    display: flex;
    justify-content: end;
    padding:0px 10px;
    margin-top:10px
  }
}
</style>

