<template>
  <div>
    <div class="answer-box">
      <div class="head" id="head-h">
        <div class="title">全国统一高考试卷A</div>
        <div class="right">
          <div class="count">已答1/100</div>
          <div class="time">
            <div class="icon"></div>
            <div class="mun">60:00</div>
          </div>
        </div>
      </div>
      <div class="exam-main" :style="{height: this.contentHeight + 'px'}">
        <div class="left">
          <question :contentHeight="contentHeight"></question>
        </div>
        <div class="right">
          <answer-card></answer-card>
        </div>
      </div>
      <div class="foot" id="foot-h">
        <div class="exam-btn">
          <div>上一题</div>
          <div class="active">下一题</div>
        </div>
        <div class="rigth-btn">
          <div class="sign">
            <div class="icon"></div>
            <div class="txt">标记</div>
          </div>
          <div class="end-exam-btn">
            <div class="btn">结束考试</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <dialog-component></dialog-component> -->
  </div>
</template>
<script>
import answerCard from '../../components/exam/answerCard.vue'
import question from '../../components/exam/question.vue'
import dialogComponent from '../../components/exam/dialogComponent.vue'
export default {
  components: {
    answerCard,
    question,
    dialogComponent
  },
  data() {
    return {
      contentHeight: 0
    }
  },
  mounted() {
    this.contentHeight = parseInt(document.body.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight))
  },
  methods: {
    getDom(id) {
      return document.getElementById(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.answer-box{
  width: 100%;
  height: 100%;
  // background: #f9f9f9;
  .head{
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    display: flex;
    .title{
      padding-left: 30px;
      font-size: 24px;
      font-weight: bold;
      color: #222222;
      line-height: 80px;
    }
    .right{
      width: 260px;
      margin-left: auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .count{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
      }
      .time{
        display: flex;
        .icon{
          width: 23px;
          height: 23px;
          background: url(../../assets/images/tick.png);
          background-size:100% 100%;
        }
        .mun{
          font-size: 18px;
          font-weight: bold;
          color: #222222;
          line-height: 25px;
          margin-left: 10px;
        }
      }
    }
  }
  .exam-main{
    display: flex;
    .left{
      flex: 1;
      padding: 40px 20px 0 53px;
      overflow-y: scroll;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .right{
      position: relative;
      width: 220px;
      background: #fff;
      padding: 0 20px;
      overflow-y: scroll;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .foot{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    .exam-btn{
      display: flex;
      padding-left: 40px;
      div{
        width: 100px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
        font-weight: bold;
        color: #999999;
        line-height: 40px;
        text-align: center;
        margin-right: 20px;
        &.active{
          background: #C01540;
          border-radius: 4px;
          color: #fff;
        }
      }
    }
    .rigth-btn{
      display: flex;
      margin-left: auto;
      .end-exam-btn{
        width: 260px;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn{
          width: 200px;
          height: 40px;
          background: #EEEEEE;
          border-radius: 4px;
          font-size: 14px;
          font-weight: bold;
          color: #CCCCCC;
          line-height: 40px;
          text-align: center;
        }
      }
      .sign{
        margin-right: 20px;
        .icon{
          width: 24px;
          height: 24px;
          background: url(../../assets/images/sign.png);
          background-size:100% 100%;
        }
        .txt{
          font-size: 14px;
          color: #CCCCCC;
          line-height: 20px;
          margin-top: 2px;
        }
      }
    }
  }
}
</style>
