<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="derive">导出全部</el-button>
      </div>
    </div>

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

<script>
    export default {
        name: "retailRanking",
      data(){
          return{
            options:[],
            msg:{
              value:0,
              neirong:'',
              Name:''
            }
          }
      },
      created(){
        this.getplat()
      },
      methods:{
        getplat(){
          this.apipost("/api/User/GetMemberUserSourceEnumList", {}, res => {
            if(res.data.resultCode==1){
              this.options = res.data.data
            }

          })
        },
        derive(){ //导出

        },
        empty(){

        },
        getList(){

        }
      },
      mounted(){

      }
    }
</script>

<style>
  .retailRanking .el-card__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  .retailRanking .el-card__header2{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    padding: 18px 20px;
  }
  .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;
  }

</style>
