<template>
  <div class="measure">
    <div class="measure-dialogue" v-for="(item, index) in smartMeasure" :key="item.id">
      <div class="measure-dialogue-robot">
        <cr-image
          class="Md-robot-avatar"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/user/avatar@2x.png"
        />
        <div class="Md-robot-container">
          <p class="Mdr-container-question">{{ item.question }}</p>
          <p class="Mdr-container-progress">{{ item.id + "/" + dataList.length }}</p>
          <component
            v-if="!item.answer || index === dataList.length - 1"
            :is="item.component"
            :type="item.type"
            :disabled="isLoading"
            @nextQuestion="nextQuestion"
            @submit="submit"
            :currentAnswer.sync="currentAnswer"
          ></component>
        </div>
      </div>
      <div class="measure-dialogue-operation">
        <div
          class="Md-operation-back"
          v-show="index === smartMeasure.length - 1 && index !== 0"
          @click="goBack(item.id)"
        >
          上一题
        </div>
        <div
          class="Md-operation-submit"
          @click="nextQuestion"
          v-show="
            item.selectType === 'multi-select' && currentAnswer && index === smartMeasure.length - 1
          "
        >
          {{ item.type === "insurance" ? "确认提交" : "确定" }}
        </div>
      </div>
      <div class="measure-dialogue-user" v-show="index !== dataList.length - 1 && item.answer">
        <p class="Md-user-answer">{{ item.answer }}</p>
        <cr-image
          class="Md-user-avatar"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/user/male@2x.png"
        />
      </div>
    </div>
    <cr-loading v-if="isLoading" class="measure-loading" size="24px">测评报告生成中...</cr-loading>
  </div>
</template>
<script>
import Age from "./modules/Age";
import Gender from "./modules/Gender";
import Select from "./modules/Select";
import { questionList } from "./constants";

export default {
  name: "SmartMeasure",
  components: {
    Age,
    Gender,
    Select
  },
  data() {
    return {
      dataList: questionList,
      isLoading: false,
      currentAnswer: ""
    };
  },
  computed: {
    smartMeasure() {
      let result = this.dataList.filter(data => data.answer);
      if (result.length < this.dataList.length) {
        result.push(this.dataList[result.length]);
      }
      this.scrollToBottom();
      return JSON.parse(JSON.stringify(result));
    }
  },
  methods: {
    // select(answer) {
    // console.log(answer, this.isLoading);
    // if (this.isLoading) return;
    // currentAnswer = answer;
    // const id = this.smartMeasure[this.smartMeasure.length - 1].id;
    // this.smartMeasure[this.smartMeasure.length - 1].answer = answer;
    // if (this.smartMeasure[this.smartMeasure.length - 1].selectType === "radio") {
    //   this.nextQuestion();
    // }
    // this.$forceUpdate();
    // if (this.smartMeasure.length < this.dataList.length) {
    //   setTimeout(() => {
    //     this.dataList = this.dataList.map(data => {
    //       if (data.id === id) data.answer = answer;
    //       return data;
    //     });
    //   }, 600);
    // }
    // },
    nextQuestion() {
      this.$forceUpdate();
      const id = this.smartMeasure[this.smartMeasure.length - 1].id;
      if (this.smartMeasure.length < this.dataList.length) {
        setTimeout(() => {
          this.dataList = this.dataList.map(data => {
            if (data.id === id) data.answer = this.currentAnswer;
            return data;
          });
          this.currentAnswer = "";
        }, 600);
      } else if (this.smartMeasure.length === this.dataList.length) {
        this.submit();
      }
    },
    goBack(id) {
      if (this.isLoading) return;
      this.dataList[id - 1].answer = "";
      this.dataList[id - 2].answer = "";
    },
    submit() {
      this.isLoading = true;
      this.scrollToBottom();
      setTimeout(() => {
        // this.$router.push({ path: "/home/smart-measure/report", query: { answer: this.dataList } });
      }, 2000);
      console.log("submit", this.dataList);
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const element = document.querySelector(".measure");
        document.documentElement.scrollTop = element.scrollHeight;
      });
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
