<template>
  <CommonTopBanner title="乡源好物详情">
    <FlexCol gap="gap.md" padding="padding.md">
    <SimplePageContentLoader :loader="goodLoader">
      <template v-if="goodLoader.content.value">
        <BoxMid>
          <ImageSwiper 
            :images="goodLoader.content.value.images"
            :radius="20" 
            width="100%" 
            height="350rpx" 
            mode="aspectFill" 
          />
        </BoxMid>
        <BoxMid padding="padding.lg">
          <FlexRow justify="space-between" align="center" gap="gap.md">
            <FlexCol>
              <Text :text="goodLoader.content.value.title" fontConfig="titleText" />
              <Text :text="`出售：${goodLoader.content.value.price}元`" fontConfig="contentText" />
            </FlexCol>
            <FlexRow align="center" gap="gap.md">
              <Avatar 
                :src="goodLoader.content.value.villageVolunteerAvatar"
                :size="40"
              />
              <Text :text="`发布人: ${goodLoader.content.value.villageVolunteerName}`" fontConfig="contentText" />
            </FlexRow>
          </FlexRow>
          <Divider />
          <Parse :content="goodLoader.content.value.content" fontConfig="contentText" />
        </BoxMid>
        <Height :height="160" />
        <FlexRow center>
          <PrimaryButton
            text="去咨询"
            width="500rpx"
            @click="handleConsult"
          />
        </FlexRow>
      </template>
    </SimplePageContentLoader>
    </FlexCol>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { toast } from '@/components/utils/DialogAction';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Avatar from '@/components/display/Avatar.vue';
import Divider from '@/components/display/Divider.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import PrimaryButton from '@/common/components/PrimaryButton.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import VillageInfoApi from '@/api/inhert/VillageInfoApi';
import Parse from '@/components/display/parse/Parse.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';

const { querys } = useLoadQuerys({
  id: 0,
});

const goodLoader = useSimpleDataLoader(async () => {
  return await VillageInfoApi.getInfoForDiscover(querys.value.id);
});


const handleConsult = () => {
  toast('暂未开放，敬请期待！');
};
</script>
