<template>
  <FlexCol gap="gap.md" padding="padding.md">
    <SimplePageContentLoader :loader="goodLoader">
      <template v-if="goodLoader.content.value">
        <BoxMid>
          <Image :src="goodLoader.content.value.image" :radius="20" width="100%" height="300rpx" mode="aspectFill" />
        </BoxMid>
        <BoxMid padding="padding.lg">
          <FlexRow justify="space-between" align="center" gap="gap.md">
            <FlexCol>
              <Text :text="goodLoader.content.value.name" fontConfig="titleText" />
              <Text :text="`出售：${goodLoader.content.value.price}元`" fontConfig="contentText" />
            </FlexCol>
            <FlexRow align="center" gap="gap.md">
              <Avatar 
                :src="goodLoader.content.value.avatar"
                :size="40"
              />
              <Text :text="`发布人: ${goodLoader.content.value.userName}`" fontConfig="contentText" />
            </FlexRow>
          </FlexRow>
          <Divider />
          <Text :text="goodLoader.content.value.description" fontConfig="contentText" />
        </BoxMid>
        <Height :height="160" />
        <PrimaryButton
          text="去咨询"
          width="500rpx"
          @click="handleConsult"
        />
      </template>
    </SimplePageContentLoader>
  </FlexCol>
</template>

<script setup lang="ts">
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';

const goodLoader = useSimpleDataLoader(async () => {
  return {
    id: 1,
    name: '乡源好物',
    image: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
    avatar: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
    userName: '张三',
    price: 100,
    originalPrice: 120,
    description: '产地:个手回匠风造畜，竹音编、钉踏、产地品有桶祖指，唐祖精选了众多好物伤，同防于国美彭柯细匠桶吴订单，规格图至于俗、猛火，贪级传译答于撑精。',
    content: '乡源好物',
    tags: ['乡源好物'],
    comments: ['乡源好物'],
    likes: ['乡源好物'],
  };
});


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