<template>
  <view class='result'>
    <view class="success" v-if="signUp">
      <view class="header">
        <view class="info flex justify-center align-center">
          <image class="img" src="/static/img/common/success.png"></image>
          <view class="title">报名成功</view>
        </view>
        <image class="logo" :src="logoImg" mode="aspectFill" />
      </view>
      <view class="content">
        <view class="title-info flex align-center">
          <image class="no_img" src="/static/img/apply/sign_no.png" mode="" />
          <text class="no">{{ signUp.competitionNo }}</text>
        </view>
        <view class="user-info flex" v-if="baby">
          <image class="avatar cu-avatar round" :src="baby.headImg" mode="aspectFill" />
          <view class="user-info_content">
            <view class="name info-item">{{ baby.babyName }}·选手姓名</view>
            <view class="info-item" v-if="signUp.school">所在园所：{{ signUp.school.schoolName || signUp.schoolId }}</view>
            <view class="info-item">组别：{{ signUp.classLevel | filterLevel }}</view>
          </view>
        </view>
        <view class="game-info flex flex-direction justify-center">
          <view class="game-item" v-for="(item, index) in stageList" :key="index">{{ item.name }}日期：{{ item.startTime | dateFormat('YYYY-MM-DD') }} — {{ item.endTime | dateFormat('MM-DD') }}</view>
        </view>
        <image class="success_red" src="/static/img/apply/success_red.png" mode="" />
        <button class="cu-btn block detail round" @tap.stop="navTo('/pages/apply/detail')">查看详情</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      logoImg: require('@/static/img/apply/sign_logo.png'),
    }
  },

  onLoad() {},

  onShow() {},

  filters: {
    filterLevel(val) {
      switch (val){
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
        default:
          return '待定'
      }
    }
  },

  computed: {
    ...mapState({
      signUp: 'signUp',
      baby: 'baby',
      stageList: 'stageList'
    })
  },

  methods: {
    handleDetail() {

    },
    navTo(route) {
      this.$mRouter.push({route})
    }
  }

}
</script>

<style lang="scss">
.result {
  .success {
    .header {
      position: relative;
      height: 436upx;
      background: linear-gradient(360deg, rgba(131, 238, 129, 0) 0%, #4CD84A 20%, #4CD84A 100%);
      .img {
        width: 64upx;
        height: 64upx;
        margin-right: 16upx;
      }
      .logo {
        width: 190upx;
        height: 276upx;
        position: absolute;
        right: 12upx;
        bottom: 136upx;
      }
    }
    .info {
      padding-top: 100upx;
    }
    .content {
      position: relative;
      transform: translateY(-196upx);
      width: 686upx;
      padding: 26upx 24upx 40upx;
      margin: 0 auto;
      background: #FFFFFF;
      box-shadow: 0px 12upx 22upx 0px rgba(190, 224, 190, 0.3);
      border-radius: 40upx;
      .title-info {
        font-size: 0;
        padding: 0 0 24upx 12upx;
        border-bottom: 2upx solid rgba(153, 153, 153, 0.1);
        .no {
          font-size: 32upx;
          line-height: 36upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
      .no_img {
        width: 106upx;
        height: 36upx;
        margin-right: 20upx;
      }
      .user-info {
        margin-top: 48upx;
        .user-info_content {
          flex: 1;
        }
        .info-item {
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 28upx;
          margin-bottom: 18upx;
        }
        .name {
          font-size: 28upx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 28upx;
        }
        .avatar {
          width: 84upx;
          height: 84upx;
          margin-right: 32upx;
          background: #FFFFFF;
        }
      }
      .game-info {
        margin: 28upx auto 0;
        width: 590upx;
        height: 180upx;
        background: #F6F6F6;
        border-radius: 22upx;
        padding-left: 28upx;
        .game-item {
          height: 28upx;
          line-height: 28upx;
          font-size: 24upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-bottom: 20upx;
        }
      }
      .detail {
        margin: 60upx auto 0;
        width: 590upx;
        height: 72upx;
        line-height: 72upx;
        background: #23D321;
        box-shadow: 0px 4upx 12upx 0px rgba(35, 211, 33, 0.43);
        border-radius: 200upx;
        color: #FFFFFF;
        font-weight: 500;
        font-size: 28upx;
      }
      .success_red {
        position: absolute;
        width: 164upx;
        height: 164upx;
        top: 72upx;
        right: 48upx;
      }
    }
    .title {
      font-size: 68upx;
      font-family: YouSheBiaoTiHei;
      color: #FFFFFF;
    }
  }
}
</style>
