<template>
  <CommonTopBanner title="我的赐福订单">
    <SimplePageListLoader :loader="listLoader" :emptyView="{ text: '冷冷清清，等你来添光加彩' }">
      <FlexCol gap="gap.md" padding="padding.md">
        <BoxMid
          v-for="item in listLoader.list.value"
          :key="item.id" 
          direction="row"
          :padding="[16, 30]"
        >
          <Touchable
            :gap="20"
            :padding="[15,20]"
            touchable
            flex="1"
            direction="row"
            justify="space-between"
            align="center"
          >
            <FlexCol>
              <Text fontConfig="lightImportantTitle" fontFamily="SongtiSCBlack">{{ item.blessName }}</Text>
              <Text :fontSize="23" :text="`${item.villageName} ${item.addLight}乡源光/${item.addFruit}乡源果`" />
            </FlexCol>
            <FlexCol align="flex-end">
              <FlexRow align="center" gap="gap.sm">
                <Text :fontSize="23" fontConfig="lightGoldTitle">￥</Text>
                <Text fontConfig="lightGoldTitle">{{ item.amount }}</Text>
                <Width :width="10" />
                <Tag size="small" :text="item.statusText" :type="getStatusTypeByStatusText(item.statusText)" />
              </FlexRow>
              <Text fontConfig="secondText">{{ item.createtime }}</Text>
            </FlexCol>
          </Touchable>
        </BoxMid>
      </FlexCol>
    </SimplePageListLoader>
  </CommonTopBanner>
</template>

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

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

const listLoader = useSimplePageListLoader(20, 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,
  };
});

function getStatusTypeByStatusText(statusText: string): 'warning' | 'success' | 'default' {
  switch (statusText) {
    case '待支付':
      return 'warning';
    case '已支付':
      return 'success';
    default:
      return 'default';
  }
}
</script>