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

<!-- アンケート回答集計結果 -->
<template>
  <div class="app-container">
    <div v-if="loading">
    </div>
    <div v-else>
      <div class="survey-title">アンケート</div>
      <div class="deadline">
        回答締切：{{ formatDate(surveyData.publicEndTime || '無し') }}
      </div>

      <!-- 動的レンダリング問題リスト -->
      <div v-for="(question, index) in surveyQuestions" :key="question.surveyId + index" class="question">
        <span class="question-number">Q{{ question.sortOrder }}.</span>
        <span class="question-text">{{ question.questionText }}</span>

        <!-- テキストボックス（タイプ1：50文字制限） -->
        <div v-if="question.questionType === '1'" class="text-area">
          <textarea
              rows="3"
              :maxlength="50"
              v-model="question.answerText"
              disabled
          ></textarea>
        </div>

        <!-- テキストボックス（タイプ2：100字制限） -->
        <div v-if="question.questionType === '2'" class="text-area">
          <textarea
              rows="3"
              :maxlength="100"
              v-model="question.answerText"
              disabled
          ></textarea>
        </div>

        <!-- チェックボックス（タイプ3） -->
        <div v-if="question.questionType === '3'" class="options">
          <label v-for="option in parsedOptions(question)" :key="option.optionId" class="option-item">
            <input
                type="checkbox"
                :checked="option.isAnswered"
                @change="option.isAnswered = !option.isAnswered"
                disabled
            >
            {{ option.optionText }}
          </label>
        </div>

        <!-- ラジオボタン（タイプ4） -->
        <div v-if="question.questionType === '4'" class="options">
          <label v-for="option in parsedOptions(question)" :key="option.optionId" class="option-item">
            <input
                type="radio"
                :name="'q' + question.sortOrder"
                :checked="option.isAnswered"
                @change="handleRadioChange(question, option)"
                disabled
            >
            {{ option.optionText }}
          </label>
        </div>

        <!-- ドロップダウンボックス（タイプ5） -->
        <div v-if="question.questionType === '5'" class="dropdown">
          <select v-model="question.selectedOptionId" disabled>
            <option value="">選択してください</option>
            <option
                v-for="option in parsedOptions(question)"
                :key="option.optionId"
                :value="option.optionId"
            >
              {{ option.optionText }}
            </option>
          </select>
        </div>
      </div>

      <button class="back-button" @click="goBack">戻る</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listSurveyAnswer } from "@/api/fcbi/survey.js"
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'

// アンケートデータと状態管理
const surveyData = ref({ publicEndTime: '' })
// アンケートコード（戻るページに渡す）
const surveyCode = ref('')
const surveyQuestions = ref([])
const loading = ref(true)
const router = useRouter();
const route= useRoute()
const tagsViewStore = useTagsViewStore()
const currentRoute = router.currentRoute.value
const surveyId = route.params.surveyId


// アンケートデータをAPIから取得
const loadSurveyData = async () => {
  try {
    const response = await listSurveyAnswer({ surveyId: surveyId })
    if (response.code === 200) {
      surveyData.value = { publicEndTime: response.rows[0].publicEndTime || '' }
      surveyCode.value = response.rows[0].surveyCode || ''
      surveyQuestions.value = processSurveyQuestions(response.rows)
    }
  } catch (error) {
    console.error('データ取得失敗:', error)
  } finally {
    loading.value = false
  }
}

// 質問リストをソートし、初期値を設定
const processSurveyQuestions = (data) => {
  return data?.map(question => {
    const selectedOptionId = question.questionType === '5'
        ? parsedOptions(question).find(opt => opt.isAnswered)?.optionId || ''
        : ''
    return { ...question, selectedOptionId }
  })?.sort((a, b) => Number(a.sortOrder) - Number(b.sortOrder)) || []
}

// JSON形式のオプションを解析
const parsedOptions = (question) => {
  try {
    return JSON.parse(question.options || '[]')
  } catch (error) {
    console.error(`オプション解析エラー(${question.sortOrder}):`, error)
    return []
  }
}

// ラジオボタン選択時の処理
const handleRadioChange = (question, selectedOption) => {
  parsedOptions(question).forEach(opt => {
    opt.isAnswered = opt.optionId === selectedOption.optionId
  })
}

// 日付フォーマット変換（YYYY-MM-DD → YYYY/MM/DD）
const formatDate = (dateStr) => dateStr?.replace(/-/g, '/') || ''

// surveyCodeをパラメータにして前のページに戻る
const goBack = () => {
  tagsViewStore.delView(currentRoute).then(() => {
    router.push({
      name: 'surveyResults',
      params: { surveyCode: surveyCode.value }
    })
  })
}

// コンポーネント初期化時にデータロード
onMounted(() => loadSurveyData())
</script>

<style scoped>
.app-container {
  font-family: Arial, sans-serif;
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  min-height: 500px;
}

.survey-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.deadline {
  margin-left: 50%;
  color: #666;
  margin-bottom: 20px;
}

@media (max-width: 48em) {
  .app-container {
    width: 100%;
    padding: 15px;
  }
  .deadline {
    margin-left: 0;
    text-align: right;
  }
}

.question {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #0070c0;
}

.question:last-child {
  border-bottom: none;
}

.question-number {
  font-weight: bold;
  margin-right: 8px;
}

.question-text {
  margin-bottom: 10px;
  display: inline-block;
}

.options {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.option-item {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.option-item input {
  margin-right: 5px;
}

.dropdown select {
  margin-top: 10px;
  width: 260px;
  height: 30px;
  padding: 0 5px;
  border: 1px solid #ddd;
}

.text-area textarea {
  margin-top: 10px;
  width: 70%;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #ddd;
  resize: vertical;
  line-height: 1.7;
}

.back-button {
  background-color: #FF0066;
  border: none;
  padding: 10px 40px;
  cursor: pointer;
  width: 180px;
  height: 40px;
  display: block;
  margin-top: 20px;
  transition: background-color 0.2s;
  color: white;
  font-weight: bold;
}

.back-button:hover {
  background-color: #FF0066;
}
</style>