<template>
  <div class="Mdrc-component-marriage Mdrc-component-income">
    <template v-if="type === 'marrige'">
      <p v-for="(item, index) in answers[type].data" :key="index" @click="select(item)">
        {{ 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>
const answers = {
  marrige: {
    data: ["单身贵族爱自由", "幸福的二人世界", "家有儿女初长成"],
    type: "radio",
    selected: [],
    required: true
  },
  income: {
    data: [
      ["3000元以下", "3000~5000元"],
      ["5000~8000元", "8000~12000元"],
      ["12000~18000元", "18000元以上"]
    ],
    type: "radio",
    selected: [],
    required: true
  },
  environment: {
    data: [
      ["喝酒", "抽烟/二手烟"],
      ["熬夜", "不按时吃饭"],
      ["工作压力大", "不常运动"]
    ],
    type: "radio",
    selected: [],
    required: true
  },
  travel: {
    data: [
      ["开车", "公共交通"],
      ["非机动车", "步行"],
      ["坐火车", "坐飞机"]
    ],
    tye: "radio",
    selected: [],
    required: false
  },
  insurance: {
    data: [["社保", "医疗险"], ["重疾险", "意外险"], ["寿险"]],
    type: "multi-select",
    selected: [],
    required: false
  }
};

export default {
  name: "Select",
  props: {
    type: {
      type: String,
      default: "marrige"
    }
  },
  data() {
    return {
      answers: JSON.parse(JSON.stringify(answers))
    };
  },
  methods: {
    select(value, type, name) {
      console.log(value, type, name);
      if (value === "没有，下一题" && name === "insurance") {
        this.answers.insurance.selected = ["没有，下一题"];
        this.$emit("select", value);
        this.$emit("submit");
        return;
      }
      if (type === "multi-select") {
        this.answers[name].selected = this.answers[name].selected.filter(v => v !== "没有，下一题");
        this.answers[name].selected.includes(value)
          ? (this.answers[name].selected = this.answers[name].selected.filter(v => v !== value))
          : this.answers[name].selected.push(value);

        this.$emit("select", this.answers[name].selected.join(","));
      } else {
        this.$emit("select", value);
      }
    }
  },
  created() {
    // this.answers[this.type] = answers[this.type];
    console.log(answers.insurance);
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
