<template>
  <CommonDialog v-model:show="show" title="上传付款凭证" :showDivider="false">
    <FlexCol gap="gap.lg" padding="padding.md" width="600rpx">
      <template v-if="uploadStep === 'form'">
        <Text textAlign="center" text="请上传对公打款凭证图片" fontConfig="contentSpeicalText" />
        <Height :height="10" />
        <ProvideVar :vars="{ FieldBackgroundColor: 'transparent' }">
          <BoxMid>
            <DynamicForm
              ref="uploadFormRef"
              :model="uploadFormModel"
              :options="uploadFormDefine"
            />
          </BoxMid>
        </ProvideVar>
        <Height :height="20" />
        <FlexRow justify="space-around" gap="gap.md">
          <FrameButton text="取消" @click="show = false" width="220rpx" />
          <FrameButton primary text="提交凭证" @click="handleSubmitProof" :loading="submitLoading" width="220rpx" />
        </FlexRow>
      </template>
      <template v-else-if="uploadStep === 'finished'">
        <Result
          status="success"
          title="感谢您的贡献！"
          description="凭证已提交，等待系统审核完成后生效。"
        />
        <FlexRow justify="space-around" gap="gap.md">
          <FrameButton primary text="完成" @click="handleFinish" width="220rpx" />
        </FlexRow>
      </template>
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { toast } from "@/components/dialog/CommonRoot";
import { useAliOssUploadCo } from "@/common/components/upload/AliOssUploadCo";
import { showError } from "@/common/composeabe/ErrorDisplay";
import type { IDynamicFormOptions, IDynamicFormRef } from "@/components/dynamic";
import type { UploaderFieldProps } from "@/components/form/UploaderField.vue";
import CommonDialog from "@/common/components/CommonDialog.vue";
import FrameButton from "@/common/components/FrameButton.vue";
import FlexCol from "@/components/layout/FlexCol.vue";
import FlexRow from "@/components/layout/FlexRow.vue";
import Height from "@/components/layout/space/Height.vue";
import Text from "@/components/basic/Text.vue";
import DynamicForm from "@/components/dynamic/DynamicForm.vue";
import Result from "@/components/feedback/Result.vue";
import ProvideVar from "@/components/theme/ProvideVar.vue";
import BoxMid from "@/common/components/box/BoxMid.vue";
import TreeApi from "@/api/light/TreeApi";

const emit = defineEmits(['success']);

const show = ref(false);
const uploadStep = ref<'form' | 'finished'>('form');
const submitLoading = ref(false);
const uploadFormRef = ref<IDynamicFormRef>();
const uploadFormModel = ref({ payVoucher: '' });
const orderId = ref<number>(0);

const uploadFormDefine: IDynamicFormOptions = {
  formAdditionaProps: {
    labelPosition: 'top',
  },
  formItems: [
    {
      label: '付款凭证',
      name: 'payVoucher',
      type: 'uploader',
      additionalProps: {
        single: true,
        maxFileSize: 1024 * 1024 * 10,
        upload: useAliOssUploadCo('xiangyuan/upgrade/voucher'),
      } as UploaderFieldProps,
      rules: [{ required: true, message: '请上传付款凭证' }],
    },
  ],
};

async function handleSubmitProof() {
  if (!uploadFormRef.value) return;
  try {
    await uploadFormRef.value.validate();
  } catch {
    toast({ content: '请上传付款凭证' });
    return;
  }

  try {
    submitLoading.value = true;
    await TreeApi.saveUpgrade(orderId.value, uploadFormModel.value.payVoucher);
    toast({ content: '提交成功' });
    uploadStep.value = 'finished';
    emit('success');
  } catch (e) {
    showError(e);
  } finally {
    submitLoading.value = false;
  }
}

function handleFinish() {
  show.value = false;
}

defineExpose({
  open(id: number) {
    orderId.value = id;
    uploadStep.value = 'form';
    uploadFormModel.value = { payVoucher: '' };
    show.value = true;
  },
});
</script>
