<template>
  <div class="qa-result" v-if="show">
    <div class="accuracy">
      <img alt="正确率"
           src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAnCAMAAACRzVCoAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABWVBMVEXjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEvjTEv///9nVzzOAAAAcXRSTlMARL/HBDWzkYdxHsaLO/C8WvwLbIN5/hhz1GblIVjdq5YqQeGPK/3RXA/aYcuBAXotor4upbmFzj039VFD894I7tsiCXK9ulMQew1/qS+VYOKK2ZuJVGhH+qHCiE3gAvTVRjkdXmqe3yWqZxu08QdVpt80DfsAAAABYktHRHI2Dg1YAAAAB3RJTUUH5QUMDhIBDQZ9FgAAAXBJREFUOMuVlGdbwjAUhS8qDhQU9wYXbgXFhSIKLhT3xr0Xjvv/v0iTpqXGtrfnS3JPzvskT9JbALJcRcUl9DSAuxSxzAlQjnlV0POeSgXAKjLg9TEAq6lADary19KAOtRUTwIadAAbmwhAMxaqxR5oRaPa2m2ADmO+MxDssga6C+M9vV7bI/WF9Hz/AOGjGvRp+aFh0r2OaMDomLQ4HpaBiMhPTMqLUZwyf4hpOe+Zyfuzf8w5NR+bl4GFuLKyaDQTSxxYTkr5lNh9xWCvcnMtJe+wLo4b2ihw09yL/HeFm1sCyejmNnd2TK59VyBuzdpj9b7pS4nP7UAYh6w8AnMdq8gJL09ZEQQrqQc7Y32ciCnzKFhL7eVzZR5QZlmw0wVHwgCXynh1bUtAhncBwE1+iFP+AHDLkDv2PPcUAB70fnskAQBPAngmAgBZDryQAUhy4pVOwJsCvDsA4MOPmHMCAOTw88sZkUaXMwC+f+wzv0OBrpv/bqK7AAAAAElFTkSuQmCC"/>
      <span>正确率</span>
      <em>{{ result.accuracy|percentage }}%</em>
    </div>
    <div class="result-info">
      恭喜您 ! 一共答对了 <em>{{ result.rightQuestionsNum }}</em> 道题
    </div>
    <div class="chance">当前正确率您可得到 <em>{{ result.award }}</em> 次抽奖机会</div>
  </div>
</template>

<script>

// 骁龙答题结果封装
export default {
  name: "qaLuckyDraw",
  data() {
    return {
      result: {},
      show: false
    }
  },
  created() {
    this.publicData.$on('qaDrawShow', args => {
      console.log('qaDrawShow-----', args)
      this.show = true;
      this.result = args;
    });
  },
  filters: {
    percentage(val) {
      if (val) {
        return Math.round(val * 100).toFixed(0);
      }
      return '';
    }
  }
}
</script>

<style lang="scss" scoped>
.qa-result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;

  .accuracy {
    color: #e44b4a;
    text-align: center;
    margin-top: 0.79rem;

    img {
      width: 0.49rem;
      height: 0.39rem;
      vertical-align: middle;
    }

    span {
      font-size: 0.43rem;
      margin: 0 0.0rem;
      display: inline-block;
    }

    em {
      font-style: normal;
      font-size: 0.84rem;
    }
  }

  .result-info {
    color: #ffffff;
    font-size: 0.42rem;
    margin-top: 0.45rem;

    em {
      font-style: normal;
      color: #6ac5d8;
    }
  }

  .chance {
    display: inline-block;
    padding: 0 10px;
    color: #ffffff;
    height: 0.44rem;
    line-height: 0.44rem;
    background-color: #495975;
    border-radius: 0.22rem;
    margin: 0.45rem auto;
    font-size: 0.2rem;

    em {
      font-style: normal;
      color: #6ac5d8;
    }
  }
}
</style>
