<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 label="所有公司" v-for="company in companies" :key="company.value" :value="company.value" :label="company.label" />
      </el-select>

      <el-date-picker class="fr picker" v-model="daytime" style=";width:150px" value-format="yyyy-MM-dd" :editable="false"
        :clearable="false" :size="'small'" format="yyyy-MM-dd" type="date" 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="companyName" align="center" width="190px" />
        <el-table-column label="当日营业收入" align="center" width="120px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.sale_total, isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月营收目标" align="center" width="120px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.total_tips, isTenThound)}}
          </template>
        </el-table-column>

        <el-table-column label="当月营业收入(净)" align="center" width="450px">
          <template slot-scope="scope">
            <div style="display:flex;flex-direction: column;">
              <p style="text-align: center;">{{unit2TenThousand(scope.row.msale_total, isTenThound)}}</p>
              <div class="table-size">
                <p>直营/自营: {{unit2TenThousand(scope.row.info[0][0].monthinfo.msale_total, isTenThound)}}</p>
                <p>渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.msale_total,isTenThound)}}</p>
                <p>供应商端: {{ unit2TenThousand(scope.row.info[0][2].monthinfo.msale_total,isTenThound)}}</p>
              </div>
            </div>

              <!-- <el-table border size="mini" :data="scope.row.info">
                <el-table-column align="center" label="直营/自营">
                  <template slot-scope="scope">
                    {{unit2TenThousand(scope.row[0].monthinfo.msale_total, isTenThound)}}
                  </template>
                </el-table-column>
                
                <el-table-column align="center" label="渠道">
                  <template slot-scope="scope">
                    {{ unit2TenThousand(scope.row[1].monthinfo.msale_total,isTenThound)}}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="供应商端">
                  <template slot-scope="scope">
                    {{ unit2TenThousand(scope.row[2].monthinfo.msale_total,isTenThound)}}
                  </template>
                </el-table-column>
              </el-table> -->
          </template>
        </el-table-column>

        <el-table-column label="当月营收完成%" align="center" width="120px">
          <template slot-scope="scope">
            {{scope.row.completion_rate + "%"}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利完成%" align="center" width="120px">
          <template slot-scope="scope">
            {{scope.row.gross_completion_rate + '%'}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利指标" align="center" width="120px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.cost_tips,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利完成" align="center" width="120px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.gross_completion,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月实际毛利率" align="center" width="120px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.gross_sale_completion_rate) + "%"}}
          </template>
        </el-table-column>

        <el-table-column label="当月成本合计" align="center" width="450px">
          <template slot-scope="scope">
            <div style="display:flex;flex-direction: column;">
              <p style="text-align: center;"> {{unit2TenThousand(scope.row.mcost_total,isTenThound)}}</p>
              <div class="table-size">
                <p>直营/自营: {{unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total, isTenThound)}}</p>
                <p>渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total,isTenThound)}}</p>
                <p>供应商端: {{ unit2TenThousand(scope.row.info[0][2].monthinfo.mcost_total,isTenThound)}}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 
         <el-table-column label="当月成本合计" align="center" width="120px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.mcost_total,isTenThound)}}
          </template>
        </el-table-column>

        <el-table-column label="直营/自营成本" align="center" width="120px">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="渠道成本" align="center" width="120px">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="供应商端成本" align="center" width="120px">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.info[0][2].monthinfo.mcost_total,isTenThound)}}
          </template>
        </el-table-column> -->
      </el-table>
    </el-row>
  </div>
</template>


<script>
import asyncRequest from "@/api/newResults";
import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
export default {
  data() {
    return {
      isTenThound: true,
      daytime: "",
      loading: false,
      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,
    setCellClassName({ column }) {
      const { label } = column;
      return label === "当月营业收入(净)" || label === '当月成本合计' ? "pure__cell" : "";
    },
    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;
      this.tableData = [];

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

      // const isBeforeDate = this.getDiffDay() < 0 && this.companyNo === "GS2302231323386950"

      if (res.code === 0 && res.data && res.data.length > 0) {
        res.data.forEach(({ companyName, monthinfo, dayinfo, total_tips ,cost_tips }) => {
          // monthinfo[1] = {
          //   ...(isBeforeDate ? {
          //     msale_total:addition(monthinfo[1].msale_total,monthinfo[2].msale_total),
          //     mth_total:addition(monthinfo[1].mth_total,monthinfo[2].mth_total),
          //     type:'2'
          //   } : monthinfo[1])
          // }

          // monthinfo[0] = {
          //   ...(isBeforeDate ? {
          //     msale_total:0,
          //     mth_total:0,
          //     type:'1'
          //   } : monthinfo[0])
          // }

          // monthinfo[2] = {
          //   ...(isBeforeDate ? {
          //     msale_total:0,
          //     mth_total:0,
          //     type:'3'
          //   } : monthinfo[2])
          // }


          // this.companyName = companyName


          const mapResponseType = { '1': '自营', '2': '渠道', '3': '供应商端' }

          const types = Object.keys(mapResponseType)

          let prev_sale_total = 0;
          let prev_msale_total = 0;
          let prev_cost_total = 0;
          let prev_mcost_total = 0;
              
          const item = types.map(type => {
             const _monthinfo = monthinfo.find(month => String(month.type) === type) || {}
             const _dayinfo = dayinfo.find(day => String(day.type) === type) || {}

             /** 月营业收入 = 月销售额 - 月退货额  */ 
             const msale_total = subtraction(_monthinfo.msale_total, _monthinfo.mth_total) || 0
             /** 日营业收入 = 日销售额 - 日退货额 */
             const sale_total = subtraction(_dayinfo.sale_total, _dayinfo.th_total) || 0;
             /** 日成本 = 日采购额 - 日退货额 */
             const cost_total = subtraction(_dayinfo.cgd_total, _dayinfo.cgd_th_total) || 0;
             /** 月成本 = 月采购额 - 月退货额 */
             const mcost_total = subtraction(_monthinfo.mcgd_total, _monthinfo.mcgd_th_total) || 0;

             prev_sale_total = Number(addition(prev_sale_total,sale_total)).toFixed(2);
             prev_msale_total = Number(addition(prev_msale_total,msale_total)).toFixed(2);
             prev_cost_total = Number(addition(prev_cost_total,cost_total)).toFixed(2);
             prev_mcost_total = Number(addition(prev_mcost_total,mcost_total)).toFixed(2);

             return {
               type:mapResponseType[type],
               dayinfo: { ..._dayinfo,  sale_total  },
               monthinfo: { ...monthinfo,  msale_total, mcost_total }
           }
          })


          const gross_completion = Number(subtraction(prev_msale_total, prev_mcost_total)).toFixed(2) //当月毛利完成 = 月营收 - 月成本
          this.tableData = [
            ...this.tableData,
            { 
              companyName:companyName.indexOf('普润') !== -1 ? "普润&锦兴&知事" : companyName,  // 公司名称
              cost_tips, // 当月成本指标
              total_tips, // 当月营收目标
              info: [{...item}], // 直营.. 渠道 销售
              sale_total:prev_sale_total, // 当日营业收入
              cost_total: prev_cost_total, // 当日成本总额
              msale_total:prev_msale_total, // 当月营业收入
              mcost_total: prev_mcost_total,// 当月成本总额
              gross_completion, //当月毛利完成 = 月营收 - 月成本

              completion_rate: multiplication(division(prev_msale_total,total_tips), 100).toFixed(2), // 当月应收完成率
              gross_completion_rate: Number(cost_tips) === 0 ? 0 : multiplication(division(gross_completion,cost_tips) || 0, 100).toFixed(2), // 当月毛利完成率
              gross_sale_completion_rate: Number(multiplication(division(gross_completion,prev_msale_total) || 0, 100)).toFixed(2), // 本月毛利率 =  当月毛利完成 / 当月营业收入
            }
          ]
        })
      } else {
        this.tableData = [];
      }
      // 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
  }

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

