<!-- 问题切换版 -->
<template>
  <div class="question">
    <div class="head">
      <van-progress :percentage="questions.length === 0 ? 0 : ((index+1)/questions.length)*100"
                    :pivot-text="(index+1).toString()"
                    color="#72b937"
                    stroke-width="7px"
                    class="head-progress">
      </van-progress>
      <div class="head-progress-num">{{ questions.length }}</div>
    </div>

    <transition mode="out-in">
      <div class="card"
           v-show="show">
        <!-- 题号 -->
        <div class="card__head">
          <div class="card__head-icon">Q{{ index+1 }}</div>
          <div>
            <div class="card__head-title">{{ curQuestion.question }}</div>
            <div v-if="curQuestion.type === 'input'">
              <input v-model="curQuestion.answer"
                     class="line-input"
                     max-length="18">
            </div>
          </div>
        </div>

        <van-radio-group v-model="curQuestion.answer"
                         checked-color="#72b937"
                         v-if="!curQuestion.type">
          <van-radio v-if="curQuestion.a"
                     name="A">A.{{ curQuestion.a }}</van-radio>
          <van-radio v-if="curQuestion.b"
                     name="B">B.{{ curQuestion.b }}</van-radio>
          <van-radio v-if="curQuestion.c"
                     name="C">C.{{ curQuestion.c }}</van-radio>
          <van-radio v-if="curQuestion.d"
                     name="D">D.{{ curQuestion.d }}</van-radio>
          <van-radio v-if="curQuestion.e"
                     name="E">E.{{ curQuestion.e }}</van-radio>
          <van-radio v-if="curQuestion.f"
                     name="F">F.{{ curQuestion.f }}</van-radio>
          <van-radio v-if="curQuestion.g"
                     name="G">G.{{ curQuestion.g }}</van-radio>
        </van-radio-group>

        <div v-else-if="curQuestion.type === 'text'">
          <textarea class="text"
                    v-model="curQuestion.answer"
                    rows="6"
                    maxlength="300"></textarea>
        </div>
      </div>
    </transition>

    <div class="footer">
      <van-button type="warning"
                  v-if="index!== 0"
                  class="footer-btn-prev"
                  @click="prev">上一题</van-button>
      <van-button type="primary"
                  @click="next"
                  class="footer-btn-next">{{ nextBtn }}</van-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'question-list-change',
  props: {
    params: Object
  },
  data: function () {
    return {
      show: true,
      index: 0,
      curQuestion: {},
      questions: [],
    }
  },
  methods: {
    submit: function () {
      for (var i = 0; i < this.questions.length; i++) {
        if (!this.questions[i].answer && this.questions[i].isRequired) {
          vant.Toast.fail('请勾选或输入第' + (i + 1) + '的答案')
          return
        }
      }
      _that = this
      this.show = false
      setTimeout(function () {
        _that.$emit('change-component', 'end')
        _that.api_submit()
      }, 200)
    },
    api_submit: function () {
      vant.Toast.loading({ message: '提交中...', forbidClick: true, duration: 20000 })
      var o = []
      console.log("${openId}")
      this.questions.forEach(function (item) {
        o.push({ openId: "${openId}", questionId: item.id, answer: item.answer })
      })

      that = this
      $.post('http://ynxbdkj.natapp1.cc/question/answer?command=add_answers', { answers: JSON.stringify(o) },
        function (resp) {
          console.log(resp)
          if (resp.code === 200) {
            var ids = JSON.parse(localStorage.getItem("ynxbd_questionnaire"))
            if (!ids) ids = []

            ids.push({ id: that.params.id })

            localStorage.setItem('ynxbd_questionnaire', JSON.stringify(ids))
            vant.Toast.success('提交成功')
          } else {
            vant.Toast.fail(resp.message)
          }
        }
      )
    },
    api_getQuestion: function () {
      _that = this
      vant.Toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
      $.get("http://ynxbdkj.natapp1.cc/question/question?command=query_by_qid&id=" + _that.params.id,
        function (resp) {
          console.log(resp)
          if (resp.code === 200) {
            resp.data.forEach(function (item) {
              item.answer = ''
              item.answers = []
              if (item.a) item.answers.push({ text: 'A. ' + item.a, value: 'A' })

              if (item.b) item.answers.push({ text: 'B. ' + item.b, value: 'B' })

              if (item.c) item.answers.push({ text: 'C. ' + item.c, value: 'C' })

              if (item.d) item.answers.push({ text: 'D. ' + item.d, value: 'D' })

              if (item.e) item.answers.push({ text: 'E. ' + item.e, value: 'E' })

              if (item.f) item.answers.push({ text: 'F. ' + item.f, value: 'F' })

              if (item.g) item.answers.push({ text: 'G. ' + item.g, value: 'G' })
            })
            _that.questions = resp.data
            vant.Toast.clear()
          } else {
            vant.Toast.fail(resp.message)
          }
        }
      )
    }
  },
  created: function () {
    this.api_getQuestion()
  }
}
</script>
<style scoped>
.question-list-change {
  width: 100%;
}

body {
  background-color: #6fb734;
}

#app {
  align-items: center;
  width: 100%;
  max-width: 1000px;
}

.card {
  width: 90%;
  height: 300px;
}

.van-radio__icon {
  font-size: 18px;
}

.van-radio {
  margin-top: 22px;
  margin-left: 10px;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  border: none;
}

.head-progress {
  margin: 20px 0;
  width: 88%;
}

.head-progress-num {
  width: 10%;
  text-align: center;
  color: #8ac55a;
  font-size: 16px;
}

.card__head {
  display: flex;
}

.card__head-title {
  margin-top: 8px;
}

.card__head-icon {
  width: 36px;
  height: 36px;
  padding: 1px;
  line-height: 36px;
  font-weight: bold;
  border-radius: 50%;
  background-color: #72b937;
  font-size: 15px;
  text-align: center;
  color: #ffffff;
  margin-right: 10px;
  flex-shrink: 0;
}

.footer {
  position: absolute;
  bottom: 60px;
  width: 90vw;
  display: flex;
  justify-content: center;
}

.footer-btn-prev {
  padding: 0 26px;
}

.footer-btn-save,
.footer-btn-next {
  margin-left: 20px;
  padding: 0 26px;
  background-color: #72b937;
}

.end__box {
  width: 100%;
  height: 100%;
  background-color: #72b937;
}

.end-title__box {
  text-align: center;
  background-color: #ffffff;
  height: 80vw;
  width: 100vw;
  border-radius: 0 0 50% 50%;
  position: absolute;
  top: -40vw;
}

.end-title {
  font-size: 24px;
  color: #41583c;
  font-weight: bold;
  margin-top: 50vw;
}

.end-img {
  width: 80%;
  max-width: 500px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.text {
  width: 100%;
  margin-top: 22px;
  border: 1px solid #72b937;
  box-sizing: border-box;
  font-size: 14px;
  opacity: 0.88;
}

.line-input__box {
  position: relative;
}

.line-input-label {
  position: absolute;
  left: 46px;
  top: 18px;
  z-index: 2;
}

.line-input {
  outline: none;
  border: none;
  border-bottom: 1px solid #6fb734;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.back-img {
  position: absolute;
  left: 0;
  bottom: 180px;
  height: 70%;
  opacity: 0.99;
}

.btn__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin-bottom: 10px;
}

.questionnaire {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.questionnaire-btn__box {
  display: flex;
  flex-direction: column;
  height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px 20px 20px;
  border-bottom: 1px dashed #ffffff;
}

.question-btn {
  font-size: 16px;
  color: #606266;
  background-color: #fff;
  border: 1px solid #ebedf0;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  text-align: center;
  border-radius: 400px;
  cursor: pointer;
  margin-top: 20px;
  padding: 6px 12px;
  box-shadow: 8px 8px 12px 0 rgba(0, 0, 0, 0.3);
  transition: all linear 0.6s;
  flex-shrink: 0;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.question-btn:active {
  background-color: #e5e5e5;
}

.title {
  position: absolute;
  top: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #606266;
  text-align: center;
  width: 100%;
  left: 0;
}

/* 全部列出 */
.question-all__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.question-all__card {
  flex-shrink: 1;
  margin-bottom: 40px;
  box-sizing: border-box;
  padding: 10px 20px;
}

.question-item {
  display: flex;
  align-items: center;
  position: relative;
}

.dropdown__box {
  position: relative;
}

.dropdown-label {
  position: absolute;
  left: 46px;
  top: 10px;
  z-index: 2;
}

.van-dropdown-menu__item {
  max-width: 360px;
}

.van-dropdown-item--down {
  max-width: 1000px;
}

.question-back {
  background-image: url(data:image/png;base64,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);
  width: 100%;
  height: 100vh;
  position: fixed;
  max-width: 1000px;
}

.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
</style>
