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

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

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

    <el-row style="margin-top: 10px; display: flex;" v-if="!isEmpty">
      <div id="bottom-container" />
    </el-row>

    <template v-else>
      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
    </template>
  </div>
</template>


<script>
import asyncRequest from "@/api/newResults";
import setHeight from "@/mixins/index";
import { mapCompany } from "./mapCompany"
import dayjs from "dayjs";

import { 
  addition, 
  division, 
  subtraction, 
  multiplication, 
  unit2TenThousand 
} from "../newReport/src/_utils";

export default {
  mixins: [ setHeight ],
  props:['companies','costField'],
  data(){
    return {
      list: [],
      daytime: "",
      companyNo: "",
      loading: false,
      isTenThound: true,
      isEmpty: false
    }
  },
  computed:{
    currentCompanyName(){
      return this.companies.find(item => item.value === this.companyNo).label;
    }
  },
  mounted() {
    this.isEmpty = this.companies.length === 0;
    if(this.isEmpty) return;
    this.companyNo = this.companies[0].value;
    this.companies = this.companies.map(item => ({ ...item, label:mapCompany[item.label] || item.label}))
    this.daytime = this.transformTime();
    this.requestData();
  },
  watch:{ daytime:{ handler(){ this.requestData() }}},
  methods: {
    addition,
    unit2TenThousand,
    setCellClassName({ column }) {
      const { label } = column;
      if(label === "当月营业收入(净)" || label === '当月成本合计') return "pure__cell";
      if(label === "当月营收目标")  return "bg__yellow"
      if(label === "当月毛利目标") return "bg__red"
    },
    setHeaderClassName({ column }){
      const { label } = column;
      if(label === "当月营收目标")  return "bg__yellow"
      if(label === "当月毛利目标") return "bg__red"
    },
    getCurrentRateStyle(current){
      const days = dayjs().daysInMonth();
      const oneDay = Number(division(100,days)).toFixed(2);
      const currentDay = dayjs().date();
      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
    },
    getCurrentValueStyle(current,total){
      const days = dayjs().daysInMonth();
      const oneDay = Number(division(total,days)).toFixed(2);
      const currentDay = dayjs().date();
      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
    },
    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);
    },
      /* 表格合并列和行 */
    spanMethod({ rowIndex, columnIndex }) {
		  if (columnIndex === 0) {
		   const _row = this.flitterData(this.list).one[rowIndex];
		   const _col = _row > 0 ? 1 : 0;
		   return { rowspan: _row, colspan: _col };
		  }
	  },
	  /**合并表格的第一列，处理表格数据 */
	  flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
	     arr.forEach((item, index) => {
	     if (index === 0) {
	       spanOneArr.push(1);
	     } else {
	      //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
	       if (item.company === arr[index - 1].company) {
	         //第一列需合并相同内容的判断条件
	         spanOneArr[concatOne] += 1;
	         spanOneArr.push(0);
	       } else {
	         spanOneArr.push(1);
           concatOne = index;
	       }
	     }
	    });

	    return { one: spanOneArr };
	  },
    async requestData() {
      this.loading = true;
      this.list = [];

      const res = await asyncRequest.departmentEveryDay({ daytime: this.daytime, companyNo: this.companyNo });

      if (res.code === 0 && res.data && res.data.length > 0) {
        let list = (res.data || [])
        .map(({depart, msale_total, mth_total, sale_total, th_total, total_tips ,mzy_sale_total, mchannel_sale_total,channel_cost_total,zy_cost_total,mzy_cost_total,mchannel_cost_total}) => {
          return {
            depart, total_tips,mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total,mchannel_cost_total,mzy_cost_total,
            dayinfo: { sale_total, th_total }, monthinfo:{ msale_total, mth_total }
          }
        });

        this.total = list.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 }
        )

        let mapDepart = ["百辰","泓源","普润","平台"]
        list = mapDepart.map(d => list.find(({ depart }) => depart === d))
        const mapToDepartment = { 百辰:"客服部@百辰", 泓源:"网络部@泓源", 普润:"	项目部@普润", 平台:"	平台部@万宇" }

        const company = this.companies.find(item => item.value === this.companyNo);
        this.list = list.map(({depart,total_tips,dayinfo,monthinfo,mchannel_sale_total,mzy_sale_total,zy_cost_total,mchannel_cost_total,mzy_cost_total}) => {
          /* 月净销售 = 月销售 - 月退货 **/
          const monthNetSales = subtraction(monthinfo.msale_total, monthinfo.mth_total)
          /* 月经销售完成率 = 月净销售 / 销售指标 **/
          const monthProportion = multiplication(division(monthNetSales,total_tips),100).toFixed(2)
          return {
            total_tips, // 营收目标
            zy_cost: mzy_cost_total, // 自营成本
            qd_cost: mchannel_cost_total, // 渠道成本
            depart: mapToDepartment[depart],
            company: company.label,
            currentMonthPure:[ { zy : mzy_sale_total, qd: mchannel_sale_total } ], // 当月营业收入(净)
            zy_gross:Number(subtraction(mzy_sale_total,mzy_cost_total)).toFixed(2), // 自营毛利  = 自营营收 - 自营成本
            qd_gross:Number(subtraction(mchannel_sale_total,mchannel_cost_total)).toFixed(2), // 渠道毛利 = 渠道营收 - 渠道成本
            dayinfo:{ ...dayinfo, /** 日销售额 = 日销售额 - 日退货额 */  sale_total:subtraction(dayinfo.sale_total,dayinfo.th_total) },
            /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
            proportion:multiplication( division(monthinfo.msale_total,this.total.month) || 0 ,100) || 0,
            monthinfo:{ monthNetSales,monthProportion: monthProportion }
          }
        })
      } else {
        this.list = [];
      }
      this.getHeight();
      this.loading = false;
    },
  },
}

</script>

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

  overflow: hidden;

  #bottom-container {
    position: relative;
    height: 600px;
    overflow: hidden;
    width: 100vw;

    canvas {
      width: 100%;
    }
  }

  .table-size{
    display: flex;
    border-top: 1px solid #ebeef5;

    p {
      flex:1;
      border-right: 1px solid #ebeef5;
      padding: 5px 10px;
      margin: 0px;

      &:last-child {
        border: none;
      }
    }
  }
}
</style>

