<template>
  <div class="flex mt10 align-center space-between">
    <!--          行标签 -->
    <yl-select
      v-model="logic.row_index"
      :options="getOptions('row')"
      class="group"
      @change="changeHanlde('row', getOptions('row'), $event)"
    ></yl-select>

    <!--          选项 or 分组 -->
    <yl-select
      v-model="logic.is_option_group"
      :options="groupOptions"
      class="ml10 group"
    ></yl-select>
    <!--    <yl-select v-model="logic.operator" :options="symbolOptions" class="ml10 symbol"></yl-select>-->
    <yl-select
      v-model="logic.cell_index"
      :options="getOptions('col')"
      class="ml10"
      @change="changeHanlde('col', getOptions('col'), $event)"
    ></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 { chooseOptions, groupOptions } from '@/utils/questionSteeingList.js';
import YlSelect from '@/components/YLSelect.vue';
const logic = defineModel('logic', {
  type: Object
});
const beforeQuesOptions = defineModel('beforeQuesOptions', {
  type: Array
});
const changeHanlde = (type, options, value) => {
  let optionInfo = options.find((item) => {
    return item.option_index === value;
  });
  if (type === 'row') {
    logic.value.row_index = optionInfo?.option_index || null;
    logic.value.relation_question_row_index = optionInfo?.parent_question_index || 0;
    logic.value.row_type = optionInfo?.type || 0;
  } else if (type === 'col') {
    logic.value.cell_index = optionInfo?.option_index || null;
    logic.value.relation_question_cell_index = optionInfo?.parent_question_index || 0;
    logic.value.cell_type = optionInfo?.type || 0;
  }
};

const getOptions = (type) => {
  let options = [];
  beforeQuesOptions.value.forEach((item) => {
    if (item.question_index === logic.value.question_index) {
      if (item.question_type === 10) {
        // 不是分组
        if (logic.value.is_option_group === 0) {
          options = item.options[type === 'row' ? 0 : 1].map((optItem) => {
            return {
              ...optItem,
              label: optItem.option,
              value: optItem.option_index
            };
          });
        }
      }
    }
  });
  return options;
};
</script>
<style scoped lang="scss"></style>
