<style>
.saleRankDialog{}
.saleRankDialog .top{
  height: 340px;
  background: url(../../assets/img/saleRank/bg.png)
}
.saleRankDialog .top .top_info{
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.saleRankDialog .top .top_info .head,.saleRankDialog .bottom ._item .head{
  width: 80px;
  height: 80px;
  border: 2px solid #F9DA49;
  border-radius: 50%;
  position: relative;
}
.saleRankDialog .top .top_info .head >.head_img,.saleRankDialog .bottom ._item .head>.head_img{
  width: 76px;
  height: 76px;
  border-radius: 50%;
}
.saleRankDialog .top .top_info .head >.head_guan,.saleRankDialog .bottom ._item .head>.head_guan{
  position: absolute;
  left: -15px;
  top: -24px;
}
.saleRankDialog .bottom ._item .head{
  width: 40px;
  height: 40px;
}
.saleRankDialog .bottom ._item .head>.head_img{
  width: 36px;
  height: 36px;
}
.saleRankDialog .bottom ._item .head>.head_guan{
  left: -8px;
  top: -12px;
}
.saleRankDialog .bottom ._item .head.num_two{
  border-color: #BDC8DB;
}
.saleRankDialog .bottom ._item .head.num_tree{
  border-color: #BAA3A3;
}
.saleRankDialog .top{
  color: #FFFFFF;
  font-size: 14px;
  text-align: center;
}
.saleRankDialog .top ._name{
  margin-top: 13px
}
.saleRankDialog .top ._rank{
  color: #FFFFFF;
  font-size: 30px;
  margin-top: 20px
}
.saleRankDialog .top .top_money{
  padding: 25px 0 ;
}
.saleRankDialog .top .top_money ._num{
  color: #F1A131;
  font-size: 24px;
  margin-top: 5px;
}
.saleRankDialog .top .top_money .left{
  border-right: 2px solid rgba(233,233,233,.5);
}
.saleRankDialog .top .top_money .right{
  border-left: 2px solid rgba(233,233,233,.5);
}
.saleRankDialog .bottom{
  padding: 0 30px;
  background-color: white;
}
.saleRankDialog .bottom ._time {
  text-align: center;
  padding: 20px 0;
}
.saleRankDialog .bottom ._item ._item_left{
  display: flex;
  align-items: center;
}
.saleRankDialog .bottom ._time ._time_num{
  display: inline-block;
  text-align: center;
  line-height: 24px;
  width: 30px;
  height: 24px;
  background: linear-gradient(-30deg,rgba(79,169,255,1),rgba(71,121,255,1));
  color: white;
}
.saleRankDialog .bottom ._item{
  padding: 15px 0;
  border-top: 1px solid #F0F0F0;
  display: flex;
  align-items: center;
}
.saleRankDialog .bottom ._item ._jiangpai{
  height: 26px;
  display: inline-block;
  margin-right: 18px;
}
.saleRankDialog .bottom ._item ._name{
  color: #666666;
  padding-left: 20px;
}
.saleRankDialog .bottom ._item ._money{
  float: right;
  color: #F1A131;
  font-size: 16px;
  flex: 2;
  text-align: right;
}
.saleRankDialog .bottom ._company{
  font-size: 12px;
  color: #888888;
  padding: 15px;
  border-top: 1px solid #F0F0F0;
}
.saleRankDialog .bottom ._company span{
  color: #333333;
  display: inline-block;
  margin-left: 20px;
}
.saleRankDialog .history>div{
  background-color: #D0D0D0;
  color: #E95252;
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.saleRankDialog .history>div span{
  cursor: pointer;
}
</style>
<template>
  <el-row class="saleRankDialog">
    <el-row class="top">
      <div class="top_info">
      <div class="head">
        <img class="head_img" :src="detail.List[0].EmployeeImg" alt="">
        <img class="head_guan" src="../../assets/img/saleRank/diyitou.png" alt="">
      </div> 
      </div>
      <p class="_name">{{detail.List[0].EmployeeName}}（{{detail.List[0].BranchName}}）</p>
      <p class="_rank">小组赛第1名</p>
      <el-row class="top_money">
        <el-col :span="12" class="left">
          <div>
            <p>本期数据值</p>
            <p class="_num">¥{{moneyFormat(detail.List[0].WeekTotalPrice)}}</p>
          </div>
        </el-col>
        <el-col :span="12" class="right">
          <div>
            <p>累计数据值</p>
            <p class="_num">¥{{moneyFormat(detail.List[0].TotalPrice)}}</p>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="bottom">
      <el-row class="_time">
        <p>销售排名时间： <span class="_time_num">{{detail.StartDateMonth}}</span> 月 <span class="_time_num">{{detail.StartDateDay}}</span> 日 - <span class="_time_num">{{detail.EndDateMonth}}</span> 月 <span class="_time_num">{{detail.EndDateDay}}</span> 日</p>
      </el-row>
      <template v-for="(item, index) in detail.List" v-if="index !== 0">
        <el-row class="_item">
          <div class="_item_left">
            <img class="_jiangpai" :src="jiangpai[index-1].p" alt="">
            <div class="head" :class="{'num_two': index === 1, 'num_tree': index === 2}">
              <img class="head_img"  :src="item.EmployeeImg" alt="">
              <img v-if="index < 3" class="head_guan" :src="jiangpai[index-1].g" alt="">
            </div> 
            <p class="_name">{{item.EmployeeName}}（{{item.BranchName}}）</p>
          </div>
          <p class="_money">¥{{moneyFormat(item.WeekTotalPrice)}}</p>
        </el-row>
      </template>
      <el-row class="_company">
        <el-col :span="10">
          <p>公司名称 <span>成都微途科技有限公司</span></p>
        </el-col>
        <el-col :span="8">
          <p>统计时间 <span>按出团时间统计</span></p>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-row>
    <el-row class="history">
      <div>
        <span @click="goUrl('saleRnkBefore')">往期排行 >></span>
      </div>
    </el-row>
  </el-row>
</template>
<script>
export default {
  props:['detail'],
  data(){
    return {
      list: [1,2,3,4],
      jiangpai: [
        {
          p: require('../../assets/img/saleRank/jiangpai2.png'),
          g: require('../../assets/img/saleRank/diertou.png')
        },
        {
          p: require('../../assets/img/saleRank/jiangpai3.png'),
          g: require('../../assets/img/saleRank/disantou.png')
        },
        {
          p: require('../../assets/img/saleRank/jiangpai4.png'),
        },
        {
          p: require('../../assets/img/saleRank/jiangpai5.png'),
        },
      ]
    }
  },
  mounted(){
    
  },
  methods:{
    goUrl: function (path) {
      this.$router.push({ name: path, query:{ tab: '往期排行'}})
      this.$emit('closeChangeMachie')
    }
  }
}
</script>