<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"
            @select="select"
            @submit="submit"
          ></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="submit"
          v-show="index === dataList.length - 1 && item.answer"
        >
          确认提交
        </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";

const dataList = [
  {
    id: 1,
    question: "请问您的性别是?",
    component: "Gender",
    type: "gender",
    answer: ""
  },
  {
    id: 2,
    question: "请问您的年龄是?",
    component: "Age",
    type: "age",
    answer: ""
  },
  {
    id: 3,
    question: "请问您结婚了吗?",
    component: "Select",
    type: "marrige",
    answer: ""
  },
  {
    id: 4,
    question: "嘘…悄悄告诉我您月收入是多少?",
    component: "Select",
    type: "income",
    answer: ""
  },
  {
    id: 5,
    question: "生活中，您有下面的习惯、环境吗",
    component: "Select",
    type: "environment",
    answer: ""
  },
  {
    id: 6,
    question: "您平时的出行方式是什么呢？",
    component: "Select",
    type: "travel",
    answer: ""
  },
  {
    id: 7,
    question: "您目前是否还有其他保险呢？",
    component: "Select",
    type: "insurance",
    answer: ""
  }
];

export default {
  name: "SmartMeasure",
  components: {
    Age,
    Gender,
    Select
  },
  data() {
    return {
      dataList,
      isLoading: false
    };
  },
  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) {
      const id = this.smartMeasure[this.smartMeasure.length - 1].id;
      this.smartMeasure[this.smartMeasure.length - 1].answer = answer;
      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);
      }
    },
    goBack(id) {
      this.dataList[id - 1].answer = "";
      this.dataList[id - 2].answer = "";
    },
    submit() {
      this.isLoading = true;
      this.scrollToBottom();
      setTimeout(() => {});
      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>
