vue_website_template/src/views/about/HistoryView.vue

// scr/views/about/HistoryView.vue
<template>
  <div class="container mx-auto px-4 md:px-8 lg:px-16 py-12">
    <div class="text-center mb-12">
      <h1 class="text-3xl font-bold text-blue-800">
        {{ activePeriodContent ? (appStore.checkLang.isTh ? activePeriodContent.period_th : activePeriodContent.period_en) : (appStore.checkLang.isTh ? 'ประวัติบริษัท' : 'Company History') }}
      </h1>
      <p class="mt-3 text-lg opacity-90 text-gray-700">
        {{ appStore.checkLang.isTh ? 'เรื่องราวการเดินทางขององค์กร ตั้งแต่อดีตจนถึงปัจจุบัน' : 'The journey of our organization, from past to present' }}
      </p>
    </div>

    <!-- Tabs -->
    <div role="tablist" class="flex flex-wrap space-x-2 border-b border-gray-300">
      <button
          v-for="period in historyPeriods"
          :key="period.id"


          class="px-4 py-2 text-sm font-medium transition-all duration-200 border-b-2 whitespace-nowrap"
          :class="{
          'border-blue-700 text-blue-700': activePeriodId === period.id,
          'border-transparent text-gray-500 hover:text-blue-700 hover:border-blue-500': activePeriodId !== period.id
        }"
          @click="selectPeriod(period.id)"
      >
        {{ appStore.checkLang.isTh ? period.attributes.period_th : period.attributes.period_en }}
      </button>
    </div>

    <!-- Loading -->
    <div v-if="aboutUsStore.isLoading.history" class="text-center py-10">
      <span class="loading loading-spinner loading-lg text-primary"></span>
      <p class="mt-4 text-lg text-gray-500">{{ appStore.checkLang.isTh ? 'กำลังโหลดประวัติบริษัท...' : 'Loading company history...' }}</p>
    </div>

    <!-- Error -->
    <div v-else-if="aboutUsStore.errors.history" class="text-center text-error py-10">
      <p class="text-xl">{{ appStore.checkLang.isTh ? 'เกิดข้อผิดพลาดในการโหลดข้อมูลประวัติบริษัท' : 'Error loading company history data.' }}</p>
      <p class="text-sm">{{ aboutUsStore.errors.history }}</p>
    </div>

    <!-- Content -->
    <div v-else-if="activePeriodContent" class="grid md:grid-cols-2 gap-12 items-start mt-10">
      <!-- Image -->
      <div>
        <figure v-if="activePeriodContent.imageUrl" class="relative w-full h-80 md:h-[28rem] overflow-hidden rounded-xl shadow-lg">
          <img :src="activePeriodContent.imageUrl" class="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105" />
          <figcaption v-if="activePeriodContent.image_caption_th || activePeriodContent.image_caption_en"
                      class="absolute bottom-0 w-full bg-black/60 text-white text-sm p-2 text-center rounded-b-xl">
            {{ appStore.checkLang.isTh ? activePeriodContent.image_caption_th : activePeriodContent.image_caption_en }}
          </figcaption>
        </figure>
        <div v-else class="w-full h-80 bg-gray-200 rounded-xl flex items-center justify-center text-gray-500">
          {{ appStore.checkLang.isTh ? 'ไม่มีรูปภาพ' : 'No Image Available' }}
        </div>
      </div>

      <!-- Text Content -->
      <div class="prose lg:prose-xl max-w-none text-justify text-gray-700">
        <p v-html="appStore.checkLang.isTh ? activePeriodContent.paragraph1 : activePeriodContent.paragraph1_en"></p>
        <p v-html="appStore.checkLang.isTh ? activePeriodContent.paragraph2 : activePeriodContent.paragraph2_en" class="mt-4"></p>
      </div>
    </div>

    <!-- No Data -->
    <div v-else class="text-center text-gray-400 py-16">
      <p class="text-xl">{{ appStore.checkLang.isTh ? 'ไม่พบข้อมูลสำหรับช่วงเวลานี้' : 'No data found for this period.' }}</p>
    </div>
  </div>
</template>


<script setup>
import { onMounted, watch, computed, ref } from 'vue';
import { useAppStore } from '@/stores/app.js';
import { useAboutUsStore } from '@/stores/aboutUsStore.js';

const appStore = useAppStore();
const aboutUsStore = useAboutUsStore();

const activePeriodId = ref('');
const useGold = true // true = สีทอง, false = สีฟ้า
const historyPeriods = computed(() => {
  return aboutUsStore.historyData || [];
});

const activePeriodContent = computed(() => {
  if (!historyPeriods.value || historyPeriods.value.length === 0) return null;
  const foundPeriod = historyPeriods.value.find(p => p.id === activePeriodId.value);
  return foundPeriod ? foundPeriod.attributes : null;
});

const selectPeriod = (id) => {
  activePeriodId.value = id;
};

onMounted(() => {
  aboutUsStore.fetchHistory().then(() => {
    if (historyPeriods.value && historyPeriods.value.length > 0) {
      activePeriodId.value = historyPeriods.value[0].id;
    }
  });
});

watch(() => appStore.checkLang.isTh, (newVal) => {
  // ไม่ได้เปลี่ยนแท็บเมื่อภาษาเปลี่ยน เพราะข้อมูลมาจาก mock data ใน aboutUsStore
  // ซึ่งมีทั้ง TH/EN ใน object เดียวกันแล้ว
  // หากเปลี่ยนไปใช้ API ที่มี locale ในการดึงข้อมูล คุณอาจต้อง force re-fetch และตั้ง active tab ใหม่
});
</script>

<style scoped>
/* Custom CSS สำหรับ override หรือเพิ่มเติมนอกเหนือจาก Utility Classes ที่ Tailwind/DaisyUI มีให้ */

/* กำหนดสีหลักสำหรับพื้นหลังหัวข้อ */
.bg-primary {
  background-color: #1b3872; /* Dark blue */
}

/* DaisyUI .tabs และ .tab มีโครงสร้างของมันเอง เราแค่ override หรือเพิ่มเติมนิดหน่อย */
/* .tabs-boxed โดยปกติจะมีพื้นหลังสีอ่อนและแท็บ active มีพื้นหลังสีหลัก */

.tabs .tab {
  /* สีข้อความของแท็บปกติ */
  color: #6b7280; /* text-gray-500 */
}

.tabs .tab:hover {
  /* สีข้อความเมื่อ hover */
  color: #2563eb; /* text-blue-700 */
}

.tabs .tab-active {
  /* สีข้อความและพื้นหลังของแท็บที่ active */
  color: #FFFFFF; /* ข้อความสีขาว */
  background-color: #2563eb; /* background-blue-700 (หรือสี primary ของ theme DaisyUI) */
}

/* รูปภาพและคำบรรยาย (เหล่านี้ส่วนใหญ่จัดการได้ด้วย Tailwind utility classes แล้ว) */
/*
   เนื่องจากเราใช้ absolute positioning สำหรับ figcaption ตอนนี้
   เราอาจจะต้องปรับ CSS ส่วนนี้เล็กน้อย
*/
.prose :deep(img) {
  /* ลบ margin: 0 auto; ถ้ามีผลกระทบกับ figure ที่เป็น relative และ absolute figcaption */
  /* ในกรณีนี้ figcaption อยู่ใน figure ที่มี h-64/h-96 ดังนั้น img ควรจะ cover เต็มพื้นที่ */
  max-width: 100%;
  height: auto; /* หรือ h-full ถ้าอยู่ใน container ที่กำหนดความสูง */
  display: block;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.prose p {
  margin-bottom: 1.25em;
  line-height: 1.75;
}

.tab::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 3px;
  width: 0;
  background-color: transparent;
  transition: width 0.3s ease;
}

.tab:hover::after {
  width: 100%;
  background-color: #3b82f6; /* สีฟ้า */
}

</style>