<template>
  <section class="experience-dialog-wrapper">
    <van-overlay :show="showDialog" class="v-overlay-q">
      <section class="loading-wrapper" >
        <article class="content">
          <img class="img-tips" src="../../images/question/note.png" alt="">
          <p class="tips">您已完成本次免费练习体验</p>
          <p class="status">对<span class="cm rn">{{statisConfig.rightNum}}</span>题，错<span class="cm en">{{statisConfig.errorNum}}</span>题，正确率<span class="cm rate">{{statisConfig.rate}}%</span></p>
          <p class="guide-tips">想体验完整题目，请先激活或购买题库</p>
          <div class="btn-wrapper">
            <span class="plain" @click="activeCard">去激活</span>
            <span class="primary" @click="buyCard">去购买</span>
          </div>
        </article>
        <img class="bt-close" @click="close" src="../../images/question/dialog-close.png" alt="">
      </section>
    </van-overlay>
  </section>
</template>
<script>
export default {
  props: {
    statisConfig: {
      type: Object,
      default: () => {
        return {
          rightNum: 0,
          errorNum: 0,
          rate: 0
        }
      }
    },
    showDialog: {
      type: Boolean,
      default: true,
    },
    // rightNum: {
    //   type: Number | String,
    //   default: 0,
    // },
    // errorNum: {
    //   type: Number | String,
    //   default: 0,
    // },
    // rate: {
    //   type: Number | String,
    //   default: 0,
    // }
  },

  methods: {
    activeCard() {
      this.$emit('activeCard');
    },
    buyCard() {
      this.$emit('buyCard');
    },
    close() {
      this.$emit('close');
    }
  },
}
</script>
<style lang="less" scoped>
.experience-dialog-wrapper {
  .v-overlay-q {
    .loading-wrapper {
      text-align: center;
      position: fixed;
      top: 50%;
      left: 50%;
      width: 300px;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        padding: 20px 15px 30px;
        background-color: #ffffff;
        border-radius: 3px;
        .img-tips {
          width: 80px;
          height: 80px;
        }
        .tips {
          margin: 10px 0;
          font-size: 16px;
          font-weight: 700;
          color: #373839;
        }
        .status {
          font-size: 13px;
          color: #676869;
          .cm {
            font-size: 18px;
            font-weight: 700;
            padding: 0 4px;
          }
          .rn {
            color: #373839;
          }
          .en {
            color: #ED3131;
          }
          .rate {
            color: #449284;           
          }
        }
        .guide-tips {
          margin: 4px 0 30px;
          font-size: 12px;
          color: #979899;
        }
        .btn-wrapper {
          display: flex;
          flex-direction: row;
          align-content: center;
          & > span {
            width: 115px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-weight: 700;
            border-radius: 20px;
            &.plain {
              border: 1px solid #449284;
              color: #449284;
              margin-right: 10px;
            }
            &.primary {
              color: #FFFFFF;
              background: #449284;
            }
          }
        }
      }
      .bt-close {
        margin-top: 20px;
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>