<template>
  <FlexCol :innerStyle="{
    backgroundImage: 'url(https://xy.wenlvti.net/app_static/images/mine/TopBanner.png)',
    backgroundSize: '100% auto',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'top center',
    minHeight: '100vh',
  }">
    <StatusBarSpace />
    <NavBar :title="contentLoader.content.value?.title" leftButton="back" />
    <SimplePageContentLoader :loader="contentLoader">
      <template v-if="contentLoader.content.value">
        <ImageSwiper :images="contentLoader.content.value.images" />
        <FlexCol gap="gap.md" padding="space.md">
          <H2>{{ contentLoader.content.value.title }}</H2>
          <FlexRow align="center">
            <Text :text="contentLoader.content.value.nickName" />
          </FlexRow>
          <Parse :content="contentLoader.content.value.content || ''" />
        </FlexCol>
      </template>
    </SimplePageContentLoader>
    <FlexCol
      v-if="contentLoader.content.value" 
      position="fixed" 
      :inset="{ r: 0, b: 0, l: 0 }" 
    >
      <FlexRow
        padding="space.md" 
        justify="space-between"
      >
        <FlexRow align="center" gap="gap.md">
          <Avatar
            :image="contentLoader.content.value.avatar"
            :size="40"
          />
          <Text :text="contentLoader.content.value.nickName" fontConfig="contentText" />
        </FlexRow>
        <FlexRow align="center" gap="gap.md">
          <IconButton 
            icon="favorite"
            :text="contentLoader.content.value.likeCount.toString()"
            @click="handleLike"
          />
          <button class="remove-button-style" open-type="share">
            <IconButton 
              icon="share"
              :text="contentLoader.content.value.shareCount.toString()"
              @click="handleShare"
            />
          </button>
        </FlexRow>
      </FlexRow>
      <XBarSpace />
    </FlexCol>
  </FlexCol>
</template>

<script setup lang="ts">
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import FlexCol from '@/components/layout/FlexCol.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
import Parse from '@/components/display/parse/Parse.vue';
import H2 from '@/components/typography/H2.vue';
import Text from '@/components/basic/Text.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import IconButton from '@/components/basic/IconButton.vue';
import { toast } from '@/components/utils/DialogAction';
import Avatar from '@/components/display/Avatar.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';

const { querys } = useLoadQuerys({ 
  id: 0,
}, () => contentLoader.reload());

const contentLoader = useSimpleDataLoader(async () => {
  const res = await LightVillageApi.getMessageDetails(querys.value.id);
  uni.setNavigationBarTitle({ title: res.title });
  return res;
}, false);

async function handleLike() {
  toast('TODO!');
}
async function handleShare() {
  uni.share({
    title: contentLoader.content.value?.title,
    imageUrl: contentLoader.content.value?.images[0],
    path: `/pages/home/post/detail?id=${querys.value.id}`,
  });
}

onShareTimeline(() => {
  return {
    title: contentLoader.content.value?.title,
    imageUrl: contentLoader.content.value?.images[0],
    path: `/pages/home/post/detail?id=${querys.value.id}`,
  };
});
onShareAppMessage(() => {
  return {
    title: contentLoader.content.value?.title,
    imageUrl: contentLoader.content.value?.images[0],
    path: `/pages/home/post/detail?id=${querys.value.id}`,
  };
});
</script>