ds-yamada-fcbi-admin/src/views/fcbi/survey/detail.vue

<!-- アンケート照会 -->
<template>
  <div class="app-container">
    <p>アンケートフォーム作成</p>
    <div class="form-container">
      <el-form ref="queryRef"
               :model="queryParams"
               label-width="140px"
               label-position="top">
        <el-form-item label="タイトル"  style="margin-left: 30px;margin-top: -35px;">
          <el-input v-model="queryParams.title"  class="table-input" :maxlength="100" ></el-input>
        </el-form-item>
        <el-form-item label="説明文" style="margin-left: 30px;margin-top: -15px;">
          <el-input
              v-model="queryParams.description"
              class="table-input"
              :maxlength="255"
              type="textarea"
              :rows="2"
          ></el-input>
        </el-form-item>
        <div style=" padding-left: 29px;margin-top: -15px;">公開範囲</div>
        <el-form-item label="FC" prop="brandCode" style="margin-left: 60px; display: flex; align-items: center; margin-top: 10px;">
          <div class="el-form-item__label" style="flex-shrink: 0; margin-right: 20px;"></div>
          <el-checkbox-group v-model="queryParams.brandCode">
            <el-checkbox v-for="dict in yamada_fc_brand" :key="dict.value" :label="dict.value" style="margin-right: 60px;">{{ dict.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="業種" prop="businessTypeCode" class="el-form-item__businessTypeCode">
          <div class="el-form-item__label" style="flex-shrink: 0; margin-right: 14px;"></div>
          <el-checkbox-group v-model="queryParams.businessTypeCode">
            <el-checkbox v-for="dict in yamada_business_type" :key="dict.value" :label="dict.value" style="margin-right: 32px;">{{ dict.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="container">
          <div class="area-header-row">
            <h1 class="area-title">エリア</h1>
            <RegionTree class="region-tree-container"  :treeData="regionTree" @check-change="handleCheckChange" />
          </div>
        </div>
        <!-- 公開期間 -->
        <div class="form-section">公開期間</div>
        <!-- 垂直排列的单选框组 -->
        <el-form-item class="radio-group-vertical">
          <div class="radio-container"> <!-- 新增容器用于控制布局 -->
            <el-radio
                label="immediate"
                v-model="queryParams.releaseType"
                class="vertical-radio"
            >即時公開</el-radio>
            <el-radio
                label="scheduled"
                v-model="queryParams.releaseType"
                class="scheduled-radio"
            >期間指定</el-radio>
            <div class="scheduled-row">
              <!-- 期間指定时显示的日期选择（同行） -->
              <div class="date-group"  >
                <!-- 日期选择器代码保持不变 -->
                <el-select v-model="queryParams.startYear" placeholder="" class="date-select"   :disabled="queryParams.releaseType === 'immediate'" @change="formatDate">
                  <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                </el-select>
                <span class="date-label">年</span>
                <el-select
                    v-model="queryParams.startMonth"
                    placeholder=""
                    class="date-select-small"
                    @change="formatDate"
                    :disabled="queryParams.releaseType === 'immediate'"
                >
                  <el-option
                      v-for="month in months"
                      :key="month"
                      :label="month"
                      :value="month"
                  ></el-option>
                </el-select>
                <span class="date-label">月</span>
                <el-select
                    v-model="queryParams.startDay"
                    placeholder=""
                    class="date-select-small"
                    @change="formatDate"
                    :disabled="queryParams.releaseType === 'immediate'"
                >
                  <el-option
                      v-for="day in days"
                      :key="day"
                      :label="day"
                      :value="day"
                  ></el-option>
                </el-select>
                <span class="date-label">日</span>
                <span class="date-label">～</span>
                <el-select
                    v-model="queryParams.endYear"
                    placeholder=""
                    class="date-select"
                    @change="formatDate"
                    :disabled="queryParams.releaseType === 'immediate'"
                >
                  <el-option
                      v-for="year in years"
                      :key="year"
                      :label="year"
                      :value="year"
                  ></el-option>
                </el-select>
                <span class="date-label">年</span>
                <el-select
                    v-model="queryParams.endMonth"
                    placeholder=""
                    class="date-select-small"
                    @change="formatDate"
                    :disabled="queryParams.releaseType === 'immediate'"
                >
                  <el-option
                      v-for="month in months"
                      :key="month"
                      :label="month"
                      :value="month"
                  ></el-option>
                </el-select>
                <span class="date-label">月</span>
                <el-select
                    v-model="queryParams.endDay"
                    placeholder=""
                    class="date-select-small"
                    @change="formatDate"
                    :disabled="queryParams.releaseType === 'immediate'"
                >
                  <el-option
                      v-for="day in days"
                      :key="day"
                      :label="day"
                      :value="day"
                  ></el-option>
                </el-select>
                <span class="date-label">日</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <div style="margin-left: 25px; margin-top: 15px;">自由作成フォーム</div>

        <div v-for="(question, index) in questions" :key="question.sortOrder" class="question-block">
          <el-form-item style="margin-left: 50px; margin-top: 3px;">
            <el-button class="append-button" @click="addQuestionAbove(index)">この上に設問を追加</el-button>
          </el-form-item>
          <el-form-item style="margin-left: 55px;">
            <template #label>
              <div style="display: flex; align-items: center;margin-top: -20px">
                <span style="color: #606266; font-weight: bold">設問文</span>
                <span style="color: #666; margin-left: 8px;">: {{ question.sortOrder }}</span>
              </div>
            </template>
            <el-input v-model="question.questionText" class="small-input" type="textarea" :rows="2" :maxlength="255"></el-input>
          </el-form-item>
          <el-form-item label="回答型" style="margin-left: 55px;margin-top: -15px">
            <el-radio-group v-model="question.questionType" class="custom-radio-group" @change="handleQuestionTypeChange(question, $event)">
              <el-radio label="INPUT_BOX_50">入力ボックス（50文字）</el-radio>
              <el-radio label="INPUT_BOX_100">入力ボックス（100文字）</el-radio>
              <el-radio label="CHECK_BOX">チェックボックス</el-radio>
              <el-radio label="RADIO_BUTTON">ラジオボタン</el-radio>
              <el-radio label="NUMBER_SELECT">数字選択（プルダウン）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
                v-if="question.questionType === 'INPUT_BOX_50'"
                v-model="question.input50"
                :maxlength="50"
                class="textarea-input"
                type="textarea"
                :rows="2"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                v-if="question.questionType === 'INPUT_BOX_100'"
                v-model="question.input100"
                :maxlength="100"
                class="textarea-input100"
                type="textarea"
                :rows="2"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="question.questionType === 'CHECK_BOX'" style="margin-left: 125px;margin-top: -60px;">
            <!-- 循环渲染每一行：复选框 + 输入框 + 削除按钮 -->
            <div
                v-for="(item, itemIndex) in question.checkboxItems"
                :key="itemIndex"
                class="checkbox-row"
            >
              <div style="display: flex; align-items: center; width: 100%;">
                <span style="min-width: 30px; color: #666;">{{ item.sortOrder || itemIndex + 1 }}</span>
                <el-checkbox
                    v-model="item.checked"
                    class="checkbox-item"
                ></el-checkbox>
                <el-input
                    v-model="item.optionText"
                    class="input-item"
                ></el-input>
                <el-button
                    type="text"
                    class="delete-btn"
                    @click="deleteCheckboxItem(index, itemIndex)"
                >削除</el-button>
              </div>
            </div>
            <el-button
                class="append-btn"
                @click="addCheckboxItem(index)"
            >追加</el-button>
          </el-form-item>
          <el-form-item v-if="question.questionType === 'RADIO_BUTTON'" style="margin-left: 125px;margin-top: -60px;">
            <!-- 循环渲染每一行：单选按钮 + 输入框 + 削除按钮 -->
            <div
                v-for="(item, itemIndex) in question.radioItems"
                :key="itemIndex"
                class="checkbox-row"
            >
              <div style="display: flex; align-items: center; width: 100%;">
                <span style="min-width: 30px; color: #666;">{{ item.sortOrder || itemIndex + 1 }}</span>
                <el-radio
                    :label="item.value"
                    v-model="question.radioGroupValue"
                    class="hidden-label-radio"
                ></el-radio>
                <el-input
                    v-model="item.optionText"
                    class="radio-item"
                ></el-input>
                <el-button
                    type="text"
                    class="radio-btn"
                    @click="deleteRadioItem(index, itemIndex)"
                >削除</el-button>
              </div>
            </div>
            <el-button
                class="append-btn"
                @click="addRadioItem(index)"
            >追加</el-button>
          </el-form-item>
          <el-form-item v-if="question.questionType === 'NUMBER_SELECT'" style="margin-left: 120px;margin-top: -50px">
            <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
              <!-- 選択肢部分 -->
              <div style="display: flex; align-items: center;  width: 100%;">
                <span>選択肢</span>
                <div style="width: 35px;"></div>
                <el-input type="number" min="0" max="999" v-model="question.numberSelectStart" class="mx-2"
                          style="width: 60px;margin-right: 10px;"></el-input>
                <span>～</span>
                <el-input type="number" min="0"  max="999" v-model="question.numberSelectEnd" class="mx-2"  style="width: 60px;margin-left: 10px;"></el-input>
              </div>
              <!-- 単位部分 -->
              <div style="display: flex; align-items: center; width: 100%; flex-wrap: nowrap; white-space: nowrap;">
                <span>単位</span>
                <el-radio-group v-model="question.unitHas" class="mx-radio-group">
                  <el-radio :label="false" class="radio-group">なし</el-radio>
                  <el-radio :label="true">あり</el-radio>
                </el-radio-group>
                <el-input
                    v-model="question.questionUnit"
                    :maxlength="20"
                    style="width: 85px; margin-left: 10px;"
                    :disabled="!question.unitHas"
                ></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item style="margin-left: 50px; margin-top: -10px;">
            <el-button class="append-button" @click="addQuestionBelow(index)">この下に設問を追加</el-button>
          </el-form-item>
        </div>

        <el-form-item style="text-align: center;">
          <el-button @click="Confirm" class="confirm-button">確認</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script name="SurveyDetail" setup>

import { getRegionTree, addSurvey} from "@/api/fcbi/survey.js"
import { reactive, toRefs, ref, watch, onMounted } from 'vue';
import RegionTree from '../../../components/RegionTree.vue';
import { ElMessage } from "element-plus";
import {useRoute, useRouter} from 'vue-router';
import { useSurveyStore } from '@/store/yamadaStore.js'

const { proxy } = getCurrentInstance();
const surveyStore = useSurveyStore()
// アップロード対象を取得
const { yamada_fc_brand } = proxy.useDict('yamada_fc_brand');
surveyStore.setBrandCode(yamada_fc_brand)
const { yamada_business_type } = proxy.useDict('yamada_business_type');
surveyStore.setBusinessTypeCode(yamada_business_type)
const error = ref('');

const regionTree = ref([]);
const selectedRegions = ref([]);
const router = useRouter();
const route= useRoute()
const surveyId = route.params.surveyId

/**
 * コンポーネントの状態を管理するリアクティブオブジェクト
 */
const data = reactive({
  form: {},
  // 検索条件を格納するオブジェクト
  queryParams: {
    title: null,
    description: null,
    brandCode: [],
    businessTypeCode: [],
    releaseType: 'immediate',
    startYear: '',
    startMonth: '',
    startDay: '',
    endYear: '',
    endMonth: '',
    endDay: '',
    publicStartTime: '',
    publicEndTime: '',
    publicMode: '',
    insertFlag: 1,
    regions: []
  },
  questions: [
    {
      questionText: '',
      questionType: 'INPUT_BOX_50',
      oldQuestionType: 'INPUT_BOX_50',
      input50: '',
      input100: '',
      checkboxItems: [
        { checked: false, optionText: '', sortOrder: 1 },
        { checked: false, optionText: '', sortOrder: 2 },
        { checked: false, optionText: '', sortOrder: 3 },
      ],
      radioItems: [
        { value: 'option1', optionText: '', sortOrder: 1 },
        { value: 'option2', optionText: '', sortOrder: 2 },
        { value: 'option3', optionText: '', sortOrder: 3 },
      ],
      radioGroupValue: null,
      numberSelectStart: '',
      numberSelectEnd: '',
      unitHas: false,
      sortOrder: 1,
      questionUnit: ''
    }
  ]
});

// 問題を動的に追加する方法
const addQuestionAbove = (index) => {
  const newSortOrder = data.questions[index].sortOrder;
  // 指定した場所に新しい問題を追加する
  data.questions.splice(index, 0, {
    questionText: '',
    questionType: 'INPUT_BOX_50',
    oldQuestionType: 'INPUT_BOX_50',
    input50: '',
    input100: '',
    checkboxItems: [
      { checked: false, optionText: '', sortOrder: 1 },
      { checked: false, optionText: '', sortOrder: 2 },
      { checked: false, optionText: '', sortOrder: 3 },
    ],
    radioItems: [
      { value: 'option1', optionText: '', sortOrder: 1 },
      { value: 'option2', optionText: '', sortOrder: 2 },
      { value: 'option3', optionText: '', sortOrder: 3 },
    ],
    radioGroupValue: null,
    numberSelectStart: '',
    numberSelectEnd: '',
    unitHas: false,
    sortOrder: newSortOrder,
    questionUnit: ''
  });
  adjustSortOrders(index);
};

const addQuestionBelow  = (index) => {
  const newSortOrder = data.questions[index].sortOrder + 1;
  // 指定した場所の下に新しい問題を追加する
  data.questions.splice(index + 1, 0, {
    questionText: '',
    questionType: 'INPUT_BOX_50',
    oldQuestionType: 'INPUT_BOX_50',
    input50: '',
    input100: '',
    checkboxItems: [
      { checked: false, optionText: '', sortOrder: 1 },
      { checked: false, optionText: '', sortOrder: 2 },
      { checked: false, optionText: '', sortOrder: 3 },
    ],
    radioItems: [
      { value: 'option1', optionText: '', sortOrder: 1 },
      { value: 'option2', optionText: '', sortOrder: 2 },
      { value: 'option3', optionText: '', sortOrder: 3 },
    ],
    radioGroupValue: null,
    numberSelectStart: '',
    numberSelectEnd: '',
    unitHas: false,
    sortOrder: newSortOrder,
    questionUnit: ''
  });
  adjustSortOrders(index + 1);
};

// 問題のソートの調整
const adjustSortOrders = (startIndex) => {
  for (let i = startIndex; i < data.questions.length; i++) {
    data.questions[i].sortOrder = i + 1;
  }
};

// 回答类型切换时重置前一类型的状态
const handleQuestionTypeChange = (question, newType) => {
  // 保存旧类型用于判断需要重置哪些数据
  const oldType = question.questionType;

  // 如果类型未变化，不执行重置
  if (oldType === newType) return;

  // 根据旧类型重置对应的数据（回到初始状态）
  switch (oldType) {
    case 'INPUT_BOX_50':
      question.input50 = ''; // 重置50文字输入框
      break;
    case 'INPUT_BOX_100':
      question.input100 = ''; // 重置100文字输入框
      break;
    case 'CHECK_BOX':
      // 重置复选框选项（保留3个空选项）
      question.checkboxItems = [
        { checked: false, optionText: '', sortOrder: 1 },
        { checked: false, optionText: '', sortOrder: 2 },
        { checked: false, optionText: '', sortOrder: 3 },
      ];
      break;
    case 'RADIO_BUTTON':
      // 重置单选按钮选项（保留3个空选项）
      question.radioItems = [
        { value: 'option1', optionText: '', sortOrder: 1 },
        { value: 'option2', optionText: '', sortOrder: 2 },
        { value: 'option3', optionText: '', sortOrder: 3 },
      ];
      question.radioGroupValue = null; // 重置选中状态
      break;
    case 'NUMBER_SELECT':
      // 重置数字选择器相关数据
      question.numberSelectStart = '';
      question.numberSelectEnd = '';
      question.unitHas = false; // 重置单位选择
      question.questionUnit = ''; // 重置单位输入框
      break;
  }

  // 更新为新类型（确保数据同步）
  question.questionType = newType;
};

//ボタンの追加方法
const addCheckboxItem = (questionIndex) => {
  const question = data.questions[questionIndex];
  const newSortOrder = question.checkboxItems.length + 1;
  question.checkboxItems.push({
    checked: false,
    optionText: '',
    sortOrder: newSortOrder
  });
};

const addRadioItem = (questionIndex) => {
  const question = data.questions[questionIndex];
  const newId = question.radioItems.length + 1;
  const newSortOrder = question.radioItems.length + 1;
  question.radioItems.push({
    value: `option${newId}`,
    optionText: '',
    sortOrder: newSortOrder
  });
};


//消去ボタンの方法
const deleteRadioItem = (questionIndex, itemIndex) => {
  const question = data.questions[questionIndex];
  if (question.radioItems.length <= 3) {
    ElMessage.warning('少なくとも3つの選択肢を残してください');
    return;
  }
  question.radioItems.splice(itemIndex, 1);
  question.radioItems.forEach((item, index) => {
    item.sortOrder = index + 1;
  });
};

const deleteCheckboxItem = (questionIndex, itemIndex) => {
  const question = data.questions[questionIndex];
  if (question.checkboxItems.length <= 3) {
    ElMessage.warning('少なくとも3つの選択肢を残してください');
    return;
  }
  question.checkboxItems.splice(itemIndex, 1);
  question.checkboxItems.forEach((item, index) => {
    item.sortOrder = index + 1;
  });
};


// リアクティブオブジェクトからプロパティを参照可能なオブジェクトに変換
const { queryParams, questions } = toRefs(data);
const currentYear = new Date().getFullYear();
const years = Array.from({ length: 11 }, (_, i) => currentYear + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const days = Array.from({ length: 31 }, (_, i) => i + 1);

const formatDate = () => {
  if (queryParams.value.releaseType === 'scheduled') {
    const publicStartTime = `${queryParams.value.startYear}-${String(queryParams.value.startMonth).padStart(2, '0')}-${String(queryParams.value.startDay).padStart(2, '0')}`;
    const publicEndTime = `${queryParams.value.endYear}-${String(queryParams.value.endMonth).padStart(2, '0')}-${String(queryParams.value.endDay).padStart(2, '0')}`;
    queryParams.publicStartTime = publicStartTime;
    queryParams.publicEndTime = publicEndTime;
    queryParams.publicMode = 'PERIOD';
  } else {
    queryParams.publicStartTime = '';
    queryParams.publicEndTime = '';
    queryParams.value.startYear = '';
    queryParams.value.startMonth = '';
    queryParams.value.startDay = '';
    queryParams.value.endYear = '';
    queryParams.value.endMonth = '';
    queryParams.value.endDay = '';
    queryParams.publicMode = 'INSTANT';
  }
};

watch(() => queryParams.value.releaseType, () => {
  formatDate();
});

watch(regionTree, () => {
  if (regionTree.value.length > 0) {
    updateSelectedRegions(regionTree.value);
  }
}, { deep: true });

watch(
    () => data.questions.map(q => q.unitHas),
    (newValues, oldValues) => {
      data.questions.forEach((question, index) => {
        if (newValues[index] === false && oldValues[index] === true) {
          question.questionUnit = '';
        }
      });
    },
    { deep: true }
);

watch(
    () => data.questions.map(q => q.questionType),
    (newTypes, oldTypes) => {
      data.questions.forEach((question, index) => {
        const newType = newTypes[index];
        const oldType = oldTypes[index];

        // 类型未变化则跳过
        if (newType === oldType) return;

        // 执行重置逻辑
        resetOldTypeData(question, oldType);

        // 更新旧类型记录
        question.oldQuestionType = oldType;
      });
    },
    { deep: true }
);
// 重置旧类型对应的所有数据
const resetOldTypeData = (question, oldType) => {
  switch (oldType) {
    case 'INPUT_BOX_50':
      question.input50 = ''; // 清空输入
      break;
    case 'INPUT_BOX_100':
      question.input100 = ''; // 清空输入
      break;
    case 'CHECK_BOX':
      // 强制重置为3个空选项
      question.checkboxItems = [
        { checked: false, optionText: '', sortOrder: 1 },
        { checked: false, optionText: '', sortOrder: 2 },
        { checked: false, optionText: '', sortOrder: 3 },
      ];
      break;
    case 'RADIO_BUTTON':
      // 强制重置为3个空选项，清空选中值
      question.radioItems = [
        { value: 'option1', optionText: '', sortOrder: 1 },
        { value: 'option2', optionText: '', sortOrder: 2 },
        { value: 'option3', optionText: '', sortOrder: 3 },
      ];
      question.radioGroupValue = null;
      break;
    case 'NUMBER_SELECT':
      // 清空所有数字选择器相关数据
      question.numberSelectStart = '';
      question.numberSelectEnd = '';
      question.unitHas = false;
      question.questionUnit = '';
      break;
  }
};

onMounted(async () => {
  const response = await getRegionTree();
  if (response?.success) {
    const regions = response.data.regions || []
    regionTree.value = regions
    surveyStore.setRegionTree(regions)
    if (regionTree.value.length > 0) {
      updateSelectedRegions(regionTree.value);
    }
  } else {
    error.value = response?.message || '地域データの取得に失敗しました';
    console.error('地域データの取得に失敗しました:', response);
  }
});

// 選択した状態変更の処理
const handleCheckChange = (regionId, isChecked) => {
  const region = findRegionById(regionTree.value, regionId);
  if (region) {
    if (isChecked) {
      if (!selectedRegions.value.some(r => r.region_code === region.region_code)) {
        selectedRegions.value.push({
          region_code: region.region_code
        });
      }
    } else {
      selectedRegions.value = selectedRegions.value.filter(r => r.region_code !== region.region_code);
    }
    queryParams.value.regions = selectedRegions.value;
  }
};

const findRegionById = (nodes, id) => {
  for (const node of nodes) {
    if (node.id === id) {
      return node;
    }
    if (node.children && node.children.length > 0) {
      const found = findRegionById(node.children, id);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

// 選択したすべての領域を再帰的に更新し、サブノードのみを収集
const updateSelectedRegions = (nodes) => {
  selectedRegions.value = [];
  // 最上位ノードは親ノードとしてマークされ、再帰的になる
  collectSelectedRegions(nodes, true);
  queryParams.value.regions = selectedRegions.value;
};

// 選択したすべてのサブエリアオブジェクトを再帰的に収集する（親ノードをスキップ）
const collectSelectedRegions = (nodes, isParent = false) => {
  nodes.forEach(node => {
    // 親ノード（上位ノード）の場合は、収集をスキップして再帰的な子ノードを続行します
    if (isParent) {
      if (node.children && node.children.length > 0) {
        collectSelectedRegions(node.children, false);
      }
      return;
    }
    if (node.checked) {
      selectedRegions.value.push({
        region_code: node.region_code
      });
    }
    if (node.children && node.children.length > 0) {
      collectSelectedRegions(node.children, false);
    }
  });
};

// 確認按钮点击处理函数
const Confirm = async () => {
  if (!queryParams.value.title) {
    ElMessage.error('タイトルを入力してください');
    return;
  }
  if (queryParams.value.releaseType === 'scheduled') {
    if (!queryParams.value.startYear || !queryParams.value.startMonth || !queryParams.value.startDay ||
        !queryParams.value.endYear || !queryParams.value.endMonth || !queryParams.value.endDay) {
      ElMessage.error('期間指定の場合は全ての日付を入力してください');
      return;
    }
  }
  if (regionTree.value.length > 0) {
    updateSelectedRegions(regionTree.value);
  }
  formatDate();
  if (queryParams.value.releaseType === 'scheduled') {
    // 确保日期格式正确（YYYY-MM-DD）
    const startDate = new Date(queryParams.publicStartTime);
    const endDate = new Date(queryParams.publicEndTime);

    // 检查日期是否有效且开始时间大于结束时间
    if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime()) && startDate > endDate) {
      ElMessage.error('公開開始日時は公開終了日時より後に設定できません');
      return; // 中断提交
    }
  }

  let hasError = false;
  const questionsData = data.questions.map(question => {
    if (!question.questionText || question.questionText.trim() === '') {
      ElMessage.warning(`設問文${question.sortOrder}の設問文を入力してください`);
      hasError = true;
      return null;
    }
    const questionData = {
      questionText: question.questionText,
      questionType: question.questionType,
      input50: question.input50,
      input100: question.input100,
      numberSelectStart: question.numberSelectStart,
      numberSelectEnd: question.numberSelectEnd,
      questionUnit: question.questionUnit,
      unitHas: question.unitHas,
      sortOrder: question.sortOrder
    };

    // CHECKBOXタイプの問題を処理するオプション
    if (question.questionType === 'CHECK_BOX') {
      questionData.checkboxItems = question.checkboxItems.map((item, itemIndex) => {
        // 新增：校验optionText是否为空
        if (!item.optionText || item.optionText.trim() === '') {
          ElMessage.warning(`設問文${question.sortOrder}の選択肢${itemIndex + 1}を入力してください`);
          hasError = true;
        }
        return {
          optionText: item.optionText,
          sortOrder: item.sortOrder
        };
      });
    }

    // RADIOタイプの問題を処理するオプション
    if (question.questionType === 'RADIO_BUTTON') {
      questionData.radioItems = question.radioItems.map((item, itemIndex) => {
        // 新增：校验optionText是否为空
        if (!item.optionText || item.optionText.trim() === '') {
          ElMessage.warning(`設問文${question.sortOrder}の選択肢${itemIndex + 1}を入力してください`);
          hasError = true;
        }
        return {
          optionText: item.optionText,
          sortOrder: item.sortOrder
        };
      });
    }

    // SELECTタイプの問題：動的生成オプション
    if (question.questionType === 'NUMBER_SELECT') {
      // 先判断start或end是否为空（包括空字符串、纯空格）
      const isStartEmpty = !question.numberSelectStart || question.numberSelectStart.trim() === '';
      const isEndEmpty = !question.numberSelectEnd || question.numberSelectEnd.trim() === '';

      if (isStartEmpty) {
        ElMessage.warning(`設問文${question.sortOrder}の選択肢1を入力してください`);
        hasError = true;
      }

      if (isEndEmpty) {
        ElMessage.warning(`設問文${question.sortOrder}の選択肢2を入力してください`);
        hasError = true;
      }

      if (isStartEmpty || isEndEmpty) {
        return null;
      }


      const start = parseInt(question.numberSelectStart);
      const end = parseInt(question.numberSelectEnd);

      if (!isNaN(start) && !isNaN(end) && start <= end) {
        // startからendへのオプションの動的生成
        questionData.selectOptions = Array.from({ length: end - start + 1 }, (_, i) => ({
          optionText: (start + i).toString(),
          sortOrder: i + 1
        }));
      } else {
        ElMessage.warning(`SELECTタイプ問題の範囲が無効です：${start}~${end}`);
        hasError = true; // 标记有错误
        return null; // 临时返回null
      }
      // 新增：単位「あり」时的输入框空值校验
      if (question.unitHas && (!question.questionUnit || question.questionUnit.trim() === '')) {
        ElMessage.warning(`設問文${question.sortOrder}の単位を入力してください`);
        hasError = true;
        return null;
      }
    }

    return questionData;
  });
  if (hasError) {
    return;
  }
  const validQuestionsData = questionsData.filter(q => q !== null);
  const params = {
    title: queryParams.value.title,
    description: queryParams.value.description,
    publicStartTime: queryParams.publicStartTime,
    publicEndTime: queryParams.publicEndTime,
    publicMode: queryParams.publicMode,
    brandCodes: queryParams.value.brandCode,
    businessTypeCodes: queryParams.value.businessTypeCode,
    numberSelectStart: queryParams.value.numberSelectStart,
    numberSelectEnd: queryParams.value.numberSelectEnd,
    questions: validQuestionsData,
    regions: queryParams.value.regions
  };
  addSurvey(params).then((res) => {
    if (res.success) {
      surveyStore.updateFormData({
        queryParams: data.queryParams,
        questions: data.questions
      });
      router.push({ name: 'SurveyDecision' });
    }
  });
};
</script>


<style>
/* 小さい入力框样式（設問文输入框） */
.small-input {
  width: 600px;
  margin-left: 20px;
  margin-top: -10px;
}
/* 表格输入框样式（タイトル和説明文输入框） */
.table-input{
  width: 600px;
  margin-left: 20px;
  margin-top: -5px;
}
/* 确认按钮样式 */
.confirm-button{
  background-color: #FF0066;
  color: white;
  width:300px;
  margin-left: 160px;
}
/* 追加按钮样式（この上に設問を追加/この下に設問を追加按钮） */
.append-button{
  background-color: #FF0066;
  color: white;
}
/* 表单容器整体样式 */
.form-container {
  margin-top: 40px;
}
/* 段落样式调整 */
p {
  margin-bottom: 10px;
}
/* 表单区块标题样式（公開期間、エリア等标题） */
.form-section {
  font-size: 14px;
  font-weight: bold;
  margin: -10px 0 5px 27px;
}
/* 垂直排列的单选框组容器样式 */
.radio-group-vertical {
  margin-left: 65px;
}
/* 移动端垂直排列的单选框组容器样式适配 */
@media (max-width:48em) {
  .radio-group-vertical  {
    margin-left: 7%;
  }
}
/* 单选框容器布局控制 */
.radio-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 即時公開单选框样式 */
.vertical-radio {
  display: flex;
  align-items: center;
}
/* 期間指定单选框样式 */
.scheduled-radio{
  display: flex;
  align-items: center;
  margin-top: -15px;
}
/* 日期选择区域布局 */
.scheduled-row {
  display: flex;
  align-items: center;
  margin-left: 88px;
  margin-top: -45px;
}
/* 移动端日期选择区域布局适配 */
@media (max-width:48em) {
  .scheduled-row  {
    margin-left: 13%;
    width: 80%;
  }
}
/* 日期选择器组合样式 */
.date-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
/* 年份选择器宽度 */
.date-select {
  min-width: 80px;
}
/* 月/日选择器宽度 */
.date-select-small {
  min-width: 60px;
}
/* 日期单位文本样式（年/月/日） */
.date-label {
  font-size: 14px;
  color: #666;
}
/* 地区选择区域布局 */
.area-header-row {
  display: flex;
  align-items: flex-start;
}
/* 地区标题与选择器间距 */
.area-header-row h1 {
  margin: -8px 20px 0 0;
}
/* 地区标题样式 */
.area-title {
  font-size: 14px;
  margin-left: 57px !important;
}
/* 移动端地区标题适配 */
@media (max-width:48em) {
  .area-title  {
    margin-left:13% !important;
  }
}
/* 回答类型单选框组布局 */
.custom-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 35px !important;
}
/* 前4个回答类型单选框间距 */
.custom-radio-group > .el-radio:nth-child(-n+4) {
  margin-right: 20px;
}
/* 第5个回答类型单选框（数字選択）强制换行 */
.custom-radio-group > .el-radio:nth-child(5) {
  width: 100%;
}
/* 50文字输入框样式 */
.textarea-input{
  width: 600px;
  margin-left: 105px !important;
  margin-top: -20px;
}
/* 100文字输入框样式 */
.textarea-input100{
  width: 600px;
  margin-left: 105px !important;
  margin-top: -40px;
}
/* 复选框选项行布局 */
.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
/* 复选框与输入框间距 */
.checkbox-item {
  margin-right: 8px;
}
/* 单选框样式（隐藏原生标签） */
.hidden-label-radio {
  margin-right: 8px;
}
.hidden-label-radio .el-radio__label {
  display: none !important;
}
/* 复选框选项输入框宽度 */
.input-item {
  margin: 0 8px;
  width: 15%;
}
/* 移动端复选框输入框适配 */
@media (max-width:48em) {
  .input-item {
    width: 60%;
  }
}
/* 单选框选项输入框宽度 */
.radio-item{
  width: 15%;
}
/* 移动端单选框输入框适配 */
@media (max-width:48em) {
  .radio-item {
    width: 60%;
  }
}
/* 复选框删除按钮样式 */
.delete-btn {
  color: #409eff;
  text-decoration: underline;
}
/* 单选框删除按钮样式 */
.radio-btn{
  margin-left: 8px;
  color: #409eff;
  text-decoration: underline;
}
/* 选项追加按钮样式 */
.append-btn {
  display: inline-block;
  background-color: black;
  color: white;
  margin-left:18%;
}
/* 移动端追加按钮适配 */
@media (max-width:48em) {
  .append-btn  {
    margin-left:80%;
  }
}
/* 地区选择树样式 */
.region-tree-container {
  margin-top: -12px;
  margin-left: -2px;
}
/* 業種复选框组布局 */
.el-form-item__businessTypeCode{
  margin-left: 55px;
  display: flex;
  align-items: center;
  margin-top: -15px;
}
/* 移动端業種复选框组适配 */
@media (max-width:48em) {
  .el-form-item__businessTypeCode  {
    margin-left:13%;
  }
}
/* 数字选择器单位单选框组样式 */
.mx-radio-group{
  margin-left: 60px;
  min-width: 120px;
}
/* 移动端数字选择器单位适配 */
@media (max-width:48em) {
  .mx-radio-group  {
    margin-left: 45px;
    min-width: 110px;
  }
}
/* 单位单选框间距 */
.radio-group{
  margin-right: 50px;
}
/* 移动端单位单选框间距适配 */
@media (max-width:48em) {
  .radio-group  {
    margin-right: 10px;
  }
}
</style>