<template>
  <div class="question-inner">
    <div class="type">
      {{ questionInfo.questionType }}
    </div>
    <p class="question">
      {{ questionInfo.question }}
    </p>
    <template v-if="questionInfo.questionType !== '连线题'">
      <button
        v-for="(option, index) in questionInfo.answerOptions"
        :key="index"
        :disabled="isSubmitted"
        class="option"
        :class="{
          selected: selectedIdxList[index],
          rightOption: questionInfo.rightOptionIdx.includes(index),
          wrongOption: !questionInfo.rightOptionIdx.includes(index),
          submitted: isSubmitted,
          notSubmitted: !isSubmitted,
        }"
        :style="{
          marginTop: questionInfo.answerOptions.length > 4 ? '0': '',
        }"
        @click="onClickOption(index)"
      >
        <div class="option-text">
          {{ option }}
        </div>
        <div
          v-show="isSubmitted && selectedIdxList[index] && questionInfo.rightOptionIdx.includes(index)"
          class="result-tip"
        >
          <img
            class="correct-icon"
            src="@/assets/images/correct.png"
            alt=""
            draggable="false"
          >
          <span
            v-show="questionInfo.rightOptionIdx.length === 1"
            class="right-tip-text"
          >恭喜你，回答正确</span>
        </div>
        <div
          v-show="isSubmitted && selectedIdxList[index] && !questionInfo.rightOptionIdx.includes(index)"
          class="result-tip"
        >
          <img
            class="wrong-icon"
            src="@/assets/images/wrong.png"
            alt=""
            draggable="false"
          >
          <span
            v-show="questionInfo.rightOptionIdx.length === 1"
            class="wrong-tip-text"
          >很遗憾，回答错误</span>
        </div>
      </button>
    </template>
    <div
      v-if="questionInfo.questionType === '连线题'"
      class="line-quiz-wrapper"
    >
      <div class="left">
        <button
          v-for="(item, index) in questionInfo.answerOptions.left"
          :key="index"
          :class="{
            active: activeButtonIdxLeft === index,
          }"
          @click="onClickButtonLeft(index)"
        >
          {{ item }}
        </button>
      </div>

      <div class="svg-wrapper">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
        >
          <g
            v-for="(itemG, indexLeft) in questionInfo.answerOptions.left"
            :key="indexLeft"
          >
            <line
              v-for="(itemLine, indexRight) in questionInfo.answerOptions.right"
              :key="indexRight"
              :ref="`${indexLeft}-${indexRight}`"
              x1="0"
              :y1="`calc((100% + ${isMobile ? '32' : '64'}px) / ${questionInfo.answerOptions.left.length + 1} * ${indexLeft + 1} - ${isMobile ? '32' : '64'}px / 2)`"
              x2="100%"
              :y2="`calc((100% + ${isMobile ? '32' : '64'}px) / ${questionInfo.answerOptions.right.length + 1} * ${indexRight + 1} - ${isMobile ? '32' : '64'}px / 2)`"
              stroke-width="2px"
              :stroke="lineColor(indexLeft, indexRight)"
            />
          </g>
        </svg>
      </div>

      <div class="right">
        <button
          v-for="(item, index) in questionInfo.answerOptions.right"
          :key="index"
          :class="{
            active: activeButtonIdxRight === index,
          }"
          @click="onClickButtonRight(index)"
        >
          {{ item }}
        </button>
      </div>
      <div
        v-if="isSubmitted && isCorrect"
        class="result-tip correct"
      >
        回答正确
        <img
          class=""
          src="@/assets/images/correct-tip.png"
          alt=""
          draggable="false"
        >
      </div>
      <div
        v-if="isSubmitted && !isCorrect"
        class="result-tip wrong"
      >
        回答错误
        <img
          class=""
          src="@/assets/images/wrong-tip.png"
          alt=""
          draggable="false"
        >
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: [
  ],
  data() {
    return {
      selectedIdxList: [],
      activeButtonIdxLeft: null,
      activeButtonIdxRight: null,
      // svgNode: null,
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
      'isSubmitted',
      'answerRecord',
    ]),
    canSubmit() {
      if (this.questionInfo.questionType === '单选题' || this.questionInfo.questionType === '判断题') {
        return this.selectedIdxList.filter((item) => {
          return !!item
        }).length > 0
      } else if (this.questionInfo.questionType === '多选题') {
        return !!this.selectedIdxList.find((item) => {
          return !!item
        })
      } else if (this.questionInfo.questionType === '连线题') {
        if (this.selectedIdxList && this.selectedIdxList.flat().filter((item) => {
          return !!item
        }).length >= 1) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    isCorrect() {
      if (this.questionInfo.questionType !== '连线题') {
        if (this.questionInfo.rightOptionIdx.length !== this.selectedIdxList.filter((item) => {
          return !!item
        }).length) {
          return false
        }
        for (const iterator of this.questionInfo.rightOptionIdx) {
          if (!this.selectedIdxList[iterator]) {
            return false
          }
        }
        return true
      } else {
        console.log(JSON.stringify(this.selectedIdxList))
        if (JSON.stringify(this.selectedIdxList) === JSON.stringify(this.questionInfo.rightOptionIdx)) {
          return true
        } else {
          return false
        }
      }
    },
  },
  watch: {
    activeButtonIdxLeft: {
      handler(vNew) {
        if (vNew !== null && this.activeButtonIdxRight !== null) {
          this.$set(this.selectedIdxList[vNew], this.activeButtonIdxRight, true)
          // this.selectedIdxList[vNew][this.activeButtonIdxRight] = true
          this.activeButtonIdxLeft = null
          this.activeButtonIdxRight = null
        }
      }
    },
    activeButtonIdxRight: {
      handler(vNew) {
        if (vNew !== null && this.activeButtonIdxLeft !== null) {
          this.$set(this.selectedIdxList[this.activeButtonIdxLeft], vNew, true)
          // this.selectedIdxList[this.activeButtonIdxLeft][vNew] = true
          this.activeButtonIdxLeft = null
          this.activeButtonIdxRight = null
        }
      }
    },
    canSubmit: {
      handler(vNew) {
        this.$emit('canSubmitChange', vNew)
      }
    }
  },
  mounted() {
    this.resetSelectedIdxList()
  },
  methods: {
    ...globalMapMutations([
      'setIsSubmitted',
    ]),
    resetSelectedIdxList() {
      if (this.answerRecord) {
      // this.selectedIdxList = []
        this.selectedIdxList = JSON.parse(this.answerRecord.options)
      } else {
        if (this.questionInfo.questionType === '连线题') {
          this.selectedIdxList = JSON.parse(JSON.stringify(this.questionInfo.emptyAnswer))
        } else {
          this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
        }
      }
    },
    onClickOption(idx) {
      if (this.questionInfo.questionType === '单选题' || this.questionInfo.questionType === '判断题') {
        this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
        this.selectedIdxList.forEach(element => {
          return !!element
        })
        this.$set(this.selectedIdxList, idx, true)
        this.$emit('submit')
      } else if (this.questionInfo.questionType === '多选题') {
        this.$set(this.selectedIdxList, idx, !this.selectedIdxList[idx])
      }
    },
    onClickButtonLeft(index) {
      this.activeButtonIdxLeft = index
    },
    onClickButtonRight(index) {
      this.activeButtonIdxRight = index
    },
    lineColor(indexLeft, indexRight) {
      if (!this.isSubmitted) {
        return this.selectedIdxList && this.selectedIdxList[indexLeft] && this.selectedIdxList[indexLeft][indexRight] ? 'rgba(164, 87, 63, 1)' : 'transparent'
      } else {
        if ((this.selectedIdxList && this.selectedIdxList[indexLeft] && this.selectedIdxList[indexLeft][indexRight]) && (this.questionInfo.rightOptionIdx[indexLeft][indexRight])) {
          console.log()
          return '#81bf50'
        } else if ((this.selectedIdxList && this.selectedIdxList[indexLeft] && this.selectedIdxList[indexLeft][indexRight]) && !(this.questionInfo.rightOptionIdx[indexLeft][indexRight])) {
          return 'transparent'
        } else if (!(this.selectedIdxList && this.selectedIdxList[indexLeft] && this.selectedIdxList[indexLeft][indexRight]) && (this.questionInfo.rightOptionIdx[indexLeft][indexRight])) {
          return '#9a2d0a'
        } else {
          return 'transparent'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.question-inner {
  flex: 1 0 1px;
  width: calc(100% - 150px * 2);
  margin-top: 10px;
  counter-reset: count;
  > .type {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 24px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #693D2F;
  }
  > p.question {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
  }
  > button.option {
    margin-top: 6px;
    height: 45px;
    padding-left: 10px;
    padding-right: 50px;
    padding-top: 5px;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
    counter-increment: count;
    &.notSubmitted:hover {
      color: #5f9533;
    }
    &.notSubmitted.selected {
      background-image: url(@/assets/images/option-correct-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      color: #5f9533;
    }
    &.submitted {
      pointer-events: none;
    }
    &.submitted.rightOption {
      background-image: url(@/assets/images/option-correct-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      color: #5f9533;
    }
    &.submitted.selected.wrongOption {
      background-image: url(@/assets/images/option-wrong-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    > .option-text {
      &::before {
        content: counter(count, upper-alpha);
        margin-right: 0.5em;
      }
    }
    > .result-tip {
      display: inline-flex;
      align-items: center;
      > img.correct-icon {
        width: 16px;
        height: 12px;
        margin-right: 9px;
      }
      > img.wrong-icon {
        width: 13px;
        height: 13px;
        margin-right: 9px;
      }
      > .right-tip-text {
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #3E7016;
      }
      > .wrong-tip-text {
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #693D2F;
      }
    }
  }
  > .line-quiz-wrapper {
    margin-top: 20px;
    position: relative;
    width: 100%;
    height: 450px;
    > .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 175px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: stretch;
      > button {
        width: 175px;
        height: 64px;
        border-radius: 32px;
        border: 2px solid #8F4831;
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #8F4831;
        &:hover, &.active {
          background: #FFE5BA;
        }
      }
    }
    > .svg-wrapper {
      position: absolute;
      top: 0;
      left: 175px;
      width: calc(100% - 175px * 2);
      height: 100%;
      > svg {
        width: 100%;
        height: 100%;
        > g {
          width: 100%;
          height: 100%;
          > line {

          }
        }
      }
    }
    > .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 175px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: stretch;
      > button {
        width: 175px;
        height: 64px;
        border-radius: 32px;
        border: 2px solid #8F4831;
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #8F4831;
        &:hover, &.active {
          background: #FFE5BA;
        }
      }
    }
    > .result-tip {
      position: absolute;
      top: 100%;
      left: 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      letter-spacing: 1px;
      &.correct {
        color: #3E7016;
      }
      &.wrong {
        color: #9A2D0A;
      }
      > img {
        width: 13px;
        height: 13px;
        margin-left: 13px;
      }
    }
  }
}

.mobile {
  .question-inner {
    flex: 0 0 auto;
    width: calc(100% - 30px * 2);
    margin-top: 0;
    > .type {
      padding-left: 6px;
      padding-right: 6px;
      font-size: 16px;
    }
    > p.question {
      margin-top: 10px;
      padding-left: 6px;
      padding-right: 6px;
      font-size: 14px;
      line-height: 1.5em;
      max-height: 6em;
      overflow: auto;
    }
    > button.option {
      margin-top: 5px;
      height: 32px;
      padding-left: 6px;
      padding-right: 35px;
      padding-top: 5px;
      font-size: 14px;
      &.notSubmitted:hover {
        color: #693D2F;
      }
      &.notSubmitted.selected {
        background-image: url(@/assets/images/option-correct-bg-mobile.png);
      }
      &.submitted {
      }
      &.submitted.rightOption {
        background-image: url(@/assets/images/option-correct-bg-mobile.png);
      }
      &.submitted.selected.wrongOption {
        background-image: url(@/assets/images/option-wrong-bg-mobile.png);
      }
      > .option-text {
        &::before {
        }
      }
      > .result-tip {
        > img.correct-icon {
          width: 11px;
          height: 8px;
          margin-right: 5px;
        }
        > img.wrong-icon {
          width: 11px;
          height: 11px;
          margin-right: 5px;
        }
        > .right-tip-text {
          font-size: 14px;
        }
        > .wrong-tip-text {
          font-size: 14px;
        }
      }
    }
    > .line-quiz-wrapper {
      margin-top: 10px;
      height: 170px;
      > .left {
        width: 100px;
        > button {
          width: 100px;
          height: 32px;
          border-radius: 16px;
          font-size: 16px;
          &:hover {
            background: initial;
          }
          &.active {
            background: #FFE5BA;
          }
        }
      }
      > .svg-wrapper {
        left: 100px;
        width: calc(100% - 100px * 2);
        > svg {
          width: 100%;
          height: 100%;
          > g {
            width: 100%;
            height: 100%;
            > line {

            }
          }
        }
      }
      > .right {
        width: 100px;
        > button {
          width: 100px;
          height: 32px;
          border-radius: 16px;
          font-size: 16px;
          &:hover {
            background: initial;
          }
          &.active {
            background: #FFE5BA;
          }
        }
      }
      > .result-tip {
        top: 94%;
        &.correct {
        }
        &.wrong {
        }
        > img {
          width: 12px;
          height: 12px;
          margin-left: 10px;
          margin-bottom: 1px;
        }
      }
    }
  }
}
</style>