<template>
  <view class="handler-enter"  >
    <image class="handler-enter-bg-img"  src="http://res.training.luojigou.vip/FqgcrIypLgcGrrrTR1_XsIrpfNaT?imageView2/0/q/50|imageslim" />
    <image class="handler-enter-small" :src="require('@/static/common/handler-enter-small.png')" />
    <view class="custom-navbar">
      <view class="empty" :style="{height: statusBarHeight + 2 +'px'}"></view>
        <view 
            class="Navbar" 
            :style="{height: ( bounding.top - statusBarHeight ) * 2 + bounding.height + 'px'}"
        >
            <van-icon
               name="arrow-left" 
               size="40rpx"
               color='#fff'
               class="arrow-left" 
               @click="backPage"
            />
            <view class="title">手动录入名单</view>
        </view>
    </view>

    <view class="opra-area" >
      <view class="input-box" >
        <input 
          placeholder="请输入参赛选手号*"
          :placeholder-style="inputStyle"
          class="cus-input"
          :maxlength="8"
          @input="changeInput"
        />
      </view>
      <view class="desc" >
        参赛号为参赛选手线上报名生成的唯一参赛编号
      </view>
      <view class="examine-num" @click="numVisable = true" >
        如何查看参赛编号?
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="getBabyScore">
      提交
    </view>


    <!-- 查看编号弹窗 -->
    <van-overlay :show="numVisable" @click="numVisable = false" >
      <view  class="tip" >
        <image class="baby-num-img" src="http://res.training.luojigou.vip/Fo828dZl201_vmmHCi6eEYAEimfx?imageView2/0/q/50|imageslim" />
        <view class="submit-btn tip-btn">
          知道了
        </view>
      </view>
      
    </van-overlay>


    <!-- 确认名单 -->
    <van-overlay :show="confirmVisable" @click="confirmVisable = false" >
      <view class="student-info-box" @click.stop="() => {}" >
        <view class="student-info">
          <view class="student-ava" >
            <image :src="babyInfo.headImg" />
          </view>
          <view class="student-info-right" >
            <view class="student-info-right-item" style="color: #6fc708" >
              <view class="label">参赛号: </view>
              <view class="content">{{babyInfo.competitionNo}}</view>
            </view>
            <view class="student-info-right-item" style="margin-top: 23rpx; margin-bottom: 23rpx">
              <view class="label">选手姓名: </view>
              <view class="content">{{babyInfo.babyName}}</view>
            </view>
            <view class="student-info-right-item" >
              <view class="label">所在园所: </view>
              <view class="content">{{babyInfo.schoolName}}</view>
            </view>
          </view>
        </view>
        <view  class="student-info-footer" > 
          <view class="cancle-btn common-btn-style " @click="confirmVisable = false" >
            取消
          </view>
          <view class="confirm-btn common-btn-style " @click="submit" >
            确定提交
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import { getBabyScore, bobyPass } from '@/api/promoted'
import Tip from '@/utils/tip'
export default {
  name: 'handlerEnter',
  components: {
  },
  computed: {
    inputStyle () {
      return `font-size: 30rpx;
              font-family: SimHei;
              font-weight: 400;
              color: #D3D3D3;`
    },
    statusBarHeight () {
      return this.$store.state.systemInfo.statusBarHeight
    },
    bounding () {
      return this.$store.state.bounding
    }
  },
  onLoad (options) {
    this.stageId = options.stageId
  },
  data () {
    return {
      stageId: '',
      numVisable: false,
      confirmVisable: false,
      babyInfo: {},
      competitionNo: '' // 编号
    }
  },
  methods: {
    backPage () {
      uni.navigateBack({
        delta: 1
      })
    },
    changeInput (e) {
      this.competitionNo = e.detail.value
    },
    // 提交内容 宝贝批量晋级
    async submit () {
      const $par = {
        babyIds: [this.babyInfo.id],
        stageId: this.stageId
      }
      Tip.loading('提交中')
      const { data, status } = await bobyPass($par)
      Tip.loaded()
      console.log(data)
      if (status === 200) {
        Tip.toast('提交成功', '' , 'none')
        
      }
      this.confirmVisable = false
    },
    // 获取宝贝成绩
    async getBabyScore ( ) {
      if (this.competitionNo.length === 0) {
        Tip.toast('请输入参赛选手号', '', 'none', 1000)
        return
      }
      const $par =  {
        competitionNo: this.competitionNo,
        stageId: this.stageId,
        pageSize: 10000
      }
      const { data, status } = await getBabyScore($par)

      if (status === 200) {
        if (data.entityList.length === 0) {
          Tip.toast('未查询到该参赛编号，请确定参赛选手是否线上报名成功', '', 'none', 2000)
        } else {
          this.confirmVisable = true
          this.babyInfo = data.entityList[0]
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.handler-enter {
  width: 100vw;
  height: 100vh;
  // background: url('http://res.training.luojigou.vip/FqgcrIypLgcGrrrTR1_XsIrpfNaT?imageView2/0/q/50|imageslim') no-repeat;
  // background-size: 100% 100%;
  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    width: 100%;
    z-index: 10;
    .empty {
        width: 100%;
    }
    .Navbar {
        display: flex;
        align-items: center;
        position: relative;
        .arrow-left {
            position: absolute;
            left: 40rpx;
        }
        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 36rpx;
            font-family: SimHei;
            font-weight: 400;
            color: #F7F7F7;
        }
    }
  }
  .opra-area {
    position: absolute;
    top: 448rpx;
    left: 79rpx;
    .input-box {
      width: 604rpx;
      height: 95rpx;
      background: #FFFFFF;
      border-radius: 48rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 31rpx;
      box-sizing: border-box;
      .cus-input {
        width: 542rpx;
      }
    }
    .desc {
      font-size: 24rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #F7F7F7;
      margin-top: 30rpx;
      margin-bottom: 37rpx;
    }
    .examine-num {
      font-size: 28rpx;
      font-family: SimHei;
      font-weight: 400;
      text-decoration: underline;
      color: #F7F7F7;
    }
  }
  .submit-btn {
    width: 604rpx;
    height: 95rpx;
    background: #1677FF;
    border-radius: 48rpx;
    position: absolute;
    bottom: 129rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    font-family: SimHei;
    font-weight: 400;
    color: #FFFFFF;
  }

  .tip {
    position: relative;
    width: 690rpx;
    height: 1240rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .baby-num-img {
      width: 690rpx;
      height: 1240rpx;
      display: block;
    }
    .tip-btn {
      width: 499rpx;
      height: 95rpx;
      position: absolute;
      bottom: 83rpx;
      left: 50%;
      transform: translateX(-50%);
    }

  }

  

  .student-info-box {
    width: 672rpx;
    height: 704rpx;
    background: url('http://res.training.luojigou.vip/FnivqI0xDkv0LQU1-EDyvIzdxkX5?imageView2/0/q/50|imageslim') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .student-info {
      position: absolute;
      top: 258rpx;
      left: 55rpx;
      display: flex;
      .student-ava {
        width: 129rpx;
        height: 129rpx;
        background: #FFFEFF;
        border: 3rpx solid #6fc708;
        border-radius: 50%;
        position: relative;
        top: 14rpx;
        left: 8rpx;
        image {
          width: 133rpx;
          height: 133rpx;
          border-radius: 50%;
          position: absolute;
          top: -14rpx;
          left: -8rpx;
        }
      }
      .student-info-right {
        font-size: 29rpx;
        font-family: SimHei;
        font-weight: 400;
        color: #999999;
        margin-left: 53rpx;
        .student-info-right-item {
          display: flex;
        }
      }
    }
    .student-info-footer {
      display: flex;
      align-items: center;
      position: absolute;
      left: 54rpx;
      bottom: 107rpx;
      .common-btn-style {
        width: 260rpx;
        height: 84rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40rpx;
        font-size: 29rpx;
        margin-right: 44rpx;
      }
      .cancle-btn {
        background: #FFFFFF;
        border: 3rpx solid #1677FF;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: SimHei;
        font-weight: 400;
        color: #1677FF;
      }
      .confirm-btn {
          background: #1677FF;
          font-family: SimHei;
          font-weight: 400;
          color: #FFFFFF;
      }
    }
  }
  .handler-enter-bg-img {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // z-index: 1;
  }
  .handler-enter-small {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
</style>
