<template>
  <div class="card_box">
    <div class="head" id="top-view2">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div id="bottom-view2">
      <div class="card_con">
        <div class="flag">
          <ul>
            <li>
              <div class="circle active1"></div>
              <div class="txt">已答</div>
            </li>
            <li>
              <div class="circle active2"></div>
              <div class="txt">标记</div>
            </li>
            <li>
              <div class="circle active3"></div>
              <div class="txt">未答</div>
            </li>
          </ul>
        </div>
        <div class="question">
          <template v-if="answerData['1'].data.length !=0">
            <div class="title" >{{ answerData['1'].title }}</div>
            <ul>
              <template v-for="(item, index) in answerData['1'].data">
                <li @click="go(item.id, item.num)" :data-id="item.id" :key="index" :class="item.sign == true ? 'active2' : item.answer == undefined ? 'active3' : item.answer.length == 0 ? 'active3' : 'active1'">{{ item.num }}</li>
              </template>
            </ul>
          </template>
          <template v-if="answerData['2'].data.length !=0">
            <div class="title" >{{ answerData['2'].title }}</div>
            <ul>
              <template v-for="(item, index) in answerData['2'].data">
                <li @click="go(item.id, item.num)" :data-id="item.id" :key="index" :class="item.sign == true ? 'active2' : item.answer == undefined ? 'active3' : item.answer.length == 0 ? 'active3' : 'active1'">{{ item.num }}</li>
              </template>
            </ul>
          </template>
          <template v-if="answerData['6'].data.length !=0">
            <div class="title" >{{ answerData['6'].title }}</div>
            <ul>
              <template v-for="(item, index) in answerData['6'].data">
                <li @click="go(item.id, item.num)" :data-id="item.id" :key="index" :class="item.sign == true ? 'active2' : item.answer == undefined ? 'active3' : item.answer.length == 0 ? 'active3' : 'active1'">{{ item.num }}</li>
              </template>
            </ul>
          </template>
          <template v-if="answerData['5'].data.length !=0">
            <div class="title" >{{ answerData['5'].title }}</div>
            <ul>
              <template v-for="(item, index) in answerData['5'].data">
                <li @click="go(item.id, item.num)" :data-id="item.id" :key="index" :class="item.sign == true ? 'active2' : item.answer == undefined ? 'active3' : item.answer.length == 0 ? 'active3' : 'active1'">{{ item.num }}</li>
              </template>
            </ul>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    questionsData: {
      type: Object,
      default () {
        return {}
      }
    },
    requestData: {
      type: Object,
      default () {
        return {}
      }
    },
    clickStatus: {
      type: Number,
      default () {
        return {}
      }
    }
  },
  mounted() {
  },
  data() {
    return {
      answerData: {
        1: {
          title: '单选题：',
          data: []
        },
        2: {
          title: '多选题：',
          data: []
        },
        5: {
          title: '案例题：',
          data: []
        },
        6: {
          title: '判断题：',
          data: []
        }
      },
      cardData: {},
      countIndex: 1,
      questionType: {
        1: '单选题：',
        2: '多选题：',
        5: '案例题：',
        6: '判断题：'
      }
    }
  },
  methods: {
    go(id, num) {
      setTimeout(() => {
        this.$emit('showCard')
      }, 200)
      this.$emit('cardChange', { id: id, num: parseInt(num / 10) })
    },
    scrollDom() {
      const topViewH = document.getElementById('top-view2').offsetHeight
      const clientHeight = document.documentElement.clientHeight
      const bottomView = document.getElementById('bottom-view2')
      bottomView.style.height = (clientHeight - topViewH) + 'px'
    },
    clone(origin) {
      const originProto = Object.getPrototypeOf(origin)
      return Object.assign(Object.create(originProto), origin)
    }
  },
  computed: {
    dataList() {
      // const clone = this.clone(this.questionsData)
      // const data = this.duplicates(clone.questions)
      let num = 1
      return this.questionsData.questions.map(item => {
        item.question_list.map((subitem, index) => {
          subitem.num = num + index
          return subitem
        })
        num += item.question_list.length
        return item
      })
    },
    changeData() {
      return this.clickStatus
    }
  },
  watch: {
    changeData() {
      this.answerData = {
        1: {
          title: '单选题：',
          data: []
        },
        2: {
          title: '多选题：',
          data: []
        },
        5: {
          title: '案例题：',
          data: []
        },
        6: {
          title: '判断题：',
          data: []
        }
      }
      let num = 1
      this.clone(this.questionsData).questions.map(item => {
        item.question_list.map((c, index) => {
          c.num = num + index
          if (Object.prototype.hasOwnProperty.call(this.requestData, item.id)) {
            if (Object.prototype.hasOwnProperty.call(this.requestData[item.id], c.id)) {
              c = Object.assign(this.requestData[item.id][c.id], c)
              // console.log(c)
            }
          }
          this.answerData[item.type].data.push(c)
        })
        num += item.question_list.length
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.card_box{
  width: 100%;
  height: 100%;
  background: #fff;
  .card_con{
    padding: 0 .4rem;
    overflow-y: scroll;
    .flag{
      border-bottom: 0.01rem solid #EEEEEE;
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        li{
          margin: 0 .4rem 0.1rem .4rem;
          text-align: center;
          .circle{
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            font-size: .26rem;
            text-align: center;
            line-height: .6rem;
            color: #fff;
          }
          .active1{
            background: #67C23A;
          }
          .active2{
            background:rgba(255,128,0,1);
          }
          .active3{
            background:rgba(204,204,204,1);
          }
          .txt{
            color: #222222;
            font-size: .26rem;
            margin-top: 0.1rem;
          }
        }
      }
    }
    .question{
      .title{
        font-size: .3rem;
        color: #333333;
        margin-top: .1rem;
        margin-bottom: .4rem;
      }
      ul{
        list-style: none;
        margin-top: .3rem;
        padding: 0 0.6rem;
        border-bottom: 0.01rem solid #EEEEEE;
        display: flex;
        flex-wrap: wrap;
        li{
          width: .6rem;
          height: .6rem;
          border-radius: 50%;
          font-size: .26rem;
          text-align: center;
          line-height: .6rem;
          color: #fff;
          margin-right: .6rem;
          margin-bottom: .4rem;
        }
        :nth-child(5n+5){
          margin: 0;
        }
        .active1{
            background: #67C23A;
          }
        .active2{
          background:rgba(255,128,0,1);
        }
        .active3{
          background:rgba(204,204,204,1);
        }
      }
    }
  }
}
.head{
  color: #222;
  display: flex;
  padding: .4rem 0;
  align-items: center;
  i{
    font-size: .35rem;
    margin-left: .28rem;
  }
  .title{
    margin-left: .03rem;
    font-size: .3rem;
  }
}
#bottom-view2{
  overflow: scroll;
}
</style>
