<template>
  <div class="flex mt10 align-center space-between">
    <!--          选项 or 分组 -->
    <yl-select v-model="logic.is_option_group" :options="groupOptions" class="group"></yl-select>
    <!--  分组group_index 或者非分组 option_index-->
    <yl-select
      v-if="logic.is_option_group === 0"
      v-model="logic.option_index"
      class="ml10"
      :options="changeQuestionIndex(logic.question_index, logic)"
    ></yl-select>
    <yl-select
      v-else
      v-model="logic.group_index"
      class="ml10"
      :options="changeQuestionIndex(logic.question_index, logic)"
    ></yl-select>
    <!--是否被选中-->
    <yl-select v-model="logic.is_select" class="ml10" :options="chooseOptions"></yl-select>

    <div class="action-setting flex ml10">
      <slot name="button"></slot>
    </div>
  </div>
</template>
<script setup>
import { groupOptions, chooseOptions } from '@/utils/questionSteeingList.js';
import YlSelect from '@/components/YLSelect.vue';
import { toRefs, watch } from 'vue';
const props = defineProps({
  logic: {
    type: Object,
    default: () => {
      return {};
    }
  },
  logIndex: {
    type: Number,
    default: 0
  },
  beforeQuesOptions: {
    type: Array,
    default: () => {
      return [];
    }
  },
  activeQuestion: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const changeQuestionIndex = () => {
  let options = [];
  beforeQuesOptions.value.forEach((item) => {
    if (item.question_index === logic.value.question_index) {
      if (item.question_type === 2) {
        // 不是分组
        if (logic.value.is_option_group === 0) {
          options = item.options[0].map((optItem) => {
            return {
              ...optItem,
              label: optItem.option,
              value: optItem.option_index
            };
          });
        }
        // 分组
      }
    }
  });

  return options;
};
const { logic, beforeQuesOptions } = toRefs(props);
watch(
  () => logic.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      changeQuestionIndex();
    }
  },
  { deep: true }
);
</script>
<style scoped lang="scss"></style>
