<template>
    <app-view class="transfer-detail g-form">
        <template #header>
            <app-navbar title="订单详情" />
        </template>
        <div v-if="details" class="transfer-detail__container g-form__container">
            <CellGroup title="转让信息">
                <Cell title="商品" :value="details.wrstandardname" />
                <Cell title="参考价" :value="details.tradeprice.toFixed(2)" />
                <Cell title="转让价格" :value="details.transferprice.toFixed(2)" />
                <Cell title="数量" :value="details.transferqty" />
                <Cell title="转让金额" :value="details.transferamount.toFixed(2)" />
                <Cell title="预付款(含定金)" :value="handleNumberValue(details.payeddeposit.toFixed(2))" />
                <Cell title="付款比例" :value="parsePercent(details.depositrate)" />
                <Cell title="状态" :value="getTHJTransferStatusName(details.transferstatus)" />
                <Cell title="转让时间" :value="formatDate(details.createtime)" />
                <Cell title="到期日期" :value="details.enddate" />
            </CellGroup>
            <CellGroup title="交收信息">
                <Cell title="交收方式" :value="getTHJDeliveryModeName(details.thjdeliverymode)" />
                <Cell title="联系人" :value="details.contactname" v-if="details.contactname" />
                <Cell title="联系方式" :value="details.contactinfo" v-if="details.contactinfo" />
                <Cell title="目的地地址" :value="details.desaddress" v-if="details.desaddress" />
                <Cell title="发票信息" title-style="flex:none" v-if="details.receiptinfo">
                    <template #value>
                        <div style="white-space: pre-line">{{ details.receiptinfo }}</div>
                    </template>
                </Cell>
                <Cell title="合同单号" :value="details.transferid" :is-link="!!details.contractaddr"
                    @click="openPDF(details?.contractaddr)" />
            </CellGroup>
        </div>
        <div v-else>
            <Empty />
        </div>
        <template #footer>
            <div class="g-form__footer" v-if="details">
                <Button block round type="primary" v-if="details.transferstatus === 1" @click="spotCancelSubmit">撤销</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { useNavigation } from '@/hooks/navigation'
import { fullloading, dialog } from '@/utils/vant'
import { CellGroup, Cell, Empty, Button, showFailToast } from 'vant'
import { getUrl } from '@/filters'
import { getTHJTransferStatusName, getTHJDeliveryModeName } from '@/constants/order'
import { useRequest } from '@/hooks/request'
import { queryTHJPurchaseTransferOrderDetail } from '@/services/api/order'
import { useSpotPresaleTransferCancel } from "@/business/trade"
import { handleNumberValue, parsePercent, formatDate } from '@/filters'
import plus from '@/utils/h5plus'

const { router, getQueryString } = useNavigation()
const { transferCancelSubmit } = useSpotPresaleTransferCancel()
const { data: details } = useRequest(queryTHJPurchaseTransferOrderDetail, {
    params: {
        transferid: getQueryString('id')
    }
})

// 打开pdf文件
const openPDF = (file?: string) => {
    if (file) {
        plus.openURL(getUrl(file).href)
    }
}

/// 转让撤销申请
const spotCancelSubmit = () => {
    dialog({
        message: '确认要转让撤销吗？',
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            transferCancelSubmit(details.value?.wrtradedetailid).then(() => {
                hideLoading()
                dialog('转让撤销提交成功。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                showFailToast(err)
            })
        })
    })
}
</script>