<template>
    <view class="promoted" >
      <view class="add-btn" @click="goPromotedSearch">
        <add-btn desc='添加晋级选手' />
      </view>
      <view style="margin-top: 20px" @click="goHandlerEnterPage">
        <add-btn desc='手动录入晋级选手' />
      </view>
      
      <view class="class-tab" >
         <class-tab 
           @changeClass='changeClass'
           :classCategory='classCategory'
         />
      </view>
      <block v-if="curClassList.length > 0">
        <student-item
          :rank='index + 1'
          v-for="(item, index) in curClassList" 
          :key="item.id"
          :itemData='item'
        />
      </block>
      
      <view class="empty-page-box" v-if="curClassList.length === 0 && requestState">
        <empty-page description='暂无晋级名单' :image="require('static/common/empty2.png')" />
      </view>
    </view>
</template>

<script>
import AddBtn from './components/AddBtn'
import ClassTab from './components/ClassTab'
import StudentItem from './components/StudentItem'
import { getBabyScore } from '@/api/promoted'
import { classCategory as _classCategory } from './config'
export default {
  name: 'promoted',
  components: {
    AddBtn,
    ClassTab,
    StudentItem
  },
  computed: {
    curClassList () {
      return this.babyList.filter( baby => baby.classLevel === this.classType )
    }
  },
  onLoad (options) {
    const { stageId } = options
    console.log(stageId, 'id');
    this.stageId = stageId
  
  },
  onShow () {
      this.getBabyScore()
  },
  data () {
    return {
      babyList: [],
      classType: -1,
      requestState: false,
      classCategory: '',
    }
  },
  methods: {
    // 去手动录入选手的页面
    goHandlerEnterPage () {
      uni.navigateTo({
        url: `/pages/promoted/handlerEnter?stageId=${this.stageId}`
      })
    },
    changeClass (classType) {
      this.classType = classType
    },
    // 获取宝贝成绩
    async getBabyScore () {
      const $par =  {
        name: '',
        stageId: this.stageId,
        pageSize: 10000
      }
      const { data, status } = await getBabyScore($par)
      this.requestState = true
      console.log( data, status);
      this.babyList = data.entityList.filter( item => item.isPass === 1 )
      this.classCategory = _classCategory.map( classTab => {
        classTab.count = this.babyList.filter( baby => baby.classLevel === classTab.id ).length
        return classTab
      })
    },
    // 跳转到搜索页面
    goPromotedSearch () {
      uni.navigateTo({
        url: `/pages/promoted/search?stageId=${this.stageId}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.add-btn {
  margin-top: 70rpx;
}
.class-tab {
  position: sticky;
  top: 0rpx;
}

.empty-page-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>