<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } 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';
import { CommonHtmlStyles } from '@/composeable/HtmlStyles';

const emit = defineEmits(['contentLoaded','back']);

const props = defineProps({
  customBack: {
    type: Boolean,
    default: false,
  },
})

const route = useRoute();
const loader = useSimpleDataLoader(async () => {
  const content = (await CommonContent.getContentDetail(Number(route.query.id)));
  emit('contentLoaded', content);
  return content;
});

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

watch(route, () => loader.loadData(undefined, true));

</script>

<template>
  <main class="main-content main-bg main-bg1">
    <Header show-back absolute :custom-back="customBack" @back="emit('back')" />
    <div class="content absolute">
      <SimplePageContentLoader :loader="loader">
        <div class="left" :style="{ backgroundImage: `url(${loader.content.value?.image})` }" />
        <div class="right">
          <h1>{{ loader.content.value?.title }}</h1>
          <slot name="afterTitle" :content="loader.content.value" />
          <slot name="content" :content="loader.content.value">
            <video v-if="loader.content.value?.video" :src="loader.content.value?.video" autoplay controls style="width:100%;height: 60vh;" />
            <Vue3Marquee v-else style="width:100%;" :duration="70" :delay="10" vertical>      
              <div class="d-flex flex-col w-100">
                <slot name="beforeContent" :content="loader.content.value" />
                <SimpleRichHtml :contents="[ loader.content.value?.content as string || '暂无' ]" noScroll :tagStyle="CommonHtmlStyles" />
                <slot name="afterContent" :content="loader.content.value" />
                <audio v-if="loader.content.value?.audio" :src="loader.content.value?.audio" controls />
              </div>
            </Vue3Marquee>
          </slot>
          <ImageLine 
            :data="loader.content.value?.images"
            :max-count="5" 
            image-height="10vh"
            @itemClick="(v, i) => { showPreview = true; activeItem = i }"
            @moreClick="showPreview = true; activeItem=5"
          />
        </div>
      </SimplePageContentLoader>
    </div>
    <ImagePreview 
      v-model:active-item="activeItem"
      v-model:show="showPreview"
      :list="loader.content.value?.images"
    />
  </main>
</template>

<style lang="scss" scoped>
.content {
  overflow: hidden;
  width: 100%;
  max-height: 100vh;

  :deep(.error) {
    padding-top: 200px;
    height: 100%;
  }
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60vw;
  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: 0 8%;
  padding-top: 100px;
  padding-bottom: 6%;
  padding-left: 20%;
  display: flex;
  flex-direction: column;

  h1 {
    font-size: 1rem;
    color: var(--color-text-primary);
    width: 100%;
    text-align: left;
  }
  h3, :deep(h3) { 
    width: 100%;
    text-align: left;
  }

  :deep(.image-line) { 
    margin-top: 4%;
  }
  :deep(.tab-container) { 
    margin-top: 2%;
  }
  :deep(.vue-scroll-rect) {
    flex: 1 1 0%;
    min-height: 0;
  }
  :deep(.common-list) {
    flex: 1 1 0%;
    min-height: 0;
  }
  :deep(video) { 
    width: 100%;
    height: 50%;
  }
}

@media (max-height: 800px) {
  .right {
    padding-top: 100px;
    padding-bottom: 4%;
  }
}
@media (max-height: 400px) {
  .right {
    padding-top: 100px;
    padding-bottom: 2%;
  }
}

</style>
