<template>
  <div class="bank-explain">
    <section class="section">
      <div class="section__header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, index) in $route.matched"
            :key="index"
            :to="{ path: item.path }"
            >{{ item.name }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="section__body">
        <div class="explain-record">
          <div class="explain-record__header">
            <el-tabs v-model="activeName">
              <el-tab-pane label="对题记录" name="1"></el-tab-pane>
              <el-tab-pane label="错题记录" name="2"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="explain-record__body">
            <div class="left-box">
              <div class="left-box__header">
                <div class="text">已完成<span>30</span>/60道题</div>
              </div>
              <div class="left-box__body">
                <div class="question" v-if="questionIndex == 0">
                  <div class="question__title">4、多选题</div>
                  <div class="question__desc">
                    建造师职业资格注册的有效期一般为（ ）年。
                  </div>
                  <div class="question__content">
                    <el-checkbox
                      class="checkbox"
                      v-for="(item, index) in 20"
                      :key="index"
                      v-model="checked"
                    >
                      <div>备选项</div>
                    </el-checkbox>
                  </div>
                  <div class="question__btns">
                    <div class="collect">收藏本题</div>
                  </div>
                </div>

                <div class="question" v-if="questionIndex == 1">
                  <div class="question__title">4、单选题</div>
                  <div class="question__desc">
                    建造师职业资格注册的有效期一般为（ ）年。
                  </div>
                  <div class="question__content">
                    <el-radio
                      class="radio"
                      v-for="(item, index) in 4"
                      :key="index"
                      v-model="checked"
                    >
                      <div>备选项</div>
                    </el-radio>
                  </div>
                  <div class="question__btns">
                    <div class="collect">收藏本题</div>
                  </div>
                </div>

                <div class="question" v-if="questionIndex >= 2">
                  <div class="question__title">4、判断题</div>
                  <div class="question__desc">
                    建造师职业资格注册的有效期一般为（ ）年。
                  </div>
                  <div class="question__content">
                    <el-radio
                      class="radio"
                      v-for="(item, index) in 2"
                      :key="index"
                      v-model="checked"
                    >
                      <div>备选项</div>
                    </el-radio>
                  </div>
                  <div class="question__btns">
                    <div class="collect">收藏本题</div>
                  </div>
                </div>
              </div>

              <div class="left-box__footer">
                <div class="btn">上一题</div>
                <div class="btn">下一题</div>
              </div>
            </div>
            <div class="right-box">
              <div class="right-box__header">答题卡</div>
              <div class="right-box__body">
                <div class="card">
                  <div class="card__note">
                    <div class="item">
                      <div class="box green"></div>
                      正确
                    </div>
                    <div class="item">
                      <div class="box red"></div>
                      错误
                    </div>
                    <div class="item">
                      <div class="box blue"></div>
                      已做未评改
                    </div>
                    <div class="item">
                      <div class="box white"></div>
                      未做
                    </div>
                  </div>
                  <div class="card__content">
                    <ul class="list">
                      <li
                        class="item white"
                        :class="{
                          white: index % 2 == 0,
                          red: index % 3 == 0,
                          green: index % 5 == 0,
                          blue: index % 7 == 0,
                        }"
                        v-for="(item, index) in 40"
                        :key="index"
                        @click="changeQuestion(index)"
                      >
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "BankExplain",
  components: {},
  data() {
    return {
      questionIndex: 0,
      checked: false,
      activeName: "1",
    };
  },
  mounted() {
    console.log(this.$route);
  },
  methods: {
    changeQuestion(index) {
      this.questionIndex = index;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-explain {
  .section {
    overflow: hidden;
    &__header {
      height: 20px;
      margin-top: 20px;
    }

    &__body {
      .explain-record {
        &__header {
        }

        &__body {
          .left-box {
            float: left;
            width: 810px;
            border-right: 1px solid #eee;

            &__header {
              height: 40px;
              padding-left: 12px;
              border-bottom: 1px solid #eeeeee;
              display: flex;
              align-items: center;

              .progress {
                width: 200px;
              }

              .text {
                margin-left: 15px;
                font-size: 16px;
                span {
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #3f8dfd;
                  line-height: 24px;
                }
              }
            }

            &__body {
              height: 450px;
              border-bottom: 1px solid #eee;

              .question {
                padding: 12px 0 0 12px;

                &__title {
                  padding-left: 12px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #333333;
                  line-height: 24px;
                }

                &__desc {
                  padding-left: 12px;
                  margin-top: 20px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #666666;
                  line-height: 24px;
                }

                &__content {
                  height: 340px;
                  overflow-y: scroll;

                  &::-webkit-scrollbar {
                    width: 6px;
                  }
                  &::-webkit-scrollbar-track {
                    background-color: #fff;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                  }
                  &::-webkit-scrollbar-thumb {
                    background-color: #eeeeee;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                  }

                  .checkbox,
                  .radio {
                    margin-right: 12px;
                    padding: 0 12px;
                    display: flex;
                    align-items: center;
                    margin-top: 2px;
                    height: 40px;
                    background: #f5f9ff;
                    border-radius: 8px;
                  }

                  .textarea {
                    margin-right: 12px;
                    height: 100%;
                  }
                }

                &__btns {
                  position: relative;

                  .collect {
                    position: absolute;
                    right: 0;
                    top: 5px;
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #3f8dfd;
                    line-height: 24px;
                  }
                }
              }
            }

            &__footer {
              height: 40px;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .btn {
                width: 140px;
                height: 32px;
                background: #ffffff;
                border: 1px solid #3f8dfd;
                border-radius: 16px;
                line-height: 32px;
                text-align: center;
                color: #3f8dfd;
              }
            }
          }

          .right-box {
            float: right;
            width: 300px;

            &__header {
              height: 40px;
              line-height: 40px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              text-align: center;
              border-bottom: 1px solid #eeeeee;
            }

            &__body {
              height: 490px;
              border-bottom: 1px solid #eee;

              .card {
                &__note {
                  display: flex;
                  height: 40px;
                  align-items: center;
                  border-bottom: 1px solid #eee;

                  .item {
                    display: flex;
                    align-items: center;
                    margin-left: 10px;

                    .box {
                      margin-right: 5px;
                      width: 16px;
                      height: 16px;
                      border-radius: 4px;

                      &.green {
                        background: #37c65b;
                      }

                      &.red {
                        background: #ff3a30;
                      }

                      &.blue {
                        background: #3f8dfd;
                      }

                      &.white {
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                      }
                    }
                  }
                }

                &__content {
                  height: 440px;
                  overflow-y: scroll;

                  &::-webkit-scrollbar {
                    width: 6px;
                  }
                  &::-webkit-scrollbar-track {
                    background-color: #fff;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                  }
                  &::-webkit-scrollbar-thumb {
                    background-color: #eeeeee;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                  }
                  .list {
                    display: flex;
                    flex-wrap: wrap;

                    .item {
                      cursor: pointer;
                      width: 40px;
                      height: 40px;
                      border-radius: 10px;
                      text-align: center;
                      line-height: 40px;
                      margin-left: 16px;
                      margin-top: 16px;

                      &.white {
                        line-height: 38px;
                        color: #333333;
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                      }
                      &.green {
                        color: #fff;
                        background: #37c65b;
                      }

                      &.red {
                        color: #fff;
                        background: #ff3a30;
                      }

                      &.blue {
                        color: #fff;
                        background: #3f8dfd;
                      }

                      &.disabled {
                        line-height: 38px;
                        color: #eeeeee;
                        background: #ffffff;
                        border: 1px solid #eeeeee;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
