<template>
     <el-card  :style="{height:height}" shadow="hover" class="header">
         <div class="remindHeader topLine">
            <img src="/static/img/ranking.png" alt="" srcset="">
            <span>个人排行榜</span>
        </div>
        <span>
          <el-select v-model="typeValue" placeholder="请选择" @change="hadleType">
                <el-option
                v-for="item in typeData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
      </span>
         <el-button type="text" class="btn_more" @click="btn_more">查看更多</el-button>
    <el-tabs>
          <el-table  :data="personalData" stripe style="width: 100%" :header-cell-style="{background:'#fff1ed'}">
            <el-table-column width="80" align="center" label="编号">
              <template slot-scope="scope">
                <!-- <img src="/static/img/greenList.png" alt="" srcset="" style="padding-right:10px;"> -->
                <span  class="sort">{{ scope.row.Serialnumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="名字" align="left" width="">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单量" align="left" width="">
              <template slot-scope="scope">
                <span>{{ scope.row.Orderquantity }}</span>
              </template>
            </el-table-column>
            <el-table-column label="销售额" align="left">
              <template slot-scope="scope">
                <span>{{ scope.row.Totalsales }}</span>
              </template>
            </el-table-column>
          </el-table>
    </el-tabs>
  </el-card>
</template>
<script>
import router from '@/router'
import { getRankingData } from '@/api/dashboard/orderDatas'
export default {
    props: {
        height: {
        type: String,
        default: "350px"
        }
    },
    data() {
        return {
            personalData: [],
            typeValue:0,
            typeData:[
            {
            value:0,
            label:'本月'
        },{
            value:1,
            label:'本日'
        },
        ],
        }
    },
    created() {
      this.getPersonalList()
    },
    methods: {
         btn_more() {
            router.push({ name: 'callRecord' })
        },
        getPersonalList(){
          return new Promise(resolve=>{
            const params={
              type:this.typeValue,
            }
            getRankingData(params).then(response=>{
              if(response.state='success'){
                this.personalData=response.personalrankings
              }
            })
          })
        },
        //选择
    hadleType(val){
        this.typeValue=val;
        this.getPersonalList()
    },
    },
}
</script>
<style lang="scss" scoped>
.header{
    margin: 20px 0 0 10px;
    position: relative;
    img{
        vertical-align: middle;
    }
    .el-select{
        width: 90px;
        height: 33px;
        position: absolute;
        top: 20px;
        right: 70px;
    }
}
.btn_more {
    position: absolute;
    top: 20px;
    right: 10px;
}
.el-table thead th{
  background: #fff1ed !important;
}
</style>