<template>
  <div class="SalesReportRejectedNew">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      :max-height="maxHeight"
      :size="'mini'"
      style="width: 100%"
      row-key="id"
      :span-method="objectSpanMethod"
      stripe
    >
      <el-table-column label="部门" fixed="left" width="80" prop="depart">
        <template slot-scope="scope">{{mapResponseCompletionCompanyName[scope.row.depart] || scope.row.depart}}</template>
      </el-table-column>
      <el-table-column label="业绩类型" prop="type" align="center" />
      <el-table-column label="日净销售额" prop="day" align="center" >
        <template slot-scope="scope">
           {{ unit2TenThousand(scope.row.day) }}
        </template>
      </el-table-column>
      <el-table-column label="月净销售额" prop="month" align="center">
        <template slot-scope="scope">
          {{ unit2TenThousand(scope.row.month) }}
        </template>
      </el-table-column>
      <el-table-column label="月占比" prop="proportion" align="center">
        <template slot-scope="scope">
          {{ scope.row.proportion }}%
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import asyncRequest from "@/aapi/report";
import setHeight from "@/mixins/index";
import { 
  mapResponseCompletionCompanyName,
  unit2TenThousand,
  getCompanyLabel,
  addition, 
  division,
multiplication
} from "./_utils";

export default {
  name: "WanyuTypeReport",
  props: ["date"],
  mixins: [setHeight],
  watch: {
    date: function(val) {
      this.dataTime = val;
      if (val) {
        this.searchList();
      }
    }
  },
  data() {
    return {
      total:{
        day:0,
        month:0,
        total_tips: 0
      },
      mapResponseCompletionCompanyName,
      dataTime: this.date,
      loading: false,
      maxHeight: "0",
      tableData: []
    };
  },
  async created() {
    window.onresize = () => {
      this.getHeight();
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
    this.searchList();
  },
  methods: {
    getCompanyLabel,
    unit2TenThousand,
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const res = await asyncRequest.companyReport({
        daytime: this.date,
        companyNo: "GS2203161855277894"
      });

      if (res.code === 0 && res.data && res.data.length > 0) {

        /***
         * depart 部门
         * mchannel_sale_total  部门每月渠道净销售额  
         * mzy_sale_total 部门每月直营净销售额
         * zy_sale_total 部门每日净销售额
         * channel_sale_total 部门每日渠道净销售额
        */
        const tableData = res.data.reduce((prev,current) => {
          const {
           mzy_sale_total,
           zy_sale_total,
           mchannel_sale_total,
           channel_sale_total
          } = current

          /*  月合计 = 月渠道 + 月直营 **/
          const monthTotal = addition(mchannel_sale_total,mzy_sale_total) || 0
          //console.log(mzy_sale_total,monthTotal)
          /* 直营月销售占比 =  月直营销售额 / 月合计销售额 **/
          const proportion_z = multiplication((division(mzy_sale_total,monthTotal) || 0),100).toFixed(2)

          /* 渠道月销售占比 =  1 - 直营月销售占比 **/
          let proportion_q;
          if(Number(proportion_z) === 0){
            const mod = multiplication((division(mchannel_sale_total,monthTotal) || 0),100)
            proportion_q = mod !== 0 ? Number(100 - Number(proportion_z)).toFixed(2) : 0
          }else{
            proportion_q = Number(100 - Number(proportion_z)).toFixed(2)
          }
          

          return ([...prev,...([{
            depart:current.depart,
            type:'直营',
            month:mzy_sale_total,
            day:zy_sale_total,
            proportion:proportion_z
          },{
            depart:current.depart,
            type:'渠道',
            month:mchannel_sale_total,
            day:channel_sale_total,
            proportion:proportion_q
          }])])
        },[])

        const fileds = ["百辰","泓源","普润","平台"]
        const t = []
        fileds.forEach(c => tableData.forEach(element => {
            if(element.depart === c) t.push(element)
        }))
        this.tableData = t

      } else {
        this.tableData = [];
      }
      this.getHeight();
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.SalesReportRejectedNew {
}

.table-header {
  font-size: 14px;
  border-bottom: none;
}

.table-sub__header {

  span{
    font-weight: bold !important;
  }
}
</style>

