<style>
  .zanTotalTop {
    padding: 18px 20px;
    background: #fff;
    border-bottom: 1px solid #EBEEF5;
  }

  .mallIndex_Second {
    background-color: #fff;
    position: relative;
    padding-bottom: 50px;
    margin: 10px 0;
    border: 1px solid #EBEEF5;
  }

  .searchDiv {
    display: flex;
    flex-direction: row;
    padding: 15px;
    overflow: hidden;
  }

  .searchDiv .el-date-editor .el-range-separator {
    width: 6%;
  }

  .mallIndex .el-input__inner {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
  }

  .mallIndex .el-input__icon {
    line-height: 32px;
  }

  .searchDiv>div {
    margin-right: 5px;
  }

  .mallIndex .mallIndex_Second .el-tabs__nav-scroll {
    width: 120px;
    margin-left: 30px;
  }

  .mallIndex .mallIndex_Second .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #E4E7ED;
    z-index: 1;
    height: 1px;
  }

  .mallIndex .el-tabs__item {
    height: 32px;
    line-height: 32px;
  }

  .mallIndex .clean {
    color: #92959B;
    margin-left: 30px;
    cursor: pointer;
    font-size: 15px;
  }

  .searchDiv>div:last-child {
    height: 32px;
    line-height: 32px;
  }

  .num-info {
    display: flex;
    width: 100%;
    height: 60px;
    font-size: 28px;
    color: #303133;
  }

  .num-info .num-info-item:first-of-type {
    border-left: 0;
  }

  .num-info .num-info-item:first-of-type {
    border-left: 0;
  }

  .info-item-name {
    font-size: 16px;
    color: #92959B;
  }

  .num-info .num-info-item {
    text-align: center;
    width: 20%;
    border-left: 1px dashed #EFF1F7;
  }

  .mallIndexThrid {
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
    overflow: hidden;
  }

  .el-card_header {
    position: relative;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .tab-pay {
    position: absolute;
    bottom: -15px;
    right: 50px;
  }

  .tab-pay .el-tabs__item {
    height: 56px;
    line-height: 56px;
  }

  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }

  .mallIndex .el-card__body {
    padding: 20px;
  }

  .pay-info {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
  }

  .pay-info .pay-info-item.active {
    border: 1px solid #3399FF;
  }

  .info-item-name {
    font-size: 16px;
    color: #92959B;
  }

  .pay-info .pay-info-item {
    padding-top: 45px;
    width: 22%;
    margin: 0 1.5%;
    text-align: center;
    font-size: 26px;
    border: 1px solid #EBEEF5;
    border-radius: 10px;
    height: 150px;
    position: relative;
    cursor: pointer;
  }

  .pay-info .pay-info-item.active img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .pay-info .pay-info-item img {
    display: none;
  }

  .zantable-area {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }

  .zantable-area .el-card {
    width: 49.5%;
    color: #303133;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 4px;
    overflow: hidden;
  }

  .el-mallIndex_btmheader {
    padding: 14px 20px;
  }

  .el-mallIndex_btmheader span {
    /* float:left; */
    height: 32px;
    line-height: 32px;
  }

  .ZexportBtn {
    padding: 0 10px;
    float: right;
  }

  .table_Inner {
    padding: 20px;
  }

  .rankIng {
    padding: 0 10px;
    text-align: center;
  }

  .table_Inner table th {
    background: rgb(243, 245, 246);
    color: rgb(48, 49, 51);
    padding-left: 10px;
    border-bottom: 1px solid #EBEEF5;
  }

  .text-omit {
    width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table_Inner .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
  }

  .table_Inner .el-table_1_column_1 {
    text-align: center;
  }

  .table_Inner .el-table_1_column_2 {
    padding-left: 0;
  }

  .table2 .is-leaf:first-child {
    text-align: center;
  }

  .Zheader_image {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    float: left;
  }

  .Zheader_image img {
    width: 100%;
    height: 100%;
  }

  .nameList {
    height: 32px;
    line-height: 32px;
    display: inline-block;
    width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .zantable-area .el-table__row {
    height: 63px;
  }

  .echarts-title {
    color: #92959B;
    display: flex;
    font-size: 16px;
    margin-left: 45px;
  }

  .echarts-title-item {
    margin-right: 45px;
    display: flex;
    align-items: center;
  }

  .echarts-title-item .echarts-title-icon {
    height: 16px;
    width: 16px;
    margin-right: 10px;
    background-color: #3399ff;
  }

</style>
<template>
  <div class="mallIndex" v-loading="loading">
    <div class="zanTotalTop">数据概况</div>
    <div class="mallIndex_Second">
      <div class="searchDiv">
        <div>
          <el-select v-model="basicQMsg.Source" class="w120" @change="getChange">
            <el-option label="全部平台" :value='0'></el-option>
            <el-option label="微信" :value='1'></el-option>
            <el-option label="支付宝" :value='2'></el-option>
            <el-option label="抖音/头条" :value='3'></el-option>
            <el-option label="百度" :value='4'></el-option>
          </el-select>
        </div>
        <div style="margin-right:50px;">
          <el-date-picker class="indataPicker" type="daterange" v-model="dateStr" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="getChange" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" @change="getChange">
            <el-tab-pane label="7日" name="first"></el-tab-pane>
            <el-tab-pane label="30日" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <span class="clean" @click="ClearMsg()" @change="getChange">清空筛选</span>
        </div>
      </div>
      <div class="num-info">
        <div class="num-info-item">
          <div>{{basicData.UserTotalNum}}</div>
          <div class="info-item-name">
            <span>用户数</span>
            <el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.GoodsTotalNum}}</div>
          <div class="info-item-name">商品数</div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.TotalOrderNum}}</div>
          <div class="info-item-name">订单数</div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.NoSendOrderNum}}</div>
          <div class="info-item-name">待发货订单数</div>
        </div>
        <div class="num-info-item">
          <div>{{basicData.ActivistOrderNum}}</div>
          <div class="info-item-name">维权订单数</div>
        </div>
      </div>
    </div>
    <div class="mallIndexThrid">
      <div class="el-card_header">
        <div>
          <span>销售情况</span>
        </div>
        <div class="tab-pay">
          <el-tabs v-model="activeSell" @tab-click="handleSellClick">
            <el-tab-pane label="昨日" name="first"></el-tab-pane>
            <el-tab-pane label="7日" name="second"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="el-card__body">
        <div class="pay-info">
          <div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
            <img src="../assets/img/active.png" alt="" />
            <div>{{salesData.OrderCount}}</div>
            <div class="info-item-name">支付订单数</div>
          </div>
          <div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
            <img src="../assets/img/active.png" alt="" />
            <div>{{salesData.Income}}</div>
            <div class="info-item-name">支付金额</div>
          </div>
          <div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
            <img src="../assets/img/active.png" alt="" />
            <div>{{salesData.UserCount}}</div>
            <div class="info-item-name">支付人数</div>
          </div>
          <div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
            <img src="../assets/img/active.png" alt="" />
            <div>{{salesData.GoodCount}}</div>
            <div class="info-item-name">支付件数</div>
          </div>
        </div>
        <div class="echarts-title">
          <div class="echarts-title-item" v-if="isShowOrder">
            <div class="echarts-title-icon"></div>
            <div>支付订单数</div>
          </div>
          <div class="echarts-title-item" v-if="isShowMoney">
            <div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
            <div>支付金额</div>
          </div>
          <div class="echarts-title-item" v-if="isShowPay">
            <div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
            <div>支付人数</div>
          </div>
          <div class="echarts-title-item" v-if="isShowPayNum">
            <div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
            <div>支付件数</div>
          </div>
        </div>
        <div class="myecharts" ref="myecharts" style="height:300px;">

        </div>
      </div>
    </div>
    <div class="zantable-area">
      <div class="el-card">
        <div class="el-mallIndex_btmheader">
          <span>商品购买力TOP排行</span>
          <el-button type="primary" class="ZexportBtn" size="mini" @click="DownLoadSalesGoods">导出TOP100</el-button>
        </div>
        <div class="table_Inner">
          <el-table :data="saleIncomeData" style="width: 100%">
            <el-table-column label="排名">
              <template slot-scope="scope">
                <div class="rankIng" style="text-align:center;">
                  <template v-if="scope.$index+1<4">
                    <img v-if="scope.$index==0" src="../assets/img/first.png" />
                    <img v-if="scope.$index==1" src="../assets/img/sec.png" />
                    <img v-if="scope.$index==2" src="../assets/img/third.png" />
                  </template>
                  <template v-else>
                    <span>{{getNumber(scope.$index+1)}}</span>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="GoodsName" label="商品" width="400">
              <template slot-scope="scope">
                <div class="text-omit">
                  {{scope.row.GoodsName}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Income" label="销售额" sortable width="150">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.Income}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="SaleCount" sortable label="销量" width="150">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.SaleCount}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="el-card">
        <div class="el-mallIndex_btmheader">
          <span>用户购买力TOP排行</span>
          <el-button type="primary" class="ZexportBtn" size="mini" @click="DownLoadSalesUser">导出TOP100</el-button>
        </div>
        <div class="table_Inner table2">
          <el-table :data="saleUserData" style="width: 100%">
            <el-table-column label="排名">
              <template slot-scope="scope">
                <div class="rankIng">
                  <template v-if="scope.$index+1<4">
                    <img v-if="scope.$index==0" src="../assets/img/first.png" />
                    <img v-if="scope.$index==1" src="../assets/img/sec.png" />
                    <img v-if="scope.$index==2" src="../assets/img/third.png" />
                  </template>
                  <template v-else>
                    <span>{{getNumber(scope.$index+1)}}</span>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="UserName" label="用户" width="400">
              <template slot-scope="scope">
                <div class="Zheader_image">
                  <template v-if="scope.row.Photo">
                    <img :src="scope.row.Photo" alt="" />
                  </template>
                  <template v-else>
                    <img src="../assets/img/id-card.png" alt="" />
                  </template>
                </div>
                <span class="nameList"> {{scope.row.UserName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Income" label="支付金额" sortable width="150">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.Income}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="SaleCount" sortable label="支付件数" width="150">
              <template slot-scope="scope">
                <div style="padding-left:10px;">
                  {{scope.row.SaleCount}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //加载
        loading: false,
        //基础数据
        activeName: '',
        //销售情况
        activeSell: 'first',
        //过滤支付订单数
        isShowOrder: true,
        //过滤支付金额
        isShowMoney: true,
        //过滤支付人数
        isShowPay: true,
        //过滤支付件数
        isShowPayNum: true,
        dateStr: [], //日期
        //查询数据
        basicQMsg: {
          Source: 0, //来源
          StartDate: "", //开始时间
          EndDate: "", //结束时间
          SalesTimeType: 1, //默认昨日
        },
        basicData: {}, //基础数据
        salesData: {}, //销售数据
        saleIncomeData: [], //商品购买力TOP排行
        saleUserData: [], //用户购买力TOP排行
      };
    },
    created() {},
    methods: {
      //清空选择
      ClearMsg() {
        this.basicQMsg.Source = 0;
        this.dateStr = [];
        this.basicQMsg.StartDate = "";
        this.basicQMsg.EndDate = "";
        this.activeName = "";
        this.getChange();
      },
      //数据改变
      getChange() {
        this.getBasicData();
      },
      //基础数据日期切换
      handleClick(tab, event) {
        this.dateStr = [];
        //7日
        if (tab.name == 'first') {
          this.dateStr.push(this.$commonUtils.AddDay('', -7));
        }
        //30日
        else if (tab.name == "second") {
          this.dateStr.push(this.$commonUtils.AddDay('', -30))
        }
        this.dateStr.push(this.$commonUtils.AddDay('', -0));
        this.getChange();
      },
      //获取基础数据
      getBasicData() {
        this.loading = true;
        if (this.dateStr && this.dateStr.length > 0) {
          this.basicQMsg.StartDate = this.dateStr[0];
          this.basicQMsg.EndDate = this.dateStr[1];
        } else {
          this.basicQMsg.StartDate = '';
          this.basicQMsg.EndDate = '';
        }
        this.apipost("/api/Tenant/MallIndexStatistics", this.basicQMsg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            //基础数据统计
            this.basicData = res.data.data.basicData;
            //销售情况统计
            this.salesData = res.data.data.salesData;
            //商品购买力TOP排行
            var saleGoodsArray = res.data.data.saleIncomeData;
            if (saleGoodsArray) {
              if (saleGoodsArray.length <= 2) {
                this.saleIncomeData = saleGoodsArray;
              } else {
                this.saleIncomeData = saleGoodsArray.slice(0, 10);
              }
            }
            //用户购买力TOP排行
            var saleUserArray = res.data.data.saleUserData;
            if (saleUserArray) {
              if (saleUserArray.length <= 2) {
                this.saleUserData = saleUserArray;
              } else {
                this.saleUserData = saleUserArray.slice(0, 10);
              }
            }
            this.initMap();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //销售情况统计切换
      handleSellClick(tab, event) {
        //昨日
        if (tab.name == 'first') {
          this.basicQMsg.SalesTimeType = 1;
        }
        //7日
        else if (tab.name == "second") {
          this.basicQMsg.SalesTimeType = 7;
        }
        this.getChange();
      },
      //数字加0
      getNumber(num) {
        let str = '';
        if (num < 10) {
          str = '0' + num
        } else {
          str = num;
        }
        return str;
      },
      //过滤支付订单数
      filterOrder() {
        this.isShowOrder = !this.isShowOrder;
        this.initMap();
      },
      //过滤支付金额
      filterMoney() {
        this.isShowMoney = !this.isShowMoney;
        this.initMap();
      },
      //过滤支付人数
      filterPay() {
        this.isShowPay = !this.isShowPay;
        this.initMap();
      },
      //过滤支付件数
      filterPayNum() {
        this.isShowPayNum = !this.isShowPayNum;
        this.initMap();
      },
      //初始化图标
      initMap() {
        var myChart = this.$echarts.init(this.$refs.myecharts);
        var xData = []; //x轴数据
        var orderArray = []; //订单数量
        var orderIncome = []; //支付金额
        var userArray = []; //支付人数
        var goodArray = []; //商品件数
        if (this.salesData && this.salesData.subList && this.salesData.subList.length > 0) {
          this.salesData.subList.forEach(item => {
            xData.push(item.TimeStr);
            orderArray.push(item.OrderCount);
            orderIncome.push(item.Income)
            userArray.push(item.UserCount);
            goodArray.push(item.GoodCount);
          });
        }
        var seriesData = [];
        if (this.isShowOrder) {
          seriesData.push({
            name: '支付订单数',
            type: 'line',
            stack: '总量',
            color: '#3399ff',
            data: orderArray
          });
        }
        if (this.isShowMoney) {
          seriesData.push({
            name: '支付金额',
            type: 'line',
            stack: '总量',
            color: 'rgb(255, 163, 96)',
            data: orderIncome
          });
        }
        if (this.isShowPay) {
          seriesData.push({
            name: '支付人数',
            type: 'line',
            stack: '总量',
            color: 'rgb(75, 194, 130)',
            data: userArray
          })
        }
        if (this.isShowPayNum) {
          seriesData.push({
            name: '支付件数',
            type: 'line',
            stack: '总量',
            color: 'rgb(255, 133, 133)',
            data: goodArray
          });
        }
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '0',
            right: '1%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
          },
          yAxis: {
            axisLine: { //y轴
              show: false,
            },
            axisLabel: {
              formatter: function () {
                return "";
              }
            },
            type: 'value',
            splitLine: { //网格线
              lineStyle: {
                type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true //隐藏或显示
            }
          },
          series: seriesData
        };
        myChart.setOption(option, true);
      },
      //商品购买力TOP排行
      DownLoadSalesGoods() {
        this.GetLocalFile(
          "/api/Export/DownLoad",
          this.basicQMsg,
          "商品购买力TOP排行.xls",
          "getSalesGoodTop"
        );
      },
      //用户购买力TOP排行
      DownLoadSalesUser() {
        this.GetLocalFile(
          "/api/Export/DownLoad",
          this.basicQMsg,
          "用户购买力TOP排行.xls",
          "getSalesUserTop"
        );
      }
    },
    mounted() {
      this.getChange();
    }
  };

</script>
