<template>
  <div class="Mdrc-component-marriage Mdrc-component-income">
    <template v-if="type === 'marrige'">
      <p
        :class="{ 'Mdrcc-marriage_selected': answers[type].selected.includes(item) }"
        v-for="(item, index) in answers[type].data"
        :key="index"
        @click="select(item, answers[type].type, type)"
      >
        {{ item }}
      </p>
    </template>
    <template v-else>
      <div v-for="(list, index) in answers[type].data" :key="index" class="Mdrcc-income-item">
        <p
          :class="{ 'Mdrcci-item_selected': answers[type].selected.includes(item) }"
          v-for="item in list"
          :key="item"
          @click="select(item, answers[type].type, type)"
        >
          {{ item }}
        </p>
      </div>
      <p
        v-if="!answers[type].required"
        class="Mdrcc-income-jump"
        :class="{ 'Mdrcci-jump_selected': answers[type].selected.includes('没有，下一题') }"
        @click="select('没有，下一题', answers[type].type, type)"
      >
        没有，下一题
      </p>
    </template>
  </div>
</template>
<script>
import { selectList } from "../constants";

export default {
  name: "Select",
  props: {
    type: {
      type: String,
      default: "marrige"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    currentAnswer: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      answers: JSON.parse(JSON.stringify(selectList))
    };
  },
  methods: {
    select(value, type, name) {
      console.log(value, type, name);
      if (this.disabled) return;

      if (type === "multi-select") {
        if (value === "没有，下一题") {
          this.answers[name].selected = ["没有，下一题"];
        } else {
          this.answers[name].selected = this.answers[name].selected.filter(
            v => v !== "没有，下一题"
          );
          if (this.answers[name].selected.includes(value)) {
            this.answers[name].selected = this.answers[name].selected.filter(v => v !== value);
          } else {
            this.answers[name].selected.push(value);
          }
        }
        this.$emit("update:currentAnswer", this.answers[name].selected.join(","));
      } else if (type === "radio") {
        this.answers[name].selected = [value];
        this.$emit("update:currentAnswer", value);
        this.$emit("nextQuestion");
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
