<template>
  <div class="SalesReportRejectedNew">
    <div class="table-header" style="line-height:36px">北京万宇恒通国际科贸有限公司</div>
    
    <el-table size="mini" border style="margin-bottom:-1px" :data="[total]">
      <el-table-column label="月指标" prop="total_tips">
        <template slot-scope="scope">
        {{unit2TenThousand(scope.row.total_tips)}}
        </template>
      </el-table-column>
      <el-table-column label="完成额" prop="completion">
        <template slot-scope="scope">
          {{unit2TenThousand(scope.row.completion)}}
        </template>
      </el-table-column>
      <el-table-column label="完成率">
        <template slot-scope="scope">
          {{ scope.row.completionRate}}
        </template>
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      :max-height="maxHeight"
      :size="'mini'"
      style="width: 100%"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="部门" fixed="left" width="70" prop="depart">
        <template slot-scope="scope">{{getCompanyLabel(scope.row.depart)}}</template>
      </el-table-column>
      <el-table-column label="本日销售额" min-width="100" align="center">
         <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.dayinfo.sale_total) }}
         </template>
      </el-table-column>
      <el-table-column label="本月金额" min-width="120" align="center">
        <el-table-column label="销售指标" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.total_tips) }}
          </template>
        </el-table-column>
        <el-table-column label="净销售" align="center">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.monthinfo.monthNetSales) }}
          </template>
        </el-table-column>
        <el-table-column label="净销售完成率" align="center">
          <template slot-scope="scope">
            {{ scope.row.monthinfo.monthProportion }}%
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  name: "WanyuReport",
  props: ["date"],
  mixins: [setHeight],
  watch: {
    date: function(val) {
      this.dataTime = val;
      if (val) {
        this.searchList();
      }
    }
  },
  data() {
    return {
      total:{
          completion: 0,
          total_tips:0,
      },
      dataTime: this.date,
      loading: false,
      maxHeight: "0",
      tableData: []
    };
  },
  computed:{
    stats(){
      const { day, month ,total_tips} = this.total;

      return {
        day: unit2TenThousand(day),
        month: unit2TenThousand(month),
        total_tips: unit2TenThousand(total_tips),
        completionRate: multiplication(division(month, total_tips) || 0, 100) + '%'
      }
    }
  },
  async created() {
    window.onresize = () => {
      this.getHeight();
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
    this.searchList();
  },
  methods: {
    getCompanyLabel,
    unit2TenThousand,
    division,
    tableRowClassName({ row, rowIndex }) {
      if ((row && row.child && row.child.length > 0) || rowIndex === 0) {
        return "warning-row";
      } else {
        return "";
      }
    },
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const res = await asyncRequest.companyReport({
        daytime: this.date
      });

      if (res.code === 0 && res.data && res.data.length > 0) {
        const tableData = (res.data || []).map(({
          depart,
          msale_total,
          mth_total,
          sale_total,
          th_total,
          total_tips
        }) => {
          return {
            depart,
            total_tips,
            dayinfo: {
              sale_total,
              th_total
            },
            monthinfo:{
              msale_total,
              mth_total
            }
          }
        });

        this.total = tableData.reduce((prev,current) => {
          const { total_tips = 0, day = 0, month = 0 } = current;
          return {
            total_tips:addition(total_tips,prev.total_tips),
            month:addition(month,prev.month),
            day:addition(day, prev.day),
          }
        },{
          total_tips:0,
          month:0,
          day:0
        })

        this.tableData = tableData.map(({depart,total_tips,dayinfo,monthinfo}) => {
          /* 月净销售 = 月销售 - 月退货 **/
          const monthNetSales = subtraction(monthinfo.msale_total, monthinfo.mth_total)
          /* 月经销售完成率 = 月净销售 / 销售指标 **/
          const monthProportion = multiplication(division(monthNetSales,total_tips),100).toFixed(2)
          return {
            depart,
            total_tips,
            dayinfo:{
              ...dayinfo,
              /** 日销售额 = 日销售额 - 日退货额 */
              sale_total:subtraction(dayinfo.sale_total,dayinfo.th_total)
            },
            monthinfo:{
              monthNetSales,
              monthProportion: monthProportion
            },
            /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
            proportion:multiplication(
              division(monthinfo.msale_total,this.total.month) || 0
            ,100) || 0
          }
        })

        this.total = {
          /* 月完成额 **/
          completion: this.tableData.reduce((prev,current) => addition(prev,current.monthinfo.monthNetSales),0),
          /* 月指标 **/
          total_tips:this.tableData.reduce((prev,current) => addition(prev,current.total_tips),0),
          // completionRate:this.tableData.reduce((prev,current) => addition(prev,current.monthinfo.monthProportion),0),
        }


        const completionRate = multiplication(division(this.total.completion,this.total.total_tips) || 0, 100).toFixed(2) + '%'

        this.total = {
          ...this.total,
          completionRate
        }

      } 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>

