<template>
  <div class="result">
    <u-navbar title="考试结果" title-color="#000" :is-back="false" :background="backgroundNavbar"></u-navbar>
    <div class="result_info">
      <div class="grade">{{ data.score }}</div>
      <div class="tips">
        <div>考试分数</div>
        <div>超过<span v-if="data.status==0">{{status0}}</span><span v-if="data.status==1">{{status1}}</span>%的人</div>
      </div>

      <div class="card_list">
        <div class="pass">
          <div>结果</div>
          <div :class="[data.status==0? 'col_nopass':'col_pass']">
            <span v-if="data.status==0">未</span><span v-else>已</span>通过
          </div>
        </div>
        <div class="time">
          <div>用时</div>
          <div class="col_333">{{ time }}</div>
        </div>
        <div class="pass_num">
          <div>对题数</div>
          <div class="col_333">{{ data.rightCount }}</div>
        </div>
        <div class="nopass_num">
          <div>错题数</div>
          <div class="col_333">{{ data.examCount - data.rightCount }}</div>
        </div>
      </div>
      <div class="btn" @click="back">返回</div>
    </div>

  </div>
</template>

<script>
export default {
  customNavigation: true,
  data() {
    return {
      backgroundNavbar: {
        background: "url('https://cdn.cunwuyun.cn/qujing/navbar.png') no-repeat",
        backgroundSize: '100% 100%',
      },
      data: {},
      time: '',
    }
  },
  computed: {
    status0() {
      let arr = [45,55,58]
      let index = parseInt(Math.random()*arr.length)
      return arr[index]
    },
    status1() {
      let arr = [97,98,99]
      let index = parseInt(Math.random()*arr.length)
      return arr[index]
    }
  },
  watch: {
    'data.time'(v) {
      if(v) { 
        const hour = Math.floor(v / 60) // 小时
        const min = v % 60 // 分钟
        if (hour > 0 && min > 0) {
          this.time = `${hour}小时${min}分钟`;
        } else if (hour > 0 && min <= 0) {
          this.time = `${min}小时`;
        } else if (hour <= 0 && min > 0) {
          this.time = `${min}分钟`;
        }
      }
    }
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 2
      })
    },
  },
  onLoad(o) {
    this.data = o
  }
}
</script>

<style lang="scss" scoped>
.result {
    .result_info {
      padding: 32px;
      box-sizing: border-box;
      background: url("https://cdn.cunwuyun.cn/qujing/bg.png") no-repeat;
      background-size: 100% auto;

    .grade {
      height: 112px;
      font-size: 96px;
      color: #2D7DFF;
      line-height: 112px;
      font-weight: 600;
      padding-left: 16px;
      box-sizing: border-box;
    }

    .tips {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      color: #999999;
      padding-left: 16px;
      box-sizing: border-box;
      div {
        & > span {
          color: #2D7DFF;
        }
      }
    }

    .card_list {
      margin-top: 48px;
      display: flex;
      flex-wrap: wrap;

      .pass,
      .time,
      .pass_num,
      .nopass_num {
        width: 47%;
        height: 172px;
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
        border-radius: 16px;
        padding: 24px;
        box-sizing: border-box;

        & > div:first-child {
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          margin-bottom: 16px;
        }

        & > div:last-child {
          font-weight: 500;
          font-size: 50rpx;
        }

        .col_pass {
          color: #3BBC37;
        }

        .col_nopass {
          color: #FF4466;
        }

        .col_333 {
          color: #333333;
        }
      }
      .pass,
      .pass_num {
        margin: 0 30px 32px 0;
      }
    }

    .btn {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 320px;
      height: 88px;
      line-height: 88px;
      background: #2D7DFF;
      border-radius: 44px;
      text-align: center;
      color: #FFFFFF;
    }
  }
}
</style>