<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.levelName }}</Text>
              <Text :fontSize="23" :text="`${item.villageName} ${item.vipLevel}级`" />
              <Text :fontSize="21" fontConfig="secondText">{{ item.payType === 1 ? '线上支付' : '对公付款' }}</Text>
            </FlexCol>
            <FlexRow gap="gap.xl">
              <FlexCol align="flex-end">
                <FlexRow align="center" gap="gap.sm">
                  <Text :fontSize="23" fontConfig="lightGoldTitle">￥</Text>
                  <Text fontConfig="lightGoldTitle">{{ item.price }}</Text>
                  <Width :width="10" />
                  <Tag size="small" :text="item.statusText" :type="getStatusTypeByStatusText(item.statusText)" />
                </FlexRow>
                <Text fontConfig="secondText">{{ item.createtime }}</Text>
              </FlexCol>
              <FrameButton
                v-if="item.status === 0"
                primary
                text="去支付"
                width="100rpx"
                size="small"
                @click="handlePay(item)"
              />
            </FlexRow>
          </Touchable>
        </BoxMid>
      </FlexCol>
    </SimplePageListLoader>

    <DirectPayDialog ref="directPayDialog" @success="handlePaySuccess" />
    <UploadVoucherDialog ref="uploadVoucherRef" @success="listLoader.load()" />
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useAuthStore } from '@/store/auth';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { showError } from '@/common/composeabe/ErrorDisplay';
import FlexCol from '@/components/layout/FlexCol.vue';
import TreeApi, { UpgradeOrderItem } 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';
import FrameButton from '@/common/components/FrameButton.vue';
import UploadVoucherDialog from './dialogs/UploadVoucherDialog.vue';
import DirectPayDialog from './dialogs/DirectPayDialog.vue';
import { backAndCallOnPageBack } from '@/components/utils/PageAction.js';

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.getUpgradeOrderList({
    page,
    pageSize,
    villageId: querys.value.villageId || undefined,
    userId: authStore.userId,
  });
  return {
    list: res.list,
    total: res.total,
  };
});

const directPayDialog = ref<InstanceType<typeof DirectPayDialog>>();
const uploadVoucherRef = ref<InstanceType<typeof UploadVoucherDialog>>();

function handlePay(item: UpgradeOrderItem) {
  if (item.payType === 2) {
    uploadVoucherRef.value?.open(item.id);
  } else if (item.payType === 1) {
    directPayDialog.value?.open(item.id);
  } else {
    showError('请使用微信支付完成付款');
  }
}

function handlePaySuccess() {
  backAndCallOnPageBack('handlePaySuccess', {});
}

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