<template>
  <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <scroller class="scroller_top">
        <van-cell-group :border="false" v-if="show == 'ranking_employee'">
          <van-cell v-for="item in list.ranking_employee" :key="item.rank" :value="item.point">
            <template slot="icon">
              <span class="">{{item.rank}}</span>
            </template>
            <template slot="title">
              <img src="" alt="">
              <span><Wxopendata type="userName" :openid="item.employee_name"></Wxopendata></span>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group :border="false" v-if="show == 'ranking_leader'">
          <van-cell v-for="item in list.ranking_leader" :key="item.rank" :value="item.point">
            <template slot="icon">
              <span class="">{{item.rank}}</span>
            </template>
            <template slot="title">
              <img src="" alt="">
              <span><Wxopendata type="userName" :openid="item.employee_name"></Wxopendata></span>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group :border="false" v-if="show == 'ranking_team'">
          <van-cell v-for="item in list.ranking_team" :key="item.rank" :value="item.point">
            <template slot="icon">
              <span class="">{{item.rank}}</span>
            </template>
            <template slot="title">
              <img src="" alt="">
              <span>{{item.team_name}}</span>
            </template>
          </van-cell>
        </van-cell-group>
        <noData :list='list.ranking_employee' />
        <div style="padding-bottom: 1.5rem;"></div>
      </scroller>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import Vue from 'vue'
  import {DropdownMenu, DropdownItem, Cell, CellGroup} from 'vant'
  Vue.use(DropdownMenu).use(DropdownItem).use(Cell).use(CellGroup)
  export default {
    comments: {},
    // 数据
    data(){
      return {
        tip: '暂无排名',
        get_id: this.$route.query.id,
        page: 1,
        list:{
          ranking_employee: null,
          ranking_leader: null,
          ranking_team: null,
        },
        value1: 'ranking_employee',
        option1: [
          { text: '全员排名', value: 'ranking_employee' },
          { text: '队长排名', value: 'ranking_leader' },
          { text: '团队排名', value: 'ranking_team' }
        ],
        show: 'ranking_employee'
      }
    },
    mounted(){

    },
    // 组件
    components: {
    },
    watch:{
      value1(new_value) {
        this.show = new_value
      },
    },
    // 方法
    methods:{
      // 排名
      get_ranking_list(id){
        let self = this
        self.showLoading()
        request('get','/api/integral/pk',{pk_id: id}).then((res) => {
          if(res.data.code == '1'){
            self.list = res.data.data
          }else{
            self.$toast(res.data.msg)
          }
        })
      },
      // 加载
      showLoading () {
        this.$toast.loading({
          loadingType: "spinner",
          message: '正在处理'
        })
      },
    },
    // 生命周期 --- 创建完成
    created() {
      // created 创建完毕状态
      this.get_ranking_list(this.get_id)
    },
  };
</script>
<style scoped>
.body_com{height: calc(100% - 1rem); position: relative;}
.scroller_top{
  margin-top: .9rem;
}
</style>
