<template>
  <div>
    <div class="answer-box">
      <div class="head" id="head-h">
        <div class="title">全国统一高考试卷A</div>
        <div class="right">
          <div class="count">已答{{ questionParams.answeredCount }}/{{ questionParams.list.length + 1 }}</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"
            :questionParams="questionParams"
          ></question>
        </div>
        <div class="right">
          <answer-card></answer-card>
        </div>
      </div>
      <div class="foot" id="foot-h">
        <div class="exam-btn">
          <div
            @click="changeIndex('prev')"
            :class="this.questionParams.questionIndex !== 0 ? 'active' : ''"
            >上一题</div>
          <div
            :class="questionParams.questionIndex !== questionParams.list.length - 1 ? 'active' : ''"
            @click="changeIndex('next')"
            >下一题</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,
      // 题的数据所需的参数
      questionParams: {
        answeredCount: 0,
        // 用户选择的选项 --- 提交后台的数据
        answerRecord: {},
        // 当前题的下标
        questionIndex: 0,
        // 所有题
        list: [
          {
            id: 1,
            type: 1,
            orderNum: '1',
            title: '将以下5个句子重新排列组合：',
            des: '①宋代《新唐书音训》云：“京口在润州城东北甘露寺侧。<br/>②这也就是李白《丁督护歌》中所描绘的“万人凿磐石，无由达江浒”的施工场面。<br/>③而要开辟一条通京口的新漕路却是十分艰辛的。<br/>④甘露寺正位于北固山，所以移徙这段漕路，势必要紧贴着北固山下与山根的顽石打交手战，这样的工程自非一日之功。<br/>⑤瓜洲浦成为便利的津渡是由于它正对南岸江边的京口，而京口的漕路是在开元二十五年齐浣迁润州后才兴修的，换句话说，旧漕路原来并不通京口。',
            opt: [
              {
                id: 1,
                text: 'A、⑤④①③②'
              },
              {
                id: 2,
                text: 'B、④①②③⑤'
              },
              {
                id: 3,
                text: 'C、⑤③①④②'
              },
              {
                id: 4,
                text: 'D、④①③②⑤'
              }
            ]
          },
          {
            id: 2,
            type: 2,
            orderNum: '2',
            title: '下列关于国际税法内容的陈述，正确的有（　）。',
            des: '甘露寺正位于北固山，所以移徒这段漕路。',
            opt: [
              {
                id: 1,
                text: 'A、国际避税的基本方式就是跨国纳税人通过错用或滥用有关国家税法、国际税收协定，利用它们的差别、漏洞、特例和缺陷，规避纳税主体和纳税客体的纳税义务，不纳税或少纳税。'
              },
              {
                id: 2,
                text: 'B、税收情报交换是国际反避税的合作的主要内容'
              },
              {
                id: 3,
                text: 'C、加强国际税收合作，防止国际避税和逃税，这是国际税收协定的基本内容'
              },
              {
                id: 4,
                text: 'D、税收协定不能限制有关国家对跨国投资者提供更为优惠的税收待遇'
              },
              {
                id: 5,
                text: 'E、税收协定可以干预协约国对税法的修订和调整'
              }
            ]
          },
          {
            id: 3,
            type: 3,
            orderNum: '3',
            title: '八月十五是中秋节？',
            des: '甘露寺正位于北固山，所以移徒这段漕路。',
            opt: [
              {
                id: 1,
                text: 'A、正确'
              },
              {
                id: 2,
                text: 'B、错误'
              }
            ]
          },
          {
            id: 4,
            type: 4,
            orderNum: '4',
            title: '将以下5个句子重新排列组合',
            des: '甘露寺正位于北固山，所以移徒这段漕路。',
            opt: [
              {
                id: 1,
                text: '选项A'
              },
              {
                id: 2,
                text: '选项B'
              },
              {
                id: 3,
                text: '选项C'
              },
              {
                id: 4,
                text: '选项D'
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.contentHeight = parseInt(document.body.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight))
  },
  methods: {
    getDom(id) {
      return document.getElementById(id)
    },
    changeIndex(type) {
      if (type === 'prev') {
        this.questionParams.questionIndex > 0 && (this.questionParams.questionIndex--)
      } else {
        this.questionParams.questionIndex !== this.questionParams.list.length - 1 && (this.questionParams.questionIndex++)
        console.log(this.questionParams.questionIndex)
      }
    }
  }
}
</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;
      cursor: pointer;
      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>
