<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { Vue3Marquee } from 'vue3-marquee';
import CommonContent from '@/api/CommonContent';
import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/SimpleRichHtml.vue';
import Header from '@/components/parts/Header.vue';
import ImageLine from '@/components/small/ImageLine.vue';
import ImagePreview from '@/components/small/ImagePreview.vue';

const route = useRoute();
const router = useRouter();
const loader = useSimpleDataLoader(async () => {
  return (await CommonContent.getContentDetail(Number(route.query.id)));
});

const showPreview = ref(false);
const activeItem = ref(0);

</script>

<template>
  <main class="main-content main-bg main-bg1">
    <Header show-back absolute />
    <SimplePageContentLoader :loader="loader">
      <div class="content absolute">
        <div class="left" :style="{
          backgroundImage: `url(${loader.content.value?.image})`,
        }">
        </div>
        <div class="right">
          <h1>{{ loader.content.value?.title }}</h1>
          <Vue3Marquee style="width:100%;" :duration="70" vertical>
            <SimpleRichHtml :contents="[ loader.content.value?.content as string ]" noScroll />
          </Vue3Marquee>
          <ImageLine 
            :data="loader.content.value?.images"
            :max-count="5" 
            image-height="20vh"
            @itemClick="(v, i) => { showPreview = true; activeItem = i }"
            @moreClick="showPreview = true; activeItem=5"
          />
        </div>
      </div>
    </SimplePageContentLoader>
    <ImagePreview 
      v-model:active-item="activeItem"
      v-model:show="showPreview"
      :list="loader.content.value?.images"
    />
  </main>
</template>

<style lang="scss" scoped>

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(90deg, rgba(240, 235, 222, 0.1) 0%, #f0ebde 15%, #f0ebde 100%);
  font-size: 0.8rem;
  color: var(--color-text);
  padding: 8%;
  padding-left: 20%;
  display: flex;
  flex-direction: column;

  h1 {
    font-size: 1rem;
    color: var(--color-text-primary);
  }

  :deep(.image-line) { 
    margin-top: 4%;
  }
}

@media (max-height: 600px) {
}

</style>
