<template>
  <div>
    <div class="fl rankdiv">
      <div class="rankdiv-header bgcolor-D0EBFF">日排行</div>
      <div class="rankdiv-con">
        <div class="rankdiv-con-table-header bgcolor-D0EBFF">
          <div class="fl" style="width:20%">排名</div>
          <div class="fl" style="width:29%;text-align:left;margin-left:11%">员工</div>
          <div class="fl" style="width:40%">业绩</div>
        </div>
        <div style="width:88%;margin-left:6%;">
          <div class="second">
            <div v-if="dayList.length&&dayList.length>=2">
              <div style="margin-top:20px">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no2.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-two clear">
                    <img :src="dayList[1].logo||dayList[1].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level2.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{dayList[1].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{dayList[1].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="first" style="width:35%">
            <div v-if="dayList.length&&dayList.length>=1">
              <div style="position:relative;">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no1.png" alt="" class="border-img-one fr">
                  <div class="user-avatar-one clear">
                    <img :src="dayList[0].logo||dayList[0].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level1.png" alt="" class="border-img-level-one">
              </div>
              <div class="rankdiv-con-table-con-info one">
                <p class="clear" style="font-size:24px;color:#FF8E32">{{dayList[0].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:14px;color:#4B97E4;">{{dayList[0].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="third">
            <div v-if="dayList.length&&dayList.length>=3">
              <div style="margin-top:20px">
                <div class="hgandimg-two">
                  <img src="../../../static/image/bg_level_no3.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-three clear">
                    <img :src="dayList[2].logo||dayList[2].avatar||startIcon" alt="" >
                  </div>
                </div>
                <img src="../../../static/image/bg_level3.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{dayList[2].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{dayList[2].manager_name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in dayLists" :key="index" style="width:88%;margin-left:6%;text-align:left;margin-top:10px;">
          <div class="fl" style="width:20%;padding-left:12%;color:#808F9D">
            <p style="width:80px;">{{index + 4}}</p>
          </div>
          <div class="fl" style="width:48%;padding-left:10%;color:#808F9D;">{{item.manager_name}}</div>
          <div class="fl" style="width:30%;padding-left:10%;color:#FF8E32;font-weight:bold">{{item.recharge_pay_sum.toFixed(2)}}</div>
          <div class="clear"></div>
          <div style="with:100%;height:1px;background-color:#ECECEC;margin-top:8px"></div>
        </div>
      </div>
    </div>
    <div class="fl rankdiv mar_L_bfb5">
      <div class="rankdiv-header bgcolor-BFF0C8">周排行</div>
      <div class="rankdiv-con">
        <div class="rankdiv-con-table-header bgcolor-BFF0C8">
          <div class="fl" style="width:20%">排名</div>
          <div class="fl" style="width:29%;text-align:left;margin-left:11%">员工</div>
          <div class="fl" style="width:40%">业绩</div>
        </div>
        <div style="width:88%;margin-left:6%;">
          <div class="second">
            <div v-if="weekList.length&&weekList.length>=2">
              <div style="margin-top:20px">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no2.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-two clear">
                    <img :src="weekList[1].logo||weekList[1].avatar||startIcon" alt="" >
                  </div>
                </div>
                <img src="../../../static/image/bg_level2.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{weekList[1].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{weekList[1].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="first" style="width:35%">
            <div v-if="weekList.length&&weekList.length>=1">
              <div style="position:relative;">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no1.png" alt="" class="border-img-one fr">
                  <div class="user-avatar-one clear">
                    <img :src="weekList[0].logo||weekList[0].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level1.png" alt="" class="border-img-level-one">
              </div>
              <div class="rankdiv-con-table-con-info one">
                <p class="clear" style="font-size:24px;color:#FF8E32">{{weekList[0].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:14px;color:#4B97E4;">{{weekList[0].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="third">
            <div v-if="weekList.length&&weekList.length>=3">
              <div style="margin-top:20px">
                <div class="hgandimg-two">
                  <img src="../../../static/image/bg_level_no3.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-three clear">
                    <img :src="weekList[2].logo||weekList[2].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level3.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{weekList[2].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{weekList[2].manager_name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in weekLists" :key="index" style="width:88%;margin-left:6%;text-align:left;margin-top:10px;">
         <div class="fl" style="width:20%;padding-left:12%;color:#808F9D">
            <p style="width:80px;">{{index + 4 }}</p>
          </div>
          <div class="fl" style="width:48%;padding-left:10%;color:#808F9D;">{{item.manager_name}}</div>
          <div class="fl" style="width:30%;padding-left:10%;color:#FF8E32;font-weight:bold">{{item.recharge_pay_sum.toFixed(2)}}</div>
          <div class="clear"></div>
          <div style="with:100%;height:1px;background-color:#ECECEC;margin-top:8px"></div>
        </div>
      </div>
    </div>
    <div class="fl rankdiv mar_L_bfb5">
      <div class="rankdiv-header bgcolor-FFE8B3">月排行</div>
      <div class="rankdiv-con">
        <div class="rankdiv-con-table-header bgcolor-FFE8B3">
          <div class="fl" style="width:20%">排名</div>
          <div class="fl" style="width:29%;text-align:left;margin-left:11%">员工</div>
          <div class="fl" style="width:40%">业绩</div>
        </div>
        <div style="width:88%;margin-left:6%;">
          <div class="second">
            <div v-if="monthList.length&&monthList.length>=2">
              <div style="margin-top:20px">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no2.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-two clear">
                    <img :src="monthList[1].logo||monthList[1].avatar||startIcon" alt="" >
                  </div>
                </div>
                <img src="../../../static/image/bg_level2.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{monthList[1].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{monthList[1].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="first" style="width:35%">
            <div v-if="monthList.length&&monthList.length>=1">
              <div style="position:relative;">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no1.png" alt="" class="border-img-one fr">
                  <div class="user-avatar-one clear">
                    <img :src="monthList[0].logo||monthList[0].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level1.png" alt="" class="border-img-level-one">
              </div>
              <div class="rankdiv-con-table-con-info one">
                <p class="clear" style="font-size:24px;color:#FF8E32">{{monthList[0].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:14px;color:#4B97E4;">{{monthList[0].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="third">
            <div v-if="monthList.length&&monthList.length>=3">
              <div style="margin-top:20px">
                <div class="hgandimg-two">
                  <img src="../../../static/image/bg_level_no3.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-three clear">
                    <img :src="monthList[2].logo||monthList[2].avatar||startIcon" alt="" >
                  </div>
                </div>
                <img src="../../../static/image/bg_level3.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{monthList[2].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{monthList[2].manager_name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in monthLists" :key="index" style="width:88%;margin-left:6%;text-align:left;margin-top:10px;">
          <div class="fl" style="width:20%;padding-left:12%;color:#808F9D">
            <p style="width:80px;">{{index + 4 }}</p>
          </div>
          <div class="fl" style="width:48%;padding-left:10%;color:#808F9D;">{{item.manager_name}}</div>
          <div class="fl" style="width:30%;padding-left:10%;color:#FF8E32;font-weight:bold">{{item.recharge_pay_sum.toFixed(2)}}</div>
          <div class="clear"></div>
          <div style="with:100%;height:1px;background-color:#ECECEC;margin-top:8px"></div>
        </div>
      </div>
    </div>
    <div class="fr rankdiv">
      <div class="rankdiv-header bgcolor-C7D5F9">季排行</div>
      <div class="rankdiv-con">
        <div class="rankdiv-con-table-header bgcolor-C7D5F9">
          <div class="fl" style="width:20%">排名</div>
          <div class="fl" style="width:29%;text-align:left;margin-left:11%">员工</div>
          <div class="fl" style="width:40%">业绩</div>
        </div>
        <div style="width:88%;margin-left:6%;">
          <div class="second">
            <div v-if="quarterList.length&&quarterList.length>=2">
              <div style="margin-top:20px">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no2.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-two clear">
                    <img :src="quarterList[1].logo||quarterList[1].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level2.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{quarterList[1].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{quarterList[1].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="first" style="width:35%">
            <div v-if="quarterList.length&&quarterList.length>=1">
              <div style="position:relative;">
                <div class="hgandimg-one">
                  <img src="../../../static/image/bg_level_no1.png" alt="" class="border-img-one fr">
                  <div class="user-avatar-one clear">
                    <img :src="quarterList[0].logo||quarterList[0].avatar||startIcon" alt="">
                  </div>
                </div>
                <img src="../../../static/image/bg_level1.png" alt="" class="border-img-level-one">
              </div>
              <div class="rankdiv-con-table-con-info one">
                <p class="clear" style="font-size:24px;color:#FF8E32">{{quarterList[0].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:14px;color:#4B97E4;">{{quarterList[0].manager_name}}</p>
              </div>
            </div>
          </div>
          <div class="third">
            <div v-if="quarterList.length&&quarterList.length>=3">
              <div style="margin-top:20px">
                <div class="hgandimg-two">
                  <img src="../../../static/image/bg_level_no3.png" alt="" class="border-img-two fr">
                  <div class="user-avatar-three clear">
                    <img :src="quarterList[2].logo||quarterList[2].avatar||startIcon" alt="" >
                  </div>
                </div>
                <img src="../../../static/image/bg_level3.png" alt="" class="border-img-level-two">
              </div>
              <div class="rankdiv-con-table-con-info">
                <p class="clear" style="font-size:20px;color:#FF8E32">{{quarterList[2].recharge_pay_sum.toFixed(2)}}</p>
                <p style="font-size:12px;color:#4B97E4;">{{quarterList[2].manager_name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in quarterLists" :key="index" style="width:88%;margin-left:6%;text-align:left;margin-top:10px;">
          <div class="fl" style="width:20%;padding-left:12%;color:#808F9D">
            <p style="width:80px;">{{index + 4 }}</p>
          </div>
          <div class="fl" style="width:48%;padding-left:10%;color:#808F9D;">{{item.manager_name}}</div>
          <div class="fl" style="width:30%;padding-left:10%;color:#FF8E32;font-weight:bold">{{item.recharge_pay_sum.toFixed(2)}}</div>
          <div class="clear"></div>
          <div style="with:100%;height:1px;background-color:#ECECEC;margin-top:8px"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "data_rank",
  components: {},
  data() {
    return {
      startIcon:'../../../static/image/usericon.png',
      dayList:[],
      weekList:[],
      monthList:[],
      quarterList:[],
      dayLists:[],
      weekLists:[],
      monthLists:[],
      quarterLists:[],
      dayed:false,
      weeked:false,
      monthed:false,
      quartered:false,
    };
  },
  watch: {
    'endloading'(n){
      if(n){
        this.$store.commit("changeloading", false);
      }
    }
  },
  computed:{
    endloading(){
      return this.dayed&&this.weeked&&this.monthed&&this.quartered
    }
  },
  methods: {
    getTheDayList(){
      this.dayed=false
      this.$store.commit("changeloading", true);
      this.$api.getRankDayList({limit:10}).then(data=>{
        if(data){
          this.dayList=data.lists
          if(this.dayList.length>3){
            this.dayList.forEach((item,index)=>{
              if(index>2){
                this.dayLists.push(item)
              }
            })
          }
          this.dayed=true
        }else{
          this.$store.commit("changeloading", false);
          this.$Message.info(data.msg)
        }
      })
    },
    getTheWeekList(){
      this.weeked=true
      this.$store.commit("changeloading", true);
      this.$api.getTheWeekList({limit:10}).then(data=>{
        if(data){
          this.weekList=data.lists
          if(this.weekList.length>3){
            this.weekList.forEach((item,index)=>{
              if(index>2){
                this.weekLists.push(item)
              }
            })
          }
          this.weeked=true
        }else{
          this.$store.commit("changeloading", false);
          this.$Message.info(data.msg)
        }
      })
    },
    getTheMonthList(){
      this.monthed=true
      this.$store.commit("changeloading", true);
      this.$api.getTheMonthList({limit:10}).then(data=>{
        if(data){
          this.monthList=data.lists
          if(this.monthList.length>3){
            this.monthList.forEach((item,index)=>{
              if(index>2){
                this.monthLists.push(item)
              }
            })
          }
          this.monthed=true
        }else{
          this.$Message.info(data.msg)
          this.$store.commit("changeloading", false);
        }
      })
    },
    getTheQuarterList(){
      this.quartered=false
      this.$store.commit("changeloading", true);
      this.$api.getTheQuarterList({limit:10}).then(data=>{
        if(data){
          this.quarterList=data.lists
          if(this.quarterList.length>3){
            this.quarterList.forEach((item,index)=>{
              if(index>2){
                this.quarterLists.push(item)
              }
            })
          }
          this.quartered=true
        }else{
          this.$store.commit("changeloading", false);
          this.$Message.info(data.msg)
        }
      })
    },
  },
  created() {
    this.getTheDayList()
    this.getTheWeekList()
    this.getTheMonthList()
    this.getTheQuarterList()
  }
};
</script>
<style>
.rankdiv {
  width: 23%;
  background-color: #fff;
}
.mar_L_bfb5 {
  margin-left:2.7%;
}
.rankdiv-header{
  width: 100%;
  height: 60px;
  font-size: 18px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  border-radius: 5px 5px 0px 0px
}
.rankdiv-con{
  background-color: #fff;
  width: 100%;
  min-height: 600px;
  border-radius:0px 0px 5px 5px
}
.rankdiv-con-table-header{
  width: 88%;
  margin-left: 6%;
  height: 30px;
  margin-top: 20px;
  border-radius: 5px;
}
.rankdiv-con-table-header div{
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.rankdiv-con .first,.rankdiv-con .second,.rankdiv-con .third{
  width: 32%;
  margin-top: 25px;
  text-align: center;
  float: left;
  height: 200px;
}
.user-avatar-two,.user-avatar-three{
  border-radius: 50%;
  width: 74px;
  background-color: #e2e2e2;
  height: 74px;
  border:2px solid #fff;
  margin-left: 18px;
  margin-top: 8px;
  position: absolute;
}
.user-avatar-one{
  width: 94px;
  height: 92px;
  border-radius: 50%;
  margin-left: 36%;
  margin-top: 10px;
  background-color: #e2e2e2;
  border:2px solid #fff;
  position: absolute;
}
.user-avatar-one img{
  width: 90px;
  height: 88px;
  border-radius: 50%;
}
.user-avatar-two img,.user-avatar-three img{
  border-radius: 50%;
  width: 70px;
  height: 70px;
}
.border-img-two{
  position: relative;
  left: 69px;
  top: 5px;
  transform: rotate(9deg);
}
.border-img-one{
  position: relative;
  left: 70px;
  top: 1px
}
.hgandimg-one,.hgandimg-two,.hgandimg-three{
  position: absolute;
}
.border-img-level-two{
  position: relative;
  top: 70px;
}
.border-img-level-one{
  position: relative;
  top: 90px;
}
.rankdiv-con-table-con-info{
  position: relative;
  top: 80px
}
.rankdiv-con-table-con-info.one{
  position: relative;
  top: 100px
}

.bgcolor-D0EBFF{
  background-color: #D0EBFF;
  color: #4B97E4;
}
.bgcolor-BFF0C8{
  background-color: #BFF0C8;
  color: #58BC6A;
}
.bgcolor-FFE8B3{
  background-color: #FFE8B3;
  color: #D8A01E;
}
.bgcolor-C7D5F9{
  background-color: #C7D5F9;
  color: #8665DA;
}
</style>



