<template>
    <view class="apply-school" >
        <view 
          class="school-card" 
          id="school-card" 
          v-for="item in schoolList" 
          :key="item.id"
          @click="goSchoolDetailPage(item)"
          >
          <view class="top" >
            园长-{{item.principalName || '逻辑狗'}}
          </view>
          <view class="center" >
            <view class="school-name" >
                <image  class="school-img" :src="require('@/static/activity/school.png')" />
                <view class="school-name-text van-ellipsis" >{{item.schoolName}}</view>
            </view>
            <image  class="center-arrow" mode="aspectFit" :src="require('@/static/activity/arrow.png')"  />
          </view>
          <view  class="line" />
          <view class="footer" >
            参赛选手：<text>{{item.userCount || 0}}</text>人
          </view>
        </view>
        <view class="empty-page" > 
          <empty-page v-if="schoolList.length === 0 && requestStatus" description='暂无参与园所' />
        </view>
    </view>
</template>

<script>
import { getNodeInfo } from '@/utils/wxTool'
import { getCloudSchool } from '@/api/competition'
import Tip from '@/utils/tip'
export default {
  name: 'apply-school',
  onReady () {
    getNodeInfo('#school-card', 'single').then( res => {
      console.log(res);
    })
  },
  onLoad (options) {
    const { id } = options
    this.id = id || 1
    this.getCloudSchool()
  },
  data () {
    return {
      schoolList: [],
      id: '',
      requestStatus: false
    }
  },
  methods: {

    goSchoolDetailPage (records) {
      const { id, schoolName } = records
      uni.navigateTo({
        url: `/pages/competition/schoolDetail?schoolId=${id}&stageId=${this.id}&schoolName=${schoolName}`
      })
    },
    async getCloudSchool () {
      Tip.loading('加载中')
      const { status, data } = await getCloudSchool({stageId: this.id})
      this.requestStatus = true
      Tip.loaded()
      if (status === 200) {
        this.schoolList = data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.apply-school {
  width: 100vw;
  min-height: 100vh;
  background: #F5F6FA;
  overflow: hidden;
  padding-bottom: 100rpx;
  box-sizing: border-box;
  .school-card {
    width: 686rpx;
    height: 250rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(235, 235, 235, 0.5);
    border-radius: 20rpx;
    background-color: #fff;
    padding: 30rpx 32rpx 0rpx 28rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 30rpx;
    position: relative;
    z-index: 2;
    .top {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9C9AAB;
      margin-bottom: 24rpx;
    }
    .center {
      display: flex;
      justify-content: space-between;
      align-items: center;
 
      box-sizing: border-box;
      margin-bottom: 30rpx;
      .school-name {
        display: flex;
        align-items: center;
        .school-img {
          width: 30rpx;
          height: 32rpx;
          margin-right: 14rpx;
        }
        .school-name-text {
          width: 500rpx;
          font-size: 36rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #42516C;
          display: block;
        }
      }
      .center-arrow {
        width: 20rpx;
        height: 34rpx;
        display: block;
      }
    }
    .line {
      width: 686rpx;
      height: 2rpx;
      margin-left: -24rpx;
      background-color: #f6f6f6;
    }
    .footer {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9C9AAB;
      height: 92rpx;
      width: 100%;
      display: flex;
      align-items: center;
      text {
        color: #FE530F;
        margin-right: 8rpx;
      }
    }
  }
}

.empty-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>