<template>
  <div class="bank-report">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div
          class="section__header section__header--warm"
          v-if="!examResult.reportStatus"
        >
          <div class="title">
            <span class="icon">X</span>
            测试未通过
          </div>
          <!-- <div class="desc">
            答题时长：12分钟
            <span class="note">(限时60分钟)</span>
          </div> -->
        </div>
        <div
          class="section__header section__header--success"
          v-if="examResult.reportStatus"
        >
          <div class="title">
            <span class="icon">✔</span>
            测试通过
          </div>
          <!-- <div class="desc">
            答题时长：12分钟
            <span class="note">(限时60分钟)</span>
          </div> -->
        </div>

        <div class="section__body">
          <div class="section__body__content">
            <!-- <div class="left-box">
              <div class="left-box__in">
                <div class="title">
                  试卷得分
                  <span class="note">（客观题）</span>
                </div>
                <div class="desc">78</div>
                <div class="other">满分100</div>
              </div>
              <div class="left-box__in left-box__in--bottom">
                <div class="title">
                  试卷得分
                  <span class="note">（客观题+主观题）</span>
                </div>
                <div class="desc">86</div>
                <div class="other">满分120</div>
              </div>
            </div> -->
            <div class="right-box">
              <div class="right-box__in">
                <div class="title">
                  试卷得分
                  <span class="note">（客观题）</span>
                </div>
                <div class="desc">{{ examResult.score }}</div>
                <div class="other">满分{{ examResult.totalScore }}</div>
              </div>
              <div class="right-box__in right-box__in--bottom">
                <div class="child">
                  <div class="child__title child__title--success">
                    {{ examResult.rightQuestionNum }}
                  </div>
                  <div class="child__desc">正确题数</div>
                </div>
                <div class="child">
                  <div class="child__title child__title--yellow">
                    {{ examResult.lessQuestionNum }}
                  </div>
                  <div class="child__desc">少选题数</div>
                </div>
                <div class="child child---right">
                  <div class="child__title child__title--warm">
                    {{ examResult.doWrongQuestionNum }}
                  </div>
                  <div class="child__desc">错误题数</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="section__footer">
          <el-button type="primary" class="btn">返回列表</el-button>
          <el-button type="primary" class="btn">练习下一节</el-button>
          <el-button type="primary" class="btn">重新做题</el-button>
          <el-button type="primary" class="btn">错题解析</el-button>
          <el-button type="primary" class="btn">全部解析</el-button>
        </div> -->
      </div>
    </section>
    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters } from "vuex";
export default {
  name: "BankExplain",
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["examResult"]),
  },
  mounted() {
    if (JSON.stringify(this.examResult) == "{}") {
      this.$router.back(-1);
    }
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-report {
  .section {
    &__header {
      height: 120px;
      border-radius: 0px;
      padding-top: 10px;

      &--warm {
        background: #fff3f5;
        .title {
          text-align: center;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ff3b30;

          .icon {
            vertical-align: middle;
            display: inline-block;
            width: 48px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            background: #ff3b30;
            color: #fff;
            font-size: 30px;
          }
        }
      }

      &--success {
        background: #f8fef9;
        .title {
          text-align: center;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #34c759;

          .icon {
            vertical-align: middle;
            display: inline-block;
            width: 48px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            background: #34c759;
            color: #fff;
            font-size: 30px;
          }
        }
      }

      .desc {
        margin-top: 20px;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;

        .note {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    &__body {
      width: 100%;
      height: 305px;
      border-bottom: 1px solid #eee;

      &__content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .left-box {
          width: 300px;
          height: 240px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          margin: 0 10px;

          &__in {
            flex: 1;
            border-bottom: 1px solid #eee;
            padding: 5px 18px;

            .title {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;

              .note {
                color: #999;
              }
            }

            .desc {
              margin-top: 20px;
              font-size: 48px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;
              text-align: center;
            }

            .other {
              margin-top: 14px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 24px;
              text-align: center;
            }

            &--bottom {
              border: 0;
            }
          }
        }

        .right-box {
          margin: 0 10px;
          display: flex;
          width: 300px;
          height: 240px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 8px;
          flex-direction: column;

          &__in {
            flex: 1;
            border-bottom: 1px solid #eee;
            padding: 5px 18px;

            .title {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;

              .note {
                color: #999;
              }
            }

            .desc {
              margin-top: 20px;
              font-size: 48px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;
              text-align: center;
            }

            .other {
              margin-top: 14px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 24px;
              text-align: center;
            }

            &--bottom {
              padding: 0;
              border: 0;
              height: 100%;
              display: flex;
              .child {
                flex: 1;
                height: 100%;
                border-right: 1px solid #eee;
                padding: 5px 18px;

                &--right {
                  border: 0;
                }

                &__title {
                  margin-top: 20px;
                  font-size: 36px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #34c759;
                  line-height: 24px;
                  text-align: center;

                  &--success {
                    color: #34c759;
                  }

                  &--warm {
                    color: #ff3b30;
                  }

                  &--yellow {
                    color: #ffc53d;
                  }
                }

                &__desc {
                  margin-top: 10px;
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  line-height: 24px;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;

      .btn {
        cursor: pointer;
        width: 140px;
        height: 32px;
        padding: 0;
        border-radius: 16px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        margin: 0 4px;
      }
    }
  }
}
</style>
