<script setup lang="ts">
import ProjectsContent from '@/api/inherit/ProjectsContent';
import SimplePageContentLoader from '@/components/SimplePageContentLoader.vue';
import SimpleRichHtml from '@/components/SimpleRichHtml.vue';
import Box1 from '@/components/small/Box1.vue';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();
const data = useSimpleDataLoader(async () => 
  await ProjectsContent.getContentDetail(parseInt(route.query.id as string))
);
</script>

<template>
  <main class="main-bg main-bg2 d-flex flex-col align-center justify-center">
    <img class="main-image-button back" src="@/assets/images/Back.png" alt="" @click="router.back()">

    <div class="main-box2 d-flex flex-row align-center">
      <div class="d-flex flex-col align-center flex-one gap-base padding-top-ll">
        <img class="main-image-button fill" src="@/assets/images/PlayList/Button1.png" alt="" @click="router.push('/')">
        <img class="main-image-button fill disabled" src="@/assets/images/PlayList/Button2.png" alt="">
      </div>
      <div class="d-flex flex-row align-stretch flex-six margin-left-ll w-55 h-100">
        <SimplePageContentLoader :loader="data">
          <div class="d-flex flex-col align-stretch flex-six flex-shrink-1">
            <video :src="data.content.value?.video" class="w-100 h-100" :controls="true" :autoplay="true" />
          </div>
          <div class="d-flex flex-col align-stretch flex-four margin-left-base flex-shrink-1 w-30 gap-l">
            <Box1 class="desc h-50">
              <ScrollRect scroll="vertical">
                <h1>作品信息</h1>
                <p>{{ data.content.value?.desc }}</p>
                <SimpleRichHtml :catalog="false" :contents="[ data.content.value?.intro as string ]" :tag-style="{
                  img: 'max-width: 100%'
                }" />
              </ScrollRect>
            </Box1>
            
            <Box1 class="desc h-45">
              <img :src="data.content.value?.image" class="w-100 h-100" alt="">

            </Box1>
          </div>
        </SimplePageContentLoader>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.desc {
  text-align: center;

  h1 {
    font-size: 26px;
  }
  p {
    margin-bottom: 0;
  }
    
  :deep(.rich-html) {
    max-width: 100%;
    background-color: rgba(#fff, 0.7);
  }
}
</style>
