<template>
  <view class="d-flex flex-col bg-base">
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.content.value">
        <view class="d-flex flex-col p-3">
          <view class="d-flex flex-row justify-between">
            <view class="d-flex flex-col">
              <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.birthplace || loader.content.value.desc }}</text>
              <RoundTags
                :tags="loader.content.value.tags"
                :tags2="[
                  loader.content.value.age as string,
                  loader.content.value.nation as string
                ]"
              />
            </view>
            <image 
              class="width-150 height-150 radius-base flex-shrink-0" 
              :src="loader.content.value.image" mode="aspectFill"
            />
          </view>
          <view class="d-flex flex-col radius-l bg-light p-25 mt-3">
            <u-parse :content="loader.content.value.intro" :tagStyle="commonParserStyle"></u-parse>
            <u-parse :content="loader.content.value.content" :tagStyle="commonParserStyle"></u-parse>
            <u-parse :content="loader.content.value.value" :tagStyle="commonParserStyle"></u-parse>
          </view>
        </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";

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

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

</script>

<style lang="scss">

</style>
