<template>
  <div class="retailRanking">
    <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>
         <el-select class="w100" @change="getList" style="margin-right: 10px;" v-model="msg.Source" size="small" placeholder="请选择">
           <el-option label="全部平台" :value="msg.Source"></el-option>
           <el-option
             v-for="item in options"
             :key="item.Id"
             :label="item.Name"
             :value="item.Id">
           </el-option>
         </el-select>

         <div class="searchInput" style="width:250px">
           <el-input style="display:inline-block;width:225px;height:30px"
                     placeholder="请输入分销商名称或ID搜索"
                     v-model="msg.Name"
                     size="small"
                     clearable>
           </el-input>
           <span @click="getList" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
         </div>
         <span style="color: #92959B;margin-left: 35px;cursor: pointer;font-size: 15px;" @click="empty">清空筛选</span>
       </div>
     </div>

    <div style="padding: 20px;background: #fff;margin-top: 10px">
      <el-table
        :data="tableData"
        v-loading="loading"

        header-cell-class-name="headClass"
        style="width: 1500px;"
        :default-sort = "{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          prop="Id"
          label="ID"
          width="120">
        </el-table-column>

        <el-table-column
          label="分销商名称"
          width="180">
            <template slot-scope="scope">
              <div class="app-image" :style="{backgroundImage:'url(' + scope.row.Photo + ')',backgroundSize:'cover'}"></div>
              <div flex="dir:left cross:center" style="display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between">
                <img v-if="scope.row.Source==1" style="width:24px;height:24px" src="../../assets/img/statistics/wechat.png" alt="" class="platform-img">
                <img v-if="scope.row.Source==2" style="width:24px;height:24px" src="../../assets/img/statistics/zhifubao.png" alt="" class="platform-img">
                <img v-if="scope.row.Source==3" style="width:24px;height:24px" src="../../assets/img/statistics/douyin.png" alt="" class="platform-img">
                <img v-if="scope.row.Source==4" style="width:24px;height:24px" src="../../assets/img/statistics/baidu.png" alt="" class="platform-img">
                <span v-if="scope.row.AliasName!=''" class="remark_name">{{scope.row.AliasName}}</span>
              </div>
            </template>
        </el-table-column>


        <el-table-column
          prop="ChildrenNum"
          label="直接下级数量"
          sortable
          width="200">
        </el-table-column>
        <el-table-column
          prop="AllChildrenNum"
          label="总下级数"
          sortable
          width="200">
        </el-table-column>
        <el-table-column
          prop="AllOrderNum"
          label="分销订单数量"
          sortable
          width="200">
        </el-table-column>
        <el-table-column
          prop="Commission"
          label="总佣金"
          sortable
          width="200">
        </el-table-column>
        <el-table-column
          prop="TotalCommission"
          label="累计佣金"
          sortable
          width="200">
        </el-table-column>

        <el-table-column
          prop="Price"
          label="已提现佣金"
          sortable
        >
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right"
                     background
                     @current-change="handleCurrentChange"
                     :page-size="msg.pageSize"
                     layout="prev, pager, next"
                     :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "retailRanking",
      data(){
          return{
            options:[],
            msg:{
              pageIndex:1,
              pageSize:20,
              Name:'',
              Source:0,
            },
            loading:false,
            count:0,
            tableData: [],

          }
      },
      created(){
        this.getplat();
        this.getRankingListPage() //排行的列表
      },
      methods:{
        getplat(){
          this.apipost("/api/User/GetMemberUserSourceEnumList", {}, res => {
            if(res.data.resultCode==1){
              this.options = res.data.data
            }

          })
        },

        getRankingListPage(){
          this.loading=true;

          this.apipost("/api/User/GetRankingListPage", this.msg, res => {
            this.loading=false;

            if(res.data.resultCode==1){
              this.tableData = res.data.data.pageData;
              this.count = res.data.data.count;
            }else {
              this.Info(res.data.message);
            }

          })
        },
        formatter(row, column) {
          return row.address;
        },
        Export(){
          let msg = {
            Name:this.msg.Name,
            Source :this.msg.Source ,
          }
          msg = JSON.parse(JSON.stringify(msg));
          this.JavaGetLocalFile(
            "/api/User/GetRankingListToExcel",
            msg,
            "分销排行.xls"
          );
        },
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getRankingListPage();
        },
        empty(){
          this.msg.pageIndex=1;
          this.msg.Name='';
          this.msg.Source=0;
          this.getRankingListPage()

        },
        getList(){
          this.getRankingListPage()
        }
      },
      mounted(){

      }
    }
</script>

<style>
  .retailRanking .el-card__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  .retailRanking .el-button--small{
    padding: 9px 15px;
  }
  .retailRanking .content .searchInput{
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }
  .retailRanking .content .searchInput .el-input__inner{
    border:none;outline:none;
    height: 30px;
    line-height: 30px;
  }
  .retailRanking .content .searchInput{
    line-height: normal;
    display: inline-table;
    border-collapse: separate;
    border-spacing: 0;
    width:250px;
    margin-right: 20px;
  }
  .retailRanking .content{
    background: #fff;
    margin-top:10px;
    padding: 20px;
    box-sizing: border-box;
  }
.retailRanking .headClass{
  background: rgb(243, 245, 246)!important;
  color: rgb(48, 49, 51);
  font-weight: 400;
  padding: 6px 0px;
}
  .retailRanking .app-image{
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius:0%;
    float: left;
    margin-right: 8px;
  }
  .retailRanking .remark_name {
    color: #888888;
    font-size: 12px;
    float: right;
  }
</style>
