<template>
  <CommonTopBanner
    title="对公打款"
    showNav
  >
    <FlexCol padding="padding.md">
      <SimplePageContentLoader :loader="loader">
        <template v-if="loader.content.value">
          <FlexCol :gap="20">
            <FlexCol :padding="20" :radius="20">
              <Parse
                v-if="loader.content.value.content"
                :content="loader.content.value.content"
              />
              <Text v-else="emptyContent" fontConfig="subText">暂无对公打款说明，请在后台补充！</Text>
            </FlexCol>
          </FlexCol>
        </template>
      </SimplePageContentLoader>

      <FlexCol gap="gap.md">
        <FrameButton text="下载对公打款材料" @click="handleDownloadMaterial()" />
        <FrameButton primary text="我已打款上传凭证" @click="handleUploadProof()" />
      </FlexCol>

      <UploadVoucherDialog ref="uploadVoucherRef" />
    </FlexCol>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useSimpleDataLoader } from "@/components/composeabe/loader/SimpleDataLoader";
import { useLoadQuerys } from "@/components/composeabe/LoadQuerys";
import { showError } from "@/common/composeabe/ErrorDisplay";
import type { GetContentDetailItem } from "@/api/CommonContent";
import SimplePageContentLoader from "@/components/loader/SimplePageContentLoader.vue";
import Parse from "@/components/display/parse/Parse.vue";
import CommonContent from "@/api/CommonContent";
import CommonTopBanner from "@/common/components/CommonTopBanner.vue";
import FrameButton from "@/common/components/FrameButton.vue";
import FlexCol from "@/components/layout/FlexCol.vue";
import Text from "@/components/basic/Text.vue";
import TreeApi from "@/api/light/TreeApi";
import UploadVoucherDialog from "./dialogs/UploadVoucherDialog.vue";

const loader = useSimpleDataLoader<
  GetContentDetailItem,
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  const res = await CommonContent.getContentDetail(params.id);
  return res;
});

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

onMounted(() => {
  loader.load(false, { id: 7019 });
});

async function handleDownloadMaterial() {
  if (!loader.content.value?.archives) {
    showError('暂无对公打款附件(archives)，请在后台补充！')
    return
  }
  try {
    uni.showLoading({
      title: '下载中...'
    })
    const filePath = await new Promise<string>((resolve, reject) => {
      uni.downloadFile({
        url: loader.content.value!.archives as string,
        success: (res) => {
          if (res.statusCode === 200) {
            resolve(res.tempFilePath)
          } else {
            reject('材料下载失败')
          }
        }
      })
    });
    uni.openDocument({
      filePath,
      showMenu: true
    })
  } catch (error) {
    showError(error as string)
  } finally {
    uni.hideLoading()
  }
}

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

async function handleUploadProof() {
  if (!querys.value.villageId || !querys.value.upgradePackageId) {
    showError('缺少必要参数');
    return;
  }
  try {
    uni.showLoading({ title: '创建订单中...' });
    const result = await TreeApi.createUpgradeOrder(
      querys.value.villageId,
      querys.value.upgradePackageId,
      2,
    );
    uploadVoucherRef.value?.open(result.order.id);
  } catch (e) {
    showError(e);
  } finally {
    uni.hideLoading();
  }
}
</script>
