<template>
    <app-view class="order-detail g-form">
        <template #header>
            <app-navbar title="采购详情" />
        </template>
        <div v-if="detail" class="order-detail__container g-form__container">
            <CellGroup title="采购信息">
                <Cell title="商品" :value="detail.warehousename" />
                <Cell title="仓库" :value="detail.warehousename" />
                <Cell title="预售价" :value="detail.tradeprice" />
                <Cell title="数量" :value="detail.tradeqty" />
                <Cell title="定金" :value="detail.payeddeposit" />
                <Cell title="实际价" :value="detail.lastprice" />
                <Cell title="尾款" :value="detail.remainamount" />
                <Cell title="状态" :value="detail.orderstatus" />
                <Cell title="总货款" :value="detail.tradeamount" />
                <Cell title="摘牌时间：" :value="formatDate(detail.tradetime, 'YYYY/MM/DD HH:mm:ss')" />
            </CellGroup>
            <CellGroup title="提货信息">
                <Cell title="提货方式" :value="detail.thjdeliverymodedisplay" />
                <Cell title="联系人" :value="detail.contactname" v-if="detail.contactname" />
                <Cell title="联系方式" :value="detail.contactinfo" v-if="detail.contactinfo" />
                <Cell title="目的地地址" :value="detail.desaddress" v-if="detail.desaddress" />
                <Cell title="发票信息" :value="detail.receiptinfo" v-if="detail.receiptinfo" />
                <Cell title="合同单号" :value="detail.wrtradedetailid" :is-link="!!detail.contractaddrbuy"
                    @click="openPDF(detail?.contractaddrbuy)" />
            </CellGroup>
        </div>
        <div v-else>
            <Empty />
        </div>
        <template #footer>
            <div class="g-form__footer" v-if="detail">
                <Button block round type="primary" v-if="detail.orderstatus === 1" @click="showDialog">合同转让</Button>
                <Button block round type="primary" v-if="detail.orderstatus === 8" @click="spotCancelSubmit">转让撤销</Button>
                <Button block round type="primary" v-if="detail.orderstatus === 5"
                    @click="spotConfirmSubmit">确认交收</Button>
                <Button block round type="primary" v-if="detail.orderstatus === 3" @click="spotApplySubmit">违约</Button>
                <Button block round type="primary" v-if="detail.orderstatus === 3"
                    @click="spotPlaymentSubmit">支付</Button>
            </div>
        </template>

        <!-- 转让价格 -->
        <van-dialog v-model:show="show" title="合同转让" show-cancel-button @confirm="spotListingSubmit" @cancel="cancelDialog">
            <Field label="转让价格:" v-model="formData.TransferPrice" placeholder="请输入转让价格" type="digit"></Field>
        </van-dialog>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { useNavigation } from '@/hooks/navigation'
import { fullloading, dialog } from '@/utils/vant'
import { CellGroup, Cell, Empty, Button, Toast, Dialog, Field } from 'vant'
import { formatDate, getUrl } from '@/filters'
import { useSpotPresaleDeliveryConfirm, useSpotPresaleBreachOfContractApply, useSpotPresaleTransferCancel, useSpotPresaleTransferListing, useSpotPresalePlayment } from "@/business/trade";

const vanDialog=Dialog.Component

const { router } = useNavigation()
/// 是否显示dialog
const show = shallowRef(false)

const { confirmSubmit, detail } = useSpotPresaleDeliveryConfirm()
const { applySubmit } = useSpotPresaleBreachOfContractApply()
const { playmentSubmit } = useSpotPresalePlayment()
const { transferCancelSubmit } = useSpotPresaleTransferCancel()
const { listingSubmit, formData } = useSpotPresaleTransferListing()

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

/// 确认交收
const spotConfirmSubmit = () => {
    dialog('确认要交收吗？', {
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            confirmSubmit().then(() => {
                hideLoading()
                dialog('确认交收提交成功，请耐心等待审核。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                Toast.fail(err)
            })
        })
    })
}

/// 违约申请
const spotApplySubmit = () => {
    dialog('确认要违约吗？', {
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            applySubmit().then(() => {
                hideLoading()
                dialog('违约提交成功，请耐心等待审核。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                Toast.fail(err)
            })
        })
    })
}

/// 支付申请
const spotPlaymentSubmit = () => {
    dialog('确认要付款吗？', {
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            playmentSubmit().then(() => {
                hideLoading()
                dialog('付款提交成功，请耐心等待审核。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                Toast.fail(err)
            })
        })
    })
}

///合同转让申请
const spotListingSubmit = () => {
    dialog('确认要转让撤销吗？', {
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            listingSubmit().then(() => {
                hideLoading()
                dialog('合同转让提交成功，请耐心等待审核。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                Toast.fail(err)
            })
        })
    })
}

/// 转让撤销申请
const spotCancelSubmit = () => {
    dialog('确认要转让撤销吗？', {
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            transferCancelSubmit().then(() => {
                hideLoading()
                dialog('转让撤销提交成功，请耐心等待审核。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                Toast.fail(err)
            })
        })
    })
}

/// 是否显示Dialog
const showDialog = () => {
    show.value = !show.value
}

const cancelDialog = () => {
    show.value = false
}
</script>

<style lang="less">
@import './index.less';
</style>