<template>
  <div class="question-bank">
    <Header></Header>
    <section class="section">
      <div class="container">
        <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__body">
              <div class="left-box">
                <div class="left-box__header">
                  <el-progress
                    class="progress"
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="70"
                  ></el-progress>
                  <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">
                      {{ questionIndex }}、多选题
                    </div>
                    <div class="question__desc">
                      建造师职业资格注册的有效期一般为（ ）年。
                    </div>
                    <div class="question__content">
                      <div class="question-list">
                        <el-checkbox
                          class="checkbox"
                          v-for="(item, index) in 5"
                          :key="index"
                          v-model="checked"
                        >
                          <div>备选项</div>
                        </el-checkbox>
                      </div>
                      <div class="answer-list">
                        <div class="answer-list__left">正确答案：A</div>
                        <div class="answer-list__left">我的答案：A</div>
                      </div>
                      <div class="explain-list">
                        <div class="explain-list__header">答案解析：</div>
                        <div class="explain-list__body">
                          建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                          执业单位者，应当及时办理变更手续。
                        </div>
                      </div>
                    </div>
                    <div class="question__btns">
                      <div class="submit">确认答案</div>
                      <div class="collect">收藏本题</div>
                    </div>
                  </div>

                  <div class="question" v-if="questionIndex == 1">
                    <div class="question__title">
                      {{ questionIndex }}、单选题
                    </div>
                    <div class="question__desc">
                      建造师职业资格注册的有效期一般为（ ）年。
                    </div>
                    <div class="question__content">
                      <div class="question-list">
                        <el-radio
                          class="radio"
                          v-for="(item, index) in 4"
                          :key="index"
                          v-model="checked"
                        >
                          <div>备选项</div>
                        </el-radio>
                      </div>
                      <div class="answer-list">
                        <div class="answer-list__left">正确答案：A</div>
                        <div class="answer-list__left">我的答案：A</div>
                      </div>
                      <div class="explain-list">
                        <div class="explain-list__header">答案解析：</div>
                        <div class="explain-list__body">
                          建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                          执业单位者，应当及时办理变更手续。
                        </div>
                      </div>
                    </div>
                    <div class="question__btns">
                      <div class="submit">确认答案</div>
                      <div class="collect">收藏本题</div>
                    </div>
                  </div>

                  <div class="question" v-if="questionIndex == 2">
                    <div class="question__title">
                      {{ questionIndex }}、判断题
                    </div>
                    <div class="question__desc">
                      建造师职业资格注册的有效期一般为（ ）年。
                    </div>
                    <div class="question__content">
                      <div class="question-list">
                        <el-radio
                          class="radio"
                          v-for="(item, index) in 2"
                          :key="index"
                          v-model="checked"
                        >
                          <div>备选项</div>
                        </el-radio>
                      </div>
                      <div class="answer-list">
                        <div class="answer-list__left">正确答案：A</div>
                        <div class="answer-list__left">我的答案：A</div>
                      </div>
                      <div class="explain-list">
                        <div class="explain-list__header">答案解析：</div>
                        <div class="explain-list__body">
                          建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                          执业单位者，应当及时办理变更手续。
                        </div>
                      </div>
                    </div>
                    <div class="question__btns">
                      <div class="submit">确认答案</div>
                      <div class="collect">收藏本题</div>
                    </div>
                  </div>

                  <div class="question" v-if="questionIndex == 3">
                    <div class="question__title">
                      {{ questionIndex }}、简答题
                    </div>
                    <div class="question__desc">
                      建造师职业资格注册的有效期一般为（ ）年。
                    </div>
                    <div class="question__content">
                      <div class="question-list textarea">
                        <el-input
                          type="textarea"
                          rows="10"
                          v-model="textarea"
                          resize="none"
                        ></el-input>
                      </div>
                      <div class="explain-list">
                        <div class="explain-list__header">答案解析：</div>
                        <div class="explain-list__body">
                          建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                          执业单位者，应当及时办理变更手续。
                        </div>
                      </div>
                    </div>
                    <div class="question__btns">
                      <div class="submit">确认答案</div>
                      <div class="collect">收藏本题</div>
                    </div>
                  </div>

                  <div class="question" v-if="questionIndex >= 4">
                    <div class="question__title">
                      {{ questionIndex }}、案例题
                    </div>
                    <div class="question__desc">
                      建造师职业资格注册的有效期一般为（ ）年。
                    </div>
                    <div class="question__content">
                      <el-tabs v-model="tabIndex">
                        <el-tab-pane label="问题1" name="1">
                          <div class="question">
                            <div class="question__title">
                              {{ questionIndex }}、单选题
                            </div>
                            <div class="question__desc">
                              建造师职业资格注册的有效期一般为（ ）年。
                            </div>
                            <div class="question__content">
                              <div class="question-list">
                                <el-radio
                                  class="radio"
                                  v-for="(item, index) in 4"
                                  :key="index"
                                  v-model="checked"
                                >
                                  <div>备选项</div>
                                </el-radio>
                              </div>
                              <div class="answer-list">
                                <div class="answer-list__left">正确答案：A</div>
                                <div class="answer-list__left">我的答案：A</div>
                              </div>
                              <div class="explain-list">
                                <div class="explain-list__header">
                                  答案解析：
                                </div>
                                <div class="explain-list__body">
                                  建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                                  执业单位者，应当及时办理变更手续。
                                </div>
                              </div>
                            </div>
                            <div class="question__btns">
                              <div class="submit">确认答案</div>
                            </div>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="问题2" name="2">
                          <div class="question">
                            <div class="question__title">
                              {{ questionIndex }}、多选题
                            </div>
                            <div class="question__desc">
                              建造师职业资格注册的有效期一般为（ ）年。
                            </div>
                            <div class="question__content">
                              <div class="question-list">
                                <el-checkbox
                                  class="checkbox"
                                  v-for="(item, index) in 5"
                                  :key="index"
                                  v-model="checked"
                                >
                                  <div>备选项</div>
                                </el-checkbox>
                              </div>
                              <div class="answer-list">
                                <div class="answer-list__left">正确答案：A</div>
                                <div class="answer-list__left">我的答案：A</div>
                              </div>
                              <div class="explain-list">
                                <div class="explain-list__header">
                                  答案解析：
                                </div>
                                <div class="explain-list__body">
                                  建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                                  执业单位者，应当及时办理变更手续。
                                </div>
                              </div>
                            </div>
                            <div class="question__btns">
                              <div class="submit">确认答案</div>
                            </div>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="问题3" name="3">
                          <div class="question">
                            <div class="question__title">
                              {{ questionIndex }}、判断题
                            </div>
                            <div class="question__desc">
                              建造师职业资格注册的有效期一般为（ ）年。
                            </div>
                            <div class="question__content">
                              <div class="question-list">
                                <el-radio
                                  class="radio"
                                  v-for="(item, index) in 2"
                                  :key="index"
                                  v-model="checked"
                                >
                                  <div>备选项</div>
                                </el-radio>
                              </div>
                              <div class="answer-list">
                                <div class="answer-list__left">正确答案：A</div>
                                <div class="answer-list__left">我的答案：A</div>
                              </div>
                              <div class="explain-list">
                                <div class="explain-list__header">
                                  答案解析：
                                </div>
                                <div class="explain-list__body">
                                  建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                                  执业单位者，应当及时办理变更手续。
                                </div>
                              </div>
                            </div>
                            <div class="question__btns">
                              <div class="submit">确认答案</div>
                            </div>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="问题4" name="4">
                          <div class="question">
                            <div class="question__title">
                              {{ questionIndex }}、简答题
                            </div>
                            <div class="question__desc">
                              建造师职业资格注册的有效期一般为（ ）年。
                            </div>
                            <div class="question__content">
                              <div class="question-list textarea">
                                <el-input
                                  type="textarea"
                                  rows="10"
                                  v-model="textarea"
                                  resize="none"
                                ></el-input>
                              </div>
                              <div class="explain-list">
                                <div class="explain-list__header">
                                  答案解析：
                                </div>
                                <div class="explain-list__body">
                                  建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更
                                  执业单位者，应当及时办理变更手续。
                                </div>
                              </div>
                            </div>
                            <div class="question__btns">
                              <div class="submit">确认答案</div>
                            </div>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                    <div class="question__btns">
                      <div class="submit">确认答案</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>
      </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";
export default {
  name: "BankExplain",
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      tabIndex: "1",
      textarea: "",
      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">
.question-bank {
  .section {
    overflow: hidden;
    &__header {
      height: 20px;
      margin-top: 20px;
    }

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

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

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

              .progress {
                width: 636px;
              }

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

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

              .question {
                padding: 12px 0 0 0;

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

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

                &__content {
                  height: 600px;
                  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;
                  }

                  /deep/ .el-tabs__item {
                    padding: 0 20px !important;
                    height: 40px;
                    line-height: 40px;
                  }

                  .question__content {
                    height: auto;
                    overflow: auto;
                  }

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

                  .answer-list {
                    height: 40px;
                    border-top: 1px solid #eee;
                    border-bottom: 1px solid #eee;
                    margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 24px;

                    &__left {
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #333333;
                      line-height: 24px;
                    }

                    &__right {
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #333333;
                      line-height: 24px;
                    }
                  }

                  .explain-list {
                    padding: 12px 24px;

                    &__header {
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #666666;
                      line-height: 24px;
                    }

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

                &__btns {
                  position: relative;
                  .submit {
                    margin: 0 auto;
                    width: 140px;
                    height: 32px;
                    background: #3f8dfd;
                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                    border-radius: 16px;
                    text-align: center;
                    line-height: 32px;
                    color: #fff;
                    font-size: 16px;
                  }
                  .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: 720px;
              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: 680px;
                  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>
