<template>
  <CommonTopBanner title="我的赐福订单">
    <SimplePageListLoader :loader="listLoader" :emptyView="{ text: '冷冷清清，等你来添光加彩' }">
      <FlexCol gap="gap.md">
        <BackgroundBox
          v-for="item in listLoader.list.value"
          :key="item.id" 
          direction="row"
          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
          :backgroundCutBorder="30"
          :backgroundCutBorderSize="30"
          :padding="[16, 30]"
        >
          <Touchable
            :gap="20"
            :padding="[15,20]"
            touchable
            flex="1"
            direction="row"
            justify="space-between"
            align="center"
          >
            <FlexCol>
              <Text fontConfig="lightImportantTitle">{{ item.blessName }}</Text>
              <Text :size="23" :text="`${item.villageName} ${item.addLight}乡源光/${item.addFruit}乡源果`" />
            </FlexCol>
            <FlexCol>
              <FlexRow align="center" gap="gap.sm">
                <Text :size="23" fontFamily="SongtiSCBlack">￥</Text>
                <Text :size="40" fontFamily="SongtiSCBlack">{{ item.amount }}</Text>
              </FlexRow>
              <Text :size="23">{{ item.createtime }}</Text>
            </FlexCol>
          </Touchable>
        </BackgroundBox>
      </FlexCol>
    </SimplePageListLoader>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import FlexCol from '@/components/layout/FlexCol.vue';
import TreeApi from '@/api/light/TreeApi';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Text from '@/components/basic/Text.vue';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useAuthStore } from '@/store/auth';
import FlexRow from '@/components/layout/FlexRow.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';

const { querys } = useLoadQuerys({
  villageId: 0,
}, () => {
  listLoader.load();
});
const authStore = useAuthStore();

const listLoader = useSimplePageListLoader(10, async (page, pageSize) => {
  if (!querys.value.villageId || !authStore.userId) {
    return {
      list: [],
      total: 0,
    };
  }
  const res = await TreeApi.getBlessOrders({
    page,
    pageSize,
    villageId: querys.value.villageId || undefined,
    userId: authStore.userId,
  });
  return {
    list: res.list,
    total: res.total,
  };
});

</script>