<template>
  <div class="flex align-center space-between mt10">
    <!--          选项 or 分组 -->
    <yl-select
      v-model="logic.is_option_group"
      :options="groupOptions"
      class="mr10 group"
    ></yl-select>
    <!--          符号-->
    <yl-select
      v-model="logic.operator"
      :options="symbolOptions"
      class="mr10 symbol ml10"
    ></yl-select>
    <yl-select
      v-if="logic.is_option_group === 0"
      v-model="logic.option_index"
      class="ml10"
      :options="changeQuestionIndex()"
    ></yl-select>
    <yl-select
      v-else
      v-model="logic.group_index"
      class="ml10"
      :options="changeQuestionIndex()"
    ></yl-select>

    <div class="action-setting flex ml10">
      <slot name="button"></slot>
    </div>
  </div>
</template>
<script setup>
import { groupOptions, symbolOptions } from '@/utils/questionSteeingList.js';
import YlSelect from '@/components/YLSelect.vue';
import { watch } from 'vue';
const changeQuestionIndex = () => {
  let options = [];
  beforeQuesOptions.value.forEach((item) => {
    if (item.question_index === logic.value.question_index) {
      if (item.question_type === 1) {
        // 不是分组
        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 = defineModel('logic', {
  type: Object,
  default: () => {
    return {};
  }
});
const beforeQuesOptions = defineModel('beforeQuesOptions', {
  type: Array,
  default: () => {
    return [];
  }
});
watch(
  () => logic.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      changeQuestionIndex();
    }
  },
  { deep: true }
);
</script>
<style scoped lang="scss"></style>
