<template>
  <view class='result-container'>
    <view class="result-head"></view>
    <view class="result-content">
      <view class="result-info">
        <view class="user" v-if="result.baby">
          <view class="user-avatar text-center margin">
            <image class="avatar-img cu-avatar round" :src="result.baby.headImg" mode="aspectFill" />
          </view>
          <view class="user-name">{{ result.baby.babyName }}</view>
        </view>
        <view class="result-item">
          <view class="item-left">选手学校</view>
          <view class="item-right">{{ result.school.schoolName }}</view>
        </view>
        <view class="result-item">
          <view class="item-left">组别</view>
          <view class="item-right">{{ result.classLevel | filterLevel }}</view>
        </view>
        <view class="result-item">
          <view class="item-left">成绩</view>
          <view class="item-right">{{ result.score }}分</view>
        </view>
        <view class="result-item">
          <view class="item-left">用时</view>
          <view class="item-right">{{ result.time | timeFormate }}</view>
        </view>
        <view class="result-item">
          <view class="item-left">荣获</view>
          <view class="item-right">{{ result.otherInfo }}</view>
        </view>
        <view class="result-footer">
          <image src="/static/img/apply/logo01.png" mode="aspectFill" />
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
    }
  },

  onLoad() {
  },

  onShow() {},

  filters: {
    timeFormate(time) {
      let timeStr = '';
      let stringFormat = (i) => {
          return i < 10 ? `0${i}` : `${i}`;
      }
      let minuteTime = 0;
      let secondTime = 0;
      let hourTime = 0;
      if(time < 60) {
          timeStr = `00分${stringFormat(time)}秒`
      } else if(time >= 60 && time < 3600) {
          minuteTime = parseInt(time / 60);
          secondTime = parseInt(time % 60);
          timeStr = `${stringFormat(minuteTime)}分${stringFormat(secondTime)}秒`;
      } else if(time >= 3600) {
          let _t = parseInt(time % 3600);
          hourTime = parseInt(time / 3600);
          minuteTime = parseInt(_t / 60);
          secondTime = parseInt(_t % 60);
          timeStr = `${stringFormat(hourTime)}时${stringFormat(minuteTime)}分${stringFormat(secondTime)}秒`
      }
      return timeStr;
    },
    filterLevel(val) {
      switch (val){
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
        default:
          return '待定'
      }
    },
  },
  computed: {
    ...mapState({
      result: 'result'
    })
  },

  methods: {
    moment
  }

}
</script>

<style lang="scss" scope>
page {
  height: 100%;
}
.result-container {
  min-height: 100%;
  background: linear-gradient(180deg, #67DD5B, #72CF53);
  .result-head {
    background: url('@/static/img/apply/reslut_bg.png');
    background-size: cover;
    height: 326upx;
  }
  .result-content {
    position: relative;
    padding: 14upx 12upx;
    background: #B6F9B6;
    box-shadow: 0px 12upx 20upx 0px rgba(35, 211, 33, 0.37);
    border-radius: 60upx;
    margin: auto 30upx;
    transform: translateY(-60upx);
    .user {
      text-align: center;
      .user-avatar {
        border: 1upx solid #38D736;
        width: 140upx;
        height: 140upx;
        border-radius: 50%;
        margin: 0 auto;
        .avatar-img {
          width: 140upx;
          height: 140upx;
          transform: translate(-6upx, -8upx);
        }
      }
      .user-name {
        font-size: 28upx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 40upx;
        margin: 28upx 0;
      }
    }
  }
  .result-info {
    background: #ffffff;
    height: 100%;
    border-radius: 60upx;
    padding: 34upx 28upx;
    .result-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 2upx solid #F6F6F6;
      padding: 28upx 0;
      .item-left {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 40upx;
      }
      .item-right {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 40upx;
      }
    }
  }
  .result-footer {
    margin: 36upx 12upx 0 0;
    text-align: right;
    font-size: 0;
    image {
      width: 44upx;
      height: 58upx;
    }
  }
}
</style>
