<template>
  <div class="flex mt10 align-center space-between">
    <yl-select
      v-if="logic.is_option_group === 0"
      v-model="logic.option_index"
      :options="changeQuestionIndex()"
      placeholder="请选择选项"
    ></yl-select>
    <yl-select v-else v-model="logic.group_index" :options="changeQuestionIndex()"></yl-select>
    <yl-select v-model="logic.operator" :options="symbolOptions" class="mr10 symbol"></yl-select>

    <yl-input v-model="logic.value" class="ml10" />

    <div class="action-setting flex ml10">
      <slot name="button"></slot>
    </div>
  </div>
</template>
<script setup>
import { symbolOptions } from '@/utils/questionSteeingList.js';
import YlSelect from '@/components/YLSelect.vue';
import YlInput from '@/components/YLInput.vue';
import { watch } from 'vue';
const logic = defineModel('logic', {
  type: Object,
  default: () => {
    return {};
  }
});
const beforeQuesOptions = defineModel('beforeQuesOptions', {
  type: Array
});
const changeQuestionIndex = () => {
  let options = [];
  beforeQuesOptions.value.forEach((item) => {
    if (item.question_index === logic.value.question_index) {
      if (item.question_type === logic.value.question_type) {
        // 不是分组
        if (logic.value.is_option_group === 0) {
          options = item.options[0].map((optItem) => {
            return {
              ...optItem,
              label: optItem.option,
              value: optItem.option_index
            };
          });
        }
      }
    }
  });

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