<template>
  <view class="search">
    <view class="search-com " :style="{'z-index': overlay? 2 : 1}" >
      <search-com
        @focus='(records) => overlay = records'
        @search='search'
      />
    </view>
    <view class="class-tab" v-if="!overlay && name.length === 0">
      <class-tab
        :classCategory='classCategory'
        @changeClass='changeClass'
      />
    </view>
    <!-- 选择选手 -->
    <view class="student-list" >
      <block v-if="curClassList.length > 0">
        <student-select
          v-for="item in curClassList"
          :key="item.id"
          :itemData='item'
          @pushBabyIds='pushBabyIds'
          :babyIds='babyIds'
        />
      </block>
      <view v-if="curClassList.length === 0 && name.length === 0 && !overlay && requestState" class="empty-page-box">
        <empty-page description='暂无参赛选手' :image="require('static/common/empty2.png')" />
      </view>
    </view>

    <!-- 底部 -->
    <search-footer
      :babyIds='babyIds'
      @openSubmitDialog="openSubmitDialog"
    />

    <!-- 搜索时遮罩 -->
    <view class="overlay" v-show="overlay"  @click="overlay = false"/>

    <!-- 提交弹窗 -->
    <submit-dialog
      :submitDialogShow='submitDialogShow'
      :babyInfoList='selectBabyList'
      @submit='submit'
      @closeSubmitDoalog='submitDialogShow = false'
    />
  </view>
</template>

<script>
import SearchCom from './components/SearchCom'
import ClassTab from './components/ClassTab'
import StudentSelect from './components/StudentSelect'
import SearchFooter from './components/SearchFooter'
import SubmitDialog from './components/SubmitDialog'
import { getBabyScore, bobyPass } from '@/api/promoted'
import { classCategory as _classCategory } from './config'
import Tip from '@/utils/tip'
import { babyList as babyList11 } from './config'
export default {
  name: 'search',
  components: {
    SearchCom,
    ClassTab,
    StudentSelect,
    SearchFooter,
    SubmitDialog
  },
  computed: {
    curClassList () {
      if ( this.name.length !== 0) {
        return this.babyList.filter( baby =>  baby.babyName.includes(this.name) && baby.isPass !== 1 ) 
      } else if ( this.name.length === 0  && this.overlay) {
        return []
      } else {
        return this.babyList.filter( baby => baby.classLevel === this.classType && baby.isPass !== 1  )
      }
    },
    selectBabyList () {
      return this.babyList.filter( baby => this.babyIds.includes(baby.id) && baby.isPass !== 1  )
     
    }
  },
  onLoad (options) {
    const { stageId } = options
    this.stageId = stageId
    this.getBabyScore()
  },
  data () {
    return {
      overlay: false, // 搜索遮罩
      submitDialogShow: false, // 提交
      stageId: '',
      babyIds: [] ,// 需要提交的ids集合
      babyList: [], // 宝贝列表
      classType: -1 , //  当前tabs的类型
      name: '',  // 搜索是园长或者园所名
      requestState: false, // 主请求是否结束
      classCategory: []
    }
  },
  methods: {
    // 搜索学生
    search (keyword) {
      this.name = keyword
    },
    // 打开提交窗口
    openSubmitDialog () {
      if (this.babyIds.length > 0) {
        this.submitDialogShow = true
      } else {
        Tip.toast('至少选择一名选手', '', 'none')
      }
    },
    changeClass (classType) {
      this.classType = classType
    },
    // 提交内容 宝贝批量晋级
    async submit () {
      const $par = {
        babyIds: this.babyIds,
        stageId: this.stageId
      }
      Tip.loading('提交中')
      const { data, status } = await bobyPass($par)
      Tip.loaded()
      console.log(data)
      if (status === 200) {
        Tip.toast('提交成功', '' , 'none')
        this.getBabyScore()
        this.babyIds = []
      }
      this.submitDialogShow = false
    },
    // 获取宝贝成绩
    async getBabyScore () {
      const $par =  {
        name: '',
        stageId: this.stageId,
        pageSize: 10000
      }
      const { data, status } = await getBabyScore($par)
      this.requestState = true
      
      this.babyList = data.entityList.filter( item => item.isPass === 0 )
      this.classCategory = _classCategory.map( _classTab => {
        _classTab.count = this.babyList.filter( baby => baby.classLevel === _classTab.id ).length
        return _classTab
      })
    },
    // 添加宝贝id
    pushBabyIds (id) {
      const index = this.babyIds.indexOf(id)
      if (index === -1) {
        this.babyIds.push(id)
      } else {
        this.babyIds.splice(index, 1)
      }
    }
  }
}
</script>

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

.student-list {
  height: 100vh;
  padding-bottom: 200rpx;
}

.search-com  {
  width: 100vw;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  position: relative;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .6);
}


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