<template>
  <div class="dianshangannualRatio" ref="barparent">
    <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.StartYear" type="year" format='yyyy' value-format="yyyy" @change='getmonth'
            :clearable='false' placeholder="选择开始年">
          </el-date-picker>
          <span style="margin: 0 10px;">-</span>

          <el-date-picker v-model="msg.EndYear" type="year" format='yyyy' value-format="yyyy" @change='getmonth'
            :clearable='false' placeholder="选择结束年">
          </el-date-picker>
        </div>

      </div>

    </div>
    <div style="padding: 15px ;background: #FFF;margin-bottom: 50px;">


      <!-- 第一张 -->
      <div style="width: 100%;" class="tablestyle" v-if='YearSList && YearSList.length>0 '>
        <div style="width: 150px;">
          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
            <tr>
              <td style="width: 150px;">{{$t('objFill.nianfen')}}</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: YearSListwidth+'px'}">
            <tr>
              <td style="font-size: 12px;" v-for='(x,y) in YearSList' :key='y' @click='goyearurl(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 YearSList' :key='y'>
                <span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 第二张 -->
      <div style="width: 100%;" class="tablestyle" v-if='YearAvgSList && YearAvgSList.length>0 && type == 0'>
        <div style="width: 150px;">
          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
            <tr>
              <td style="width: 150px;">{{$t('objFill.nianfen')}}</td>
            </tr>
            <tr v-for='(x,y) in leftData_t' :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: YearSListwidth+'px'}">
            <tr>
              <td style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key='y' @click='goyearurl(x)'>{{x.Date}}</td>
            </tr>
            <tr v-for='(item,index) in leftData_t' :key='index'>
              <td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;"
                v-for='(x,y) in YearAvgSList' :key='y'>
                <span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 第三张 -->
      <div style="width: 100%;display: flex;" v-if='YearRateSList && YearRateSList.length>0 && type == 0'>
        <div style="width: 150px;">
          <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
            <tr>
              <td style="width: 150px;">{{$t('objFill.nianfen')}}</td>
            </tr>
            <tr v-for='(x,y) in leftData_tr' :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: YearSListwidth+'px'}">
            <tr>
              <td style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key='y' @click='goyearurl(x)'>{{x.Date}}</td>
            </tr>
            <tr v-for='(item,index) in leftData_tr' :key='index'>
              <td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;"
                v-for='(x,y) in YearRateSList' :key='y'>
                <span
                  :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div v-if='type ==1' style="display: flex;align-items: flex-start;">
        <!-- 第二张 -->
        <div style="width: 100%;" class="tablestyle" v-if='YearAvgSList && YearAvgSList.length>0 '>
          <div style="width: 150px;">
            <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0"
              :style="{width: '150px'}">
              <tr>
                <td style="width: 150px;">{{$t('objFill.nianfen')}}</td>
              </tr>
              <tr v-for='(x,y) in leftData_t' :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: YearSListwidth+'px'}">
              <tr>
                <td style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key='y' @click='goyearurl(x)'>{{x.Date}}
                </td>
              </tr>
              <tr v-for='(item,index) in leftData_t' :key='index'>
                <td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;"
                  v-for='(x,y) in YearAvgSList' :key='y'>
                  <span
                    :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 第三张 -->
        <div style="width: 100%;display: flex;" v-if='YearRateSList && YearRateSList.length>0 '>
          <div style="width: 150px;">
            <table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0"
              :style="{width: '150px'}">
              <tr>
                <td style="width: 150px;">{{$t('objFill.nianfen')}}</td>
              </tr>
              <tr v-for='(x,y) in leftData_tr' :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: YearSListwidth+'px'}">
              <tr>
                <td style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key='y' @click='goyearurl(x)'>{{x.Date}}
                </td>
              </tr>
              <tr v-for='(item,index) in leftData_tr' :key='index'>
                <td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;"
                  v-for='(x,y) in YearRateSList' :key='y'>
                  <span
                    :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

    </div>





  </div>

</template>

<script>
  export default {
    name: "dianshangannualRatio",

    data() {
      return {
        value: '',
        tableHeight: window.innerHeight - 50 - 41 - 69 - 74 - 30, //窗口的高度减去你需要减去的高度
        tablewidth: window.innerWidth - 124, //等到表格的宽度
        msg: {
          StartYear: '', //开始年
          EndYear: '',
        },
        loading: false,
        YearSList: [],
        YearSListwidth: 0,
        leftData: [{
            Name: '付款人数',
            DataObj: 'PeopleNum'
          },
          {
            Name: '付款单数',
            DataObj: 'OrderNum'
          },
          {
            Name: '付款金额',
            DataObj: 'PayMoney'
          },
          {
            Name: '购买件数',
            DataObj: 'BuyNum'
          },
          {
            Name: '会员数',
            DataObj: 'TotalPayPeople'
          },
          {
            Name: '总付款人数',
            DataObj: 'MAvgPeopleNum'
          },
          {
            Name: '毛利',
            DataObj: 'Profit'
          },
          {
            Name: '普象',
            DataObj: 'PXNum'
          },
          {
            Name: 'VIP',
            DataObj: 'VipNum'
          },
          {
            Name: '银象',
            DataObj: 'YXNum'
          },
          {
            Name: '金象',
            DataObj: 'JXNum'
          },
          {
            Name: '会员总数',
            DataObj: 'TotalMNum'
          },
        ],
        YearAvgSList: [],
        YearAvgSListwidth: 0,
        leftData_t: [{
            Name: '平均付款人数(天)',
            DataObj: 'MAvgPeopleNum'
          },
          {
            Name: '平均付款单数',
            DataObj: 'MAvgOrderNum'
          },
          {
            Name: '平均付款金额',
            DataObj: 'MAvgPayMoney'
          },
          {
            Name: '平均付款件数',
            DataObj: 'MAvgBuyNum'
          },
          {
            Name: '平均每人购买单数',
            DataObj: 'PAvgOrderNum'
          },
          {
            Name: '平均每人购买件数',
            DataObj: 'PAvgBuyNum'
          },
          {
            Name: '平均每单单价',
            DataObj: 'PAvgBuyPrice'
          },
          {
            Name: '平均每人购买单价',
            DataObj: 'PAvgUnitPrice'
          },
          {
            Name: '平均会员数',
            DataObj: 'PAvgMemberNum'
          },
          {
            Name: '平均累计人数(月)',
            DataObj: 'PAvgPaymentNum'
          },
          {
            Name: '平均会员下订单转换率',
            DataObj: 'PAvgMOrderRate'
          },
          {
            Name: '平均复购人数',
            DataObj: 'PAvgReBuyNum'
          },
          {
            Name: '平均复购率',
            DataObj: 'PAvgReBuyRate'
          },
          {
            Name: '平均新人下单',
            DataObj: 'PAvgNewPeopleNum'
          },
          {
            Name: '毛利率',
            DataObj: 'PAvgProfitRate'
          },
        ],
        YearRateSList: [],
        YearRateSListwidth: 0,
        leftData_tr: [{
            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: 'PAvgProfit'
          },
          {
            Name: '会员下订单成长率',
            DataObj: 'PAvgMOrderRate'
          },
          {
            Name: '普象会员成长率',
            DataObj: 'PAvgPXNum'
          },
          {
            Name: 'VIP会员成长率',
            DataObj: 'PAvgVipNum'
          },
          {
            Name: '银象会员成长率',
            DataObj: 'PAvgYXNum'
          },
          {
            Name: '金象会员成长率',
            DataObj: 'PAvgJXNum'
          },
          {
            Name: '会员成长率',
            DataObj: 'PAvgTotalMNum'
          },
        ],
        parentClientWidth: 0,
        type: 0,
      }
    },
    mounted() {

    },
    created() {
      let nowtime = new Date()
      this.msg.StartYear = (nowtime.getFullYear() - 1).toString()
      this.msg.EndYear = nowtime.getFullYear().toString()

      this.getDateList()
    },
    methods: {
      getmonth(e) {
        this.getDateList()
      },
      getDateList() {
        if (this.msg.StartYear == '' || this.msg.EndYear == '') {
          this.Info('请选择开始或者结束年份')
          return
        }
        if ((new Date(this.msg.StartYear).getTime()) >= (new Date(this.msg.EndYear)).getTime()) {
          this.msg.EndYear = '';
          this.Info('结束年份不能大于开始年份')
          return
        }
        if ((new Date(this.msg.EndYear).getTime()) >= (new Date()).getTime()) {
          this.msg.EndYear = '';
          this.Info('结束年份不能大于今年')
          return
        }
        this.loading = true;
        this.RateList = [];
        this.mallapipost("/api/LiveHouse/GetDSYearStartistics", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            if (res.data.data) {
              this.YearSList = res.data.data.YearSList;
              this.YearSList.forEach(x => {
                if (x.Date.indexOf('成長率') != -1) {
                  x.PeopleNum = x.PeopleNum + '%';
                  x.OrderNum = x.OrderNum + '%';
                  x.PayMoney = x.PayMoney + '%';
                  x.BuyNum = x.BuyNum + '%';
                  x.TotalPayPeople = x.TotalPayPeople + '%';
                  x.MAvgPeopleNum = x.MAvgPeopleNum + '%';
                  x.Profit = x.Profit + '%';
                  x.PXNum = x.PXNum + '%';
                  x.VipNum = x.VipNum + '%';
                  x.YXNum = x.YXNum + '%';
                  x.JXNum = x.JXNum + '%';
                  x.TotalMNum = x.TotalMNum + '%';
                }
              })
              this.YearSListwidth = (this.YearSList.length * 120);

              //第二张表
              this.YearAvgSList = res.data.data.YearAvgSList;
              this.YearAvgSList.forEach(x => {
                x.PAvgMOrderRate = x.PAvgMOrderRate + '%';
                if (x.Date.indexOf('成長率') != -1) {
                  x.MAvgPeopleNum = x.MAvgPeopleNum + '%';
                  x.MAvgOrderNum = x.MAvgOrderNum + '%';
                  x.MAvgPayMoney = x.MAvgPayMoney + '%';
                  x.MAvgBuyNum = x.MAvgBuyNum + '%';
                  x.PAvgOrderNum = x.PAvgOrderNum + '%';
                  x.PAvgBuyNum = x.PAvgBuyNum + '%';
                  x.PAvgBuyPrice = x.PAvgBuyPrice + '%';
                  x.PAvgUnitPrice = x.PAvgUnitPrice + '%';
                  x.PAvgMemberNum = x.PAvgMemberNum + '%';
                  x.PAvgPaymentNum = x.PAvgPaymentNum + '%';
                  x.PAvgReBuyNum = x.PAvgReBuyNum + '%';
                  x.PAvgReBuyRate = x.PAvgReBuyRate + '%';
                  x.PAvgNewPeopleNum = x.PAvgNewPeopleNum + '%';
                  x.PAvgProfitRate = x.PAvgProfitRate + '%';
                }
              })
              this.YearAvgSListwidth = (this.YearAvgSList.length * 120)
              if (this.tablewidth > (this.YearAvgSListwidth + this.YearSListwidth + 300) + 50) {
                this.type = 1
              }
              //第三张表
              this.YearRateSList = res.data.data.YearRateSList;
              this.YearRateSListwidth = (this.YearRateSList.length * 120)
            }

          } else {
            this.Info(res.data.message);
          }
        })
      },
      Export() {
        let msg = this.msg
        msg = JSON.parse(JSON.stringify(msg));
        this.GetMallLocalFile(
          "/api/LiveHouse/GetDSYearStartisticsToExcel",
          msg,
          "电商年度比统计" + this.msg.StartYear + "-" + this.msg.EndYear + ".xls"
        );
      },
      goyearurl(x) {
        if (x.Date.indexOf('成') == -1) {
          this.$router.push({
            name: 'dianshangyeardata',
            query: {
              timedata: x.Date,
              blank: 'y'
            }
          });
        }
      },
      getisred(dataInfo) {
        if ((dataInfo.toString()).indexOf('-') != -1) {
          return true
        } else {
          return false
        }
      },
      gechengzhangv(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'
        }
      },
    }
  }

</script>

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

  .dianshangannualRatio .tablestyle {
    display: flex;
  }

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

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

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

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

  }

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

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

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

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

  .dianshangannualRatio .negative {
    color: red
  }

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

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

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

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

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

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

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

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

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

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

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

  .dianshangannualRatio .angclass {
    background: #FDC022;
  }

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

  .dianshangannualRatio .qthuanbicheng {
    background: #FEFF30;
    width: 120px;
  }

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

  .dianshangannualRatio .el-table .monthstyel2 {
    background: #F6CAAD;
  }

  .dianshangannualRatio .el-table .monthstyel3 {
    background: #FE9A6B;
  }

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

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

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

  .dianshangannualRatio .growthrate {
    background: #FFF2CD;
    width: 120px;
  }

  .dianshangannualRatio .yearstyle {
    background: #FE99FD;
    width: 120px;
  }

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

  .dianshangannualRatio tr td {
    cursor: pointer;
  }

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

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

</style>
