<template>
    <div class="onlineRetailersdata">
      <div class="el-card__header">
        <span>电商月度统计</span>
        <div style="display: flex;flex-direction: row;align-items: center">
          <!---->
          <el-button type="primary" class="el-button--small" @click="Export">导出全部</el-button>
        </div>
      </div>
  
      <div class="content">
        <div style="display: flex;flex-direction: row;align-items: center">
         
          <!-- <div class="block" style="margin-left: 10px;">
            <el-date-picker style="padding: 3px 10px;width: 380px;height: 32px" v-model="value" type="daterange"
              :range-separator="$t('OrderList.zhi')" :start-placeholder="$t('OrderList.star')" :end-placeholder="$t('OrderList.end')" value-format="yyyy-MM-dd"
              @change="change" align="right">
            </el-date-picker>
          </div> -->
          <div class="block">
            <el-date-picker
              v-model="msg.Month"
              type="month"
              format='yyyy-MM'
              value-format="yyyy-MM"
              @change='getmonth'
              :clearable='false'
              placeholder="选择月">
            </el-date-picker>
          </div>
  
        </div>
     
      </div>
      <div style="padding: 15px ;background: #FFF;margin-bottom: 50px;">
     
        <el-table :data="RList" v-loading="loading"  header-cell-class-name="headClass" style="width: 100%;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
          <el-table-column label="" prop="DateStr" width='80' fixed>
            <template slot-scope="scope">
              <span v-if="scope.row.hasOwnProperty('Date')&&scope.row.Date=='隐藏'" style="opacity: 0;">{{scope.row.Date}}</span>
              <span v-else>{{scope.row.hasOwnProperty('DateStr')?scope.row.DateStr:scope.row.Date}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均付款人数(天)" prop='PeopleNum' width='125'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.PeopleNum) == true" style="color: #FD0F05;">{{scope.row.PeopleNum}}</span>
              <span v-else>{{scope.row.PeopleNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均付款单数" prop="OrderNum" width='125'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.OrderNum) == true" style="color: #FD0F05;">{{scope.row.OrderNum}}</span>
              <span v-else>{{scope.row.OrderNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均付款金额" prop="PayMoney" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.PayMoney) == true" style="color: #FD0F05;">{{scope.row.PayMoney}}</span>
              <span v-else>{{scope.row.PayMoney}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均购买件数" prop="BuyNum" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.BuyNum) == true" style="color: #FD0F05;">{{scope.row.BuyNum}}</span>
              <span v-else>{{scope.row.BuyNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均取消单数" prop="CancelOrderNum" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.CancelOrderNum) == true" style="color: #FD0F05;">{{scope.row.CancelOrderNum}}</span>
              <span v-else>{{scope.row.CancelOrderNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均每人购买单数" prop="AvgOrderNum" width='125'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.AvgOrderNum) == true" style="color: #FD0F05;">{{scope.row.AvgOrderNum}}</span>
              <span v-else>{{scope.row.AvgOrderNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均每人购买件数" prop="AvgBuyNum" width='125'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.AvgBuyNum) == true" style="color: #FD0F05;">{{scope.row.AvgBuyNum}}</span>
              <span v-else>{{scope.row.AvgBuyNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均每单单价" prop="AvgUnitPrice" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.AvgUnitPrice) == true" style="color: #FD0F05;">{{scope.row.AvgUnitPrice}}</span>
              <span v-else>{{scope.row.AvgUnitPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均每人购买单价" prop="AvgBuyPrice" width='125'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.AvgBuyPrice) == true" style="color: #FD0F05;">{{scope.row.AvgBuyPrice}}</span>
              <span v-else>{{scope.row.AvgBuyPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均会员累计数" prop="MemberNum" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.MemberNum) == true" style="color: #FD0F05;">{{scope.row.MemberNum}}</span>
              <span v-else>{{scope.row.MemberNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均付款累计人数" prop="PaymentNum" width='125'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.PaymentNum) == true" style="color: #FD0F05;">{{scope.row.PaymentNum}}</span>
              <span v-else>{{scope.row.PaymentNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均会员下订单转换率" prop="MOrderRate" width='155'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.MOrderRate) == true" style="color: #FD0F05;">{{scope.row.MOrderRate}}</span>
              <span v-else>{{scope.row.MOrderRate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均复购人数" prop="ReBuyNum" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.ReBuyNum) == true" style="color: #FD0F05;">{{scope.row.ReBuyNum}}</span>
              <span v-else>{{scope.row.ReBuyNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均复购率" prop="ReBuyRate" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.ReBuyRate) == true" style="color: #FD0F05;">{{scope.row.ReBuyRate}}</span>
              <span v-else>{{scope.row.ReBuyRate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均新人下单" prop="NewPeopleNum" width='120'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.NewPeopleNum) == true" style="color: #FD0F05;">{{scope.row.NewPeopleNum}}</span>
              <span v-else>{{scope.row.NewPeopleNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均普象" prop="PXNum" width='90'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.PXNum) == true" style="color: #FD0F05;">{{scope.row.PXNum}}</span>
              <span v-else>{{scope.row.PXNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均VIP" prop="VipNum" width='90'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.VipNum) == true" style="color: #FD0F05;">{{scope.row.VipNum}}</span>
              <span v-else>{{scope.row.VipNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均银象" prop="YXNum" width='90'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.YXNum) == true" style="color: #FD0F05;">{{scope.row.YXNum}}</span>
              <span v-else>{{scope.row.YXNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均金象" prop="JXNum" width='90'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.JXNum) == true" style="color: #FD0F05;">{{scope.row.JXNum}}</span>
              <span v-else>{{scope.row.JXNum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="毛利率" prop="ProfitRate" width='90'>
            <template slot-scope="scope">
              <span v-if="getisred(scope.row.ProfitRate) == true" style="color: #FD0F05;">{{scope.row.ProfitRate}}</span>
              <span v-else>{{scope.row.ProfitRate}}</span>
            </template>
          </el-table-column>
       
      </el-table>
          <el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 1300px;margin-top: 20px;" border  header-row-class-name='angclass' row-class-name="angclass">
            <el-table-column label="" prop="OrderNo" width='80'  fixed>
              <template slot-scope="scope">
                <span>月小计</span>
              </template>
            </el-table-column>
            <el-table-column label="付款人数累计" prop='TotalPeopleNum' width='125'></el-table-column>
            <el-table-column label="付款单数累计" prop="TotalOrderNum" width='125'></el-table-column>
            <el-table-column label="付款金额累计" prop="TotalPayMoney" width='120'></el-table-column>
            <el-table-column label="购买件数累计" prop="TotalBuyNum" width='120'></el-table-column>
            <el-table-column label="" prop=" " >
              <template slot-scope="scope">
                <span style="opacity: 0;">1</span>
              </template>
            </el-table-column>
            <el-table-column label="普象累计" prop="TotalPXNum" width='120'></el-table-column>
            <el-table-column label="VIP累计" prop='TotalVIPNum' width='120'></el-table-column>
            <el-table-column label="银象累計" prop="TotalYXNum" width='120'></el-table-column>
            <el-table-column label="金象累计" prop="TotalJXNum" width='120'></el-table-column>
            <el-table-column label="会员总数" prop="TotalBuyNum" width='120'>
              <template slot-scope="scope">
                <span>{{scope.row.TotalPXNum + scope.row.TotalVIPNum + scope.row.TotalYXNum + scope.row.TotalJXNum }}</span>
              </template>
            </el-table-column>
        </el-table>
        <el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 210px;" border  :show-header='false'	>
          <el-table-column label="" prop="OrderNo" width='80'  >
            <template slot-scope="scope">
              <span>月毛利</span>
            </template>
          </el-table-column>
          <el-table-column label="" prop='MonthProfit' width=''></el-table-column>
         
        </el-table>
        <el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 210px;" border  :show-header='false'	>
          <el-table-column label="" prop="OrderNo" width='80'  >
            <template slot-scope="scope">
              <span>毛利率</span>
            </template>
          </el-table-column>
          <el-table-column label="" prop='MonthProfitRate' width=''>
            <template slot-scope="scope">
              <span>{{scope.row.MonthProfitRate}}%</span>
            </template>
          </el-table-column>
         
        </el-table>
       
        
      </div>
     
      
    
    
    </div>
  
  </template>
  
  <script>
    export default {
      name: "onlineRetailersdata",
      data() {
        return {
          value: [],
          tableHeight: window.innerHeight  - 50 - 41 - 69 -74 - 30, //窗口的高度减去你需要减去的高度
          msg: {
            Month:'',//月份
          },
          tableData: [],//总数据
          RList:[],//月份数据
          averageData:[],//平均数据
          loading: false,
          allList:[],
        }
      },
      created() {
          let nowtime = new Date()
          this.msg.Month = nowtime.getFullYear() + '-' +((nowtime.getMonth()+1)<10 ?'0'+(nowtime.getMonth()+1):nowtime.getMonth()+1)
          if (this.$route.query.timedata) {
            this.msg.Month=this.$route.query.timedata;
           
          }
          this.getDateList()
      },
      methods: {
        getmonth(e){
          this.getDateList()
        },
        getDateList() {
     
          this.loading = true;
          this.mallapipost("/api/LiveHouse/GetDSMonthStatistics", this.msg, res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
           
              this.tableData = res.data.data;
              let data = this.tableData.RList;
              this.RList = [];
              let obj = {
                  Date:'日期',
                  PeopleNum:'付款人数',
                  OrderNum:'付款单数',
                  PayMoney:'付款金额',
                  BuyNum:'购买件数',
                  CancelOrderNum:'取消单数',
                  AvgOrderNum:'平均每人购买单数',
                  AvgBuyNum:'平均每人购买件数',
                  AvgUnitPrice:'平均每单单价',
                  AvgBuyPrice:'平均每人购买单价',
                  MemberNum:'会员累计数',
                  PaymentNum:'付款累计人数',
                  MOrderRate:'会员下订单转换率',
                  ReBuyNum:'复购人数',
                  ReBuyRate:'复购率',
                  NewPeopleNum:'新人下单',
                  PXNum:'普象',
                  VipNum:'VIP',
                  YXNum:'银象',
                  JXNum:'金象',
                  ProfitRate:'毛利率',
                }
                let obj2 = {
                  Date:'隐藏',
                  PeopleNum:'',
                  OrderNum:'',
                  PayMoney:'',
                  BuyNum:'',
                  CancelOrderNum:'',
                  AvgOrderNum:'',
                  AvgBuyNum:'',
                  AvgUnitPrice:'',
                  AvgBuyPrice:'',
                  MemberNum:'',
                  PaymentNum:'',
                  MOrderRate:'',
                  ReBuyNum:'',
                  ReBuyRate:'',
                  NewPeopleNum:'',
                  PXNum:'',
                  VipNum:'',
                  YXNum:'',
                  JXNum:'',
                  ProfitRate:'',
                }
              data.forEach((x,i)=>{
                
                if(x.hasOwnProperty('Date') && x.Date == '环比成长'){
                    x.Date=x.Date;
                    x.PeopleNum=x.PeopleNum+'%';
                    x.OrderNum=x.OrderNum+'%';
                    x.PayMoney=x.PayMoney+'%';
                    x.BuyNum=x.BuyNum+'%';
                    x.AvgOrderNum=x.AvgOrderNum+'%';
                    x.AvgBuyNum=x.AvgBuyNum+'%';
                    x.AvgUnitPrice=x.AvgUnitPrice+'%';
                    x.AvgBuyPrice=x.AvgBuyPrice+'%';
                    x.MemberNum=x.MemberNum+'%';
                    x.PaymentNum=x.PaymentNum+'%';
                    x.MOrderRate=x.MOrderRate+'%';
                    x.ReBuyNum=x.ReBuyNum+'%';
                    x.ReBuyRate=x.ReBuyRate+'%';
                    x.NewPeopleNum=x.NewPeopleNum+'%';
                    x.PXNum=x.PXNum+'%';
                    x.VipNum=x.VipNum+'%';
                    x.YXNum=x.YXNum+'%';
                    x.JXNum=x.JXNum+'%';
                    x.ProfitRate=x.ProfitRate+'%';
                    x.CancelOrderNum=x.CancelOrderNum+'%';
                    this.RList.push(x)
                    this.RList.push(obj2)
                    this.RList.push(obj)
                  }else if(x.hasOwnProperty('Date') && x.Date == '上期平均'){
                    this.RList.push(x)
                    this.RList.push(obj2)
                    this.RList.push(obj)
                  }else{
                    x.MOrderRate = x.MOrderRate+'%';
                    x.ReBuyRate = x.ReBuyRate+'%';
                    x.ProfitRate = x.ProfitRate+'%';
                    this.RList.push(x)
                  }
              })
              this.averageData = [];
              this.averageData.push(this.tableData)
            } else {
              this.Info(res.data.message);
            }
  
          })
        },
     
     
        getisred(dataInfo){
          if((dataInfo.toString()).indexOf('-')!=-1){
            return true
          }else{
            return false
          }
          
        },
        Export() {
          let msg = this.msg
          msg = JSON.parse(JSON.stringify(msg));
          this.GetMallLocalFile(
            "/api/LiveHouse/GetDSMonthStatisticsToExcel",
            msg,
            "电商月度统计"+this.msg.Month+".xls"
          );
        },
  
  
  
   
      
       
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getDateList();
        },
        change(val) {
          if (val == null) {
            this.value = '';
            this.msg.StartDate = '';
            this.msg.EndDate = '';
          }
          this.msg.pageIndex = 1;
          this.getTotalOrderProfitLoss()
        },
        tableRowClassName({row, rowIndex}){
          if(row.hasOwnProperty('Date') && row.Date=='环比成长' ){
            return 'huanbichengz'
          }else if((row.hasOwnProperty('Date') && (row.Date=='平均'|| row.Date=='日期'))|| row.hasOwnProperty('DateStr')){
            return 'qthuanbicheng'
          }else if(row.hasOwnProperty('Date') && (row.Date=='月平均'||row.Date == '上期平均')){
            return 'monthstyel'
          }
        },
        columnStyle({row, column, rowIndex, columnIndex}){
          if(row.hasOwnProperty('DateStr') && (columnIndex==1|| columnIndex==2||columnIndex==3||columnIndex==4||columnIndex==5)){
              return 'background:#FFF;'
          }
        }
    
      }
    }
  
  </script>
  
  <style>
    .onlineRetailersdata .el-card__header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      padding: 18px 20px;
    }
  
    .onlineRetailersdata .el-button--small {
      padding: 9px 15px;
    }
  
    .onlineRetailersdata .content .searchInput {
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      margin-left: 20px;
    }
  
    .onlineRetailersdata .content .searchInput .el-input__inner {
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
    }
  
    .onlineRetailersdata .content .searchInput {
      line-height: normal;
      display: inline-table;
      border-collapse: separate;
      border-spacing: 0;
      width: 250px;
      margin-right: 20px;
  
    }
  
    .onlineRetailersdata .content {
      background: #fff;
      margin-top: 10px;
      padding: 15px;
      box-sizing: border-box;
    }
  
    .onlineRetailersdata .el-icon-date {
      line-height: 24px;
    }
  
    .onlineRetailersdata .el-range-separator {
      line-height: 24px;
    }
  
    .onlineRetailersdata .just {
      color: rgb(104, 207, 61)
    }
  
    .onlineRetailersdata .negative {
      color: red
    }
  
    .onlineRetailersdata .el-input__icon {
      line-height: 24px;
    }
  
    .onlineRetailersdata .el-table td,
    .el-table th {
      padding: 3px 0;
    }
  
    .onlineRetailersdata .el-table {
      font-size: 13px;
    }
  
    .onlineRetailersdata .el-select__tags-text {
      display: inline-block;
      width: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  
    .onlineRetailersdata .el-select__tags {
      max-width: 400px;
    }
  
    .onlineRetailersdata .Subtotal {
      width: 100%;
      margin: 10px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #f2f2f2;
      font-size: 12px;
    }
  
    .onlineRetailersdata .Subtotal_item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 50px;
      background: #fff;
      padding: 20px;
    }
  
    .onlineRetailersdata .Subtotal_item .Subtotal_t {
      margin: 3px 0;
      font-size: 12px;
      width: 90px;
      display: inline-block;
    }
  
    .onlineRetailersdata .ProfitLoss {
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #fff;
    }
  
    .onlineRetailersdata .ProfitLoss_xbox {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      background: #fff;
    }
    .onlineRetailersdata .diaBox{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .onlineRetailersdata .el-table .angclass{
      background: #FDC022;
    }
    .onlineRetailersdata .el-table .huanbichengz{
      background: #9DC2E4;
    }
    .onlineRetailersdata .el-table .qthuanbicheng{
      background: #FFF2CC;
    }
    .onlineRetailersdata .el-table .monthstyel{
      background: #F6CAAD;
    }
    .onlineRetailersdata .el-table .whitestyle{
      background: #FFF;
    }
    .onlineRetailersdata span{
      font-size: 13px;
      font-weight: normal;
    }
    .onlineRetailersdata ::-webkit-scrollbar {
      height: 12px;
    }

    
  
  </style>