<template>
  <div class="dianshangyeardata">
    <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">
          <el-date-picker v-model="msg.StartTime" type="month" format='yyyy-MM' value-format="yyyy-MM"
            @change='getmonth' :clearable='false' placeholder="选择开始月份">
          </el-date-picker>
          <span style="margin: 0 10px;">-</span>

          <el-date-picker v-model="msg.EndTime" 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="DataList" v-loading="loading" header-cell-class-name="headClass" header-row-class-name='angclass'
        style="width: 100%;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
        <el-table-column :label="$t('objFill.v101.commissonBill.yuefen')" prop="Date" width='80' fixed>
          <template slot-scope="scope">
            <span v-if="scope.row.Date == '平均/总计'">平均</span>
            <span v-else @click="clickTr(scope.row)">{{scope.row.Date}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均付款人数(天)" prop='MAvgPeopleNum' width='125'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.MAvgPeopleNum) == true"
              style="color: #FD0F05;">{{scope.row.MAvgPeopleNum}}</span>
            <span v-else>{{scope.row.MAvgPeopleNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均付款单数" prop="MAvgOrderNum" width='125'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.MAvgOrderNum) == true"
              style="color: #FD0F05;">{{scope.row.MAvgOrderNum}}</span>
            <span v-else>{{scope.row.MAvgOrderNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均付款金额" prop="MAvgPayMoney" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.MAvgPayMoney) == true"
              style="color: #FD0F05;">{{scope.row.MAvgPayMoney}}</span>
            <span v-else>{{scope.row.MAvgPayMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均付款件数" prop="MAvgBuyNum" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.MAvgBuyNum) == true" style="color: #FD0F05;">{{scope.row.MAvgBuyNum}}</span>
            <span v-else>{{scope.row.MAvgBuyNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均每人购买单数" prop="PAvgOrderNum" width='125'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgOrderNum) == true"
              style="color: #FD0F05;">{{scope.row.PAvgOrderNum}}</span>
            <span v-else>{{scope.row.PAvgOrderNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均每人购买件数" prop="PAvgBuyNum" width='125'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgBuyNum) == true" style="color: #FD0F05;">{{scope.row.PAvgBuyNum}}</span>
            <span v-else>{{scope.row.PAvgBuyNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均每单单价" prop="PAvgUnitPrice" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgUnitPrice) == true"
              style="color: #FD0F05;">{{scope.row.PAvgUnitPrice}}</span>
            <span v-else>{{scope.row.PAvgUnitPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均每人购买单价" prop="PAvgBuyPrice" width='125'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgBuyPrice) == true"
              style="color: #FD0F05;">{{scope.row.PAvgBuyPrice}}</span>
            <span v-else>{{scope.row.PAvgBuyPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均会员累计数" prop="PAvgMemberNum" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgMemberNum) == true"
              style="color: #FD0F05;">{{scope.row.PAvgMemberNum}}</span>
            <span v-else>{{scope.row.PAvgMemberNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均付款累计人数(月)" prop="PAvgPaymentNum" width='150'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgPaymentNum) == true"
              style="color: #FD0F05;">{{scope.row.PAvgPaymentNum}}</span>
            <span v-else>{{scope.row.PAvgPaymentNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均会员下订单转换率" prop="PAvgMOrderRate" width='155'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgMOrderRate) == true"
              style="color: #FD0F05;">{{scope.row.PAvgMOrderRate}}</span>
            <span v-else>{{scope.row.PAvgMOrderRate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均复购人数" prop="PAvgReBuyNum" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgReBuyNum) == true"
              style="color: #FD0F05;">{{scope.row.PAvgReBuyNum}}</span>
            <span v-else>{{scope.row.PAvgReBuyNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均复购率" prop="PAvgReBuyRate" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgReBuyRate) == true"
              style="color: #FD0F05;">{{scope.row.PAvgReBuyRate}}</span>
            <span v-else>{{scope.row.PAvgReBuyRate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平均新人下单" prop="PAvgNewPeopleNum" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgNewPeopleNum) == true"
              style="color: #FD0F05;">{{scope.row.PAvgNewPeopleNum}}</span>
            <span v-else>{{scope.row.PAvgNewPeopleNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="毛利率" prop="PAvgProfitRate" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.PAvgProfitRate) == true"
              style="color: #FD0F05;">{{scope.row.PAvgProfitRate}}</span>
            <span v-else>{{scope.row.PAvgProfitRate}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="DataList" v-loading="loading" header-cell-class-name="headClass" header-row-class-name='angclass'
        style="width: 100%;margin-top: 20px;" border :row-class-name="tableRowClassName2" :cell-style="columnStyle">
        <el-table-column :label="$t('objFill.v101.commissonBill.yuefen')" prop="Date" width='80' fixed>
          <template slot-scope="scope">
            <span v-if="scope.row.Date == '平均/总计'">总计</span>
            <span v-else @click="clickTr(scope.row)">{{scope.row.Date}}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款人数累计" prop="PeopleNum" width='120'>
          <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='120'>
          <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="TotalPayPeople" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.TotalPayPeople) == true"
              style="color: #FD0F05;">{{scope.row.TotalPayPeople}}</span>
            <span v-else>{{scope.row.TotalPayPeople}}</span>
          </template>
        </el-table-column>
        <el-table-column label="普象" prop="PXNum" width='120'>
          <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='120'>
          <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='120'>
          <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='120'>
          <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="TotalMNum" width='120'>
          <template slot-scope="scope">
            <span v-if="getisred(scope.row.TotalMNum) == true" style="color: #FD0F05;">{{scope.row.TotalMNum}}</span>
            <span v-else>{{scope.row.TotalMNum}}</span>
          </template>
        </el-table-column>

      </el-table>
      <div style="width: 100%;display: flex;" v-if='RateList && RateList.length>0 '>
        <div style="width: 150px;">
          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
            <tr>
              <td class="qthuanbicheng" style="width: 150px;"></td>
            </tr>
            <tr v-for='(x,y) in leftData' :key='y'>
              <td class="qthuanbicheng">{{x.Name}}</td>
            </tr>
          </table>
        </div>
        <div style="width:1px;  overflow-x:scroll;flex:1">
          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0"
            :style="{width: tablewidth+'px'}">
            <tr>
              <td class="qthuanbicheng" style="width:90px;font-size: 12px;" v-for='(x,y) in RateList' :key='y'
                @click='goMonthurl(x)'>{{x.Date}}</td>
            </tr>
            <tr v-for='(item,index) in leftData' :key='index'>
              <td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;"
                v-for='(x,y) in RateList' :key='y'>
                <span
                  :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "dianshangyeardata",
    data() {
      return {
        value: '',
        tableHeight: window.innerHeight - 50 - 41 - 69 - 74 - 30, //窗口的高度减去你需要减去的高度
        msg: {
          StartTime: '2021-01', //开始月份
          EndTime: '',
        },
        loading: false,
        DataList: [],
        RateList: [],
        tablewidth: 0,
        leftData: [{
            Name: '平均付款人数成长率',
            DataObj: 'MAvgPeopleNum'
          },
          {
            Name: '平均付款单数成长率',
            DataObj: 'MAvgOrderNum'
          },
          {
            Name: '平均付款金额成长率',
            DataObj: 'MAvgPayMoney'
          },
          {
            Name: '平均付款件数成长率',
            DataObj: 'MAvgBuyNum'
          },
          {
            Name: '平均每人购买单数成长率',
            DataObj: 'PAvgOrderNum'
          },
          {
            Name: '平均每人购买件数成长率',
            DataObj: 'PAvgBuyNum'
          },
          {
            Name: '平均每单单价成长率',
            DataObj: 'PAvgUnitPrice'
          },
          {
            Name: '平均每人购买单价成长率',
            DataObj: 'PAvgBuyPrice'
          },
          {
            Name: '毛利率成长率',
            DataObj: 'PAvgProfitRate'
          },
          {
            Name: '毛利成长率',
            DataObj: 'PAvgProfit'
          },
          {
            Name: '会员下订单成长率',
            DataObj: 'PAvgMOrderRate'
          },
          {
            Name: '普象会员成长率',
            DataObj: 'PAvgPXNum'
          },
          {
            Name: 'VIP会员成长率',
            DataObj: 'PAvgVipNum'
          },
          {
            Name: '银象会员成长率',
            DataObj: 'PAvgYXNum'
          },
          {
            Name: '金象会员成长率',
            DataObj: 'PAvgJXNum'
          },
          {
            Name: '会员总成长率',
            DataObj: 'PAvgTotalMNum'
          },
        ]
      }
    },
    created() {
      let nowtime = new Date()
      let startT = nowtime.setMonth(nowtime.getMonth() - 12)
      let startdate = new Date(startT)
      this.msg.StartTime = (startdate.getFullYear()) + '-' + ((startdate.getMonth() + 2) < 10 ? '0' + (startdate
        .getMonth() + 2) : startdate.getMonth() + 2) //此次加2月是根据后台数据不是会查出13个月的数据
      let enddate = new Date();
      this.msg.EndTime = enddate.getFullYear() + '-' + ((enddate.getMonth() + 1) < 10 ? '0' + (enddate.getMonth() + 1) :
        enddate.getMonth() + 1)
      if (this.$route.query.timedata) {
        this.msg.StartTime = this.$route.query.timedata + '-01';
        this.msg.EndTime = this.$route.query.timedata + '-12';
      }
      this.getDateList()
    },
    methods: {
      getmonth(e) {
        this.getDateList()
      },
      getDateList() {
        if (this.msg.StartTime == '' || this.msg.EndTime == '') {
          this.Info('请选择开始或者结束月份')
          return
        }
        if ((new Date(this.msg.StartTime).getTime()) >= (new Date(this.msg.EndTime)).getTime()) {
          this.msg.EndTime = '';
          this.Info('结束月份不能大于开始月份')
          return
        }
        this.loading = true;
        this.RateList = [];
        this.mallapipost("/api/LiveHouse/GetDSMoreMonthStatistics", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            if (res.data.data) {
              this.DataList = res.data.data.DataList;
              this.DataList.forEach(x => {
                x.PAvgMOrderRate = x.PAvgMOrderRate + '%';
                x.PAvgReBuyRate = x.PAvgReBuyRate + '%';
                x.PAvgProfitRate = x.PAvgProfitRate + '%';
              })
              this.RateList = res.data.data.RateList;
              this.tablewidth = (this.RateList.length * 90) + 150
            }

          } else {
            this.Info(res.data.message);
          }
        })
      },
      Export() {
        let msg = this.msg
        msg = JSON.parse(JSON.stringify(msg));
        this.GetMallLocalFile(
          "/api/LiveHouse/GetDSMoreMonthStatisticsToExcel",
          msg,
          "电商每月统计" + this.msg.StartTime + "-" + this.msg.EndTime + ".xls"
        );
      },
      getisred(dataInfo) {
        if ((dataInfo.toString()).indexOf('-') != -1) {
          return true
        } else {
          return false
        }
      },
      onInput() {
        this.$forceUpdate()
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.hasOwnProperty('Date') && row.Date == '平均/总计') {
          return 'huanbichengz'
        } else {
          return 'monthstyel'
        }
      },
      tableRowClassName2({
        row,
        rowIndex
      }) {
        if (row.hasOwnProperty('Date') && row.Date == '平均/总计') {
          return 'monthstyel2'
        } else {
          return 'monthstyel3'
        }
      },
      columnStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (row.hasOwnProperty('DateStr') && (columnIndex == 1 || columnIndex == 2 || columnIndex == 3 || columnIndex ==
            4)) {
          return 'background:#FFF;'
        }
      },
      clickTr(row, ) {
        this.$router.push({
          name: 'onlineRetailersdata',
          query: {
            timedata: row.Date,
            blank: 'y'
          }
        });
      },
      goMonthurl(row) {
        if (row.Date.indexOf('平均') == -1) {
          this.$router.push({
            name: 'onlineRetailersdata',
            query: {
              timedata: row.Date,
              blank: 'y'
            }
          });
        }
      }
    }
  }

</script>

<style>
  .dianshangyeardata .el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 18px 20px;
  }

  .dianshangyeardata .el-button--small {
    padding: 9px 15px;
  }

  .dianshangyeardata .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-left: 20px;
  }

  .dianshangyeardata .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .dianshangyeardata .content .searchInput {
    line-height: normal;
    display: inline-table;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;

  }

  .dianshangyeardata .content {
    background: #fff;
    margin-top: 10px;
    padding: 15px;
    box-sizing: border-box;
  }

  .dianshangyeardata .el-icon-date {
    line-height: 24px;
  }

  .dianshangyeardata .el-range-separator {
    line-height: 24px;
  }

  .dianshangyeardata .just {
    color: rgb(104, 207, 61)
  }

  .dianshangyeardata .negative {
    color: red
  }

  .dianshangyeardata .el-input__icon {
    line-height: 24px;
  }

  .dianshangyeardata .el-table td,
  .el-table th {
    padding: 3px 0;
  }

  .dianshangyeardata .el-table {
    font-size: 13px;
  }

  .dianshangyeardata .el-select__tags-text {
    display: inline-block;
    width: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dianshangyeardata .el-select__tags {
    max-width: 400px;
  }

  .dianshangyeardata .Subtotal {
    width: 100%;
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f2f2f2;
    font-size: 12px;
  }

  .dianshangyeardata .Subtotal_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 50px;
    background: #fff;
    padding: 20px;
  }

  .dianshangyeardata .Subtotal_item .Subtotal_t {
    margin: 3px 0;
    font-size: 12px;
    width: 90px;
    display: inline-block;
  }

  .dianshangyeardata .ProfitLoss {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
  }

  .dianshangyeardata .ProfitLoss_xbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: #fff;
  }

  .dianshangyeardata .diaBox {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dianshangyeardata .angclass {
    background: #FDC022;
  }

  .dianshangyeardata .el-table .huanbichengz {
    background: #EB60BB;
  }

  .dianshangyeardata .qthuanbicheng {
    background: #FEFF30;
    width: 90px;
  }

  .dianshangyeardata .el-table .monthstyel {
    background: #F6C8AB;
  }

  .dianshangyeardata .el-table .monthstyel2 {
    background: #FDC022;
  }

  .dianshangyeardata .el-table .monthstyel3 {
    background: #FFF2CC;
  }

  .dianshangyeardata .el-table .whitestyle {
    background: #FFF;
  }

  .dianshangyeardata .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 360px;
  }

  .dianshangyeardata .singeRowTable {
    background: rgb(255, 255, 255);
    margin-top: 20px;
  }

  .dianshangyeardata tr {
    height: 30px !important;
  }

  .dianshangyeardata tr td {
    cursor: pointer;
  }

  .dianshangyeardata span {
    font-size: 13px;
    font-weight: normal;
  }

  .dianshangyeardata ::-webkit-scrollbar {
    height: 12px;
  }

</style>
