<template>
  <view class="d-flex flex-col bg-base">
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.content.value">
        <view class="d-flex flex-col">
          <video 
            v-if="loader.content.value.audio"
            class="video w-100"
            autoplay
            :poster="loader.content.value.image"
            :src="loader.content.value.audio"
            controls
          />
          <video
            v-else-if="loader.content.value.video"
            class="video w-100"
            autoplay
            :poster="loader.content.value.image"
            :src="loader.content.value.video"
            controls
          />
          <ImageSwiper v-else :images="loader.content.value.images" />
          <view class="d-flex flex-col text-align-center mt-3 p-3">
            <text class="size-lll font-bold color-text-content">{{ loader.content.value.title }}</text>
            <text class="size-base color-text-content-second mt-2">{{ loader.content.value.desc }}</text>
          </view>

          <view class="d-flex flex-col radius-l bg-light p-25 mt-3">
            <u-parse 
              v-if="loader.content.value.intro"
              :content="loader.content.value.intro"
              :tagStyle="commonParserStyle"
            ></u-parse>
            <u-parse 
              v-if="loader.content.value.content"
              :content="loader.content.value.content"
              :tagStyle="commonParserStyle"
            ></u-parse>
            <u-parse 
              v-if="loader.content.value.value"
              :content="loader.content.value.value"
              :tagStyle="commonParserStyle"
            ></u-parse>
          </view>

          <ContentNote />
        </view>
      </template>
    </SimplePageContentLoader>
  </view>
</template>
<script setup lang="ts">
import type { GetContentDetailItem } from "@/api/CommonContent";
import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
import { onLoad } from "@dcloudio/uni-app";
import { navTo } from "@/common/utils/PageAction";
import UnmoveableContent from "@/api/inheritor/UnmoveableContent";
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import ImageWrapper from "@/common/components/ImageWrapper.vue";
import RoundTags from "@/pages/parts/RoundTags.vue";
import commonParserStyle from "@/common/style/commonParserStyle";
import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
import ImageSwiper from "@/pages/parts/ImageSwiper.vue";
import ContentNote from "@/pages/parts/ContentNote.vue";

const loader = useSimplePageContentLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  const d = await UnmoveableContent.getContentDetail(params.id);
  console.log(d)
  return d;
});

useLoadQuerys({ id : 0 }, (p) => loader.loadData(p));

</script>

<style lang="scss">

</style>
