<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.wrstandardname" />
                <Cell title="参考价" :value="detail.tradeprice.toFixed(2)" />
                <Cell title="数量" :value="detail.tradeqty" />
                <Cell title="预付款(含定金)" :value="handleNumberValue(detail.payeddeposit.toFixed(2))" />
                <Cell title="付款比例" :value="parsePercent(detail.depositrate)" />
                <Cell title="预付金" :value="handleNumberValue(detail.transferprice.toFixed(2))" />
                <Cell title="实际价" :value="handleNumberValue(detail.lastprice.toFixed(2))" />
                <Cell title="尾款" :value="handleNumberValue(detail.remainamount.toFixed(2))" />
                <Cell title="状态" :value="detail.thjorderstatusdisplay" />
                <Cell title="采购时间" :value="formatDate(detail.tradetime)" />
                <Cell title="到期日期" :value="detail.enddate" />
            </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="发票信息" title-style="flex:none" v-if="detail.receiptinfo">
                    <template #value>
                        <div style="white-space: pre-line">{{ detail.receiptinfo }}</div>
                    </template>
                </Cell>
                <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.thjdeliverymode === 1 && detail.presalestatus === 2 && detail.orderstatus === 1"
                    @click="showDialog">合同转让</Button>
                <Button block round type="primary" v-if="detail.orderstatus === 9" @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>
        <!-- 转让价格 -->
        <Dialog class-name="order-detail__dialog" v-model:show="show" title="合同转让" show-cancel-button
            @confirm="spotListingSubmit" @cancel="cancelDialog">
            <input type="number" v-model="formData.TransferPrice" placeholder="请输入转让价格" />
        </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, showFailToast, Dialog } from 'vant'
import { formatDate, getUrl, handleNumberValue, parsePercent } from '@/filters'
import { useSpotPresaleDeliveryConfirm, useSpotPresaleBreachOfContractApply, useSpotPresaleTransferCancel, useSpotPresaleTransferListing, useSpotPresalePlayment } from "@/business/trade"
import plus from '@/utils/h5plus'

const { route, router } = useNavigation()
/// 是否显示dialog
const show = shallowRef(false)
const item = route.params.item
const detail = shallowRef<Model.THJPurchaseTradeDetailRsp>()

if (item) {
    detail.value = JSON.parse(item.toString())
}

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

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

/// 确认交收
const spotConfirmSubmit = () => {
    const param = detail.value
    if (param) {
        dialog({
            message: '确认要交收吗？',
            showCancelButton: true
        }).then(() => {
            fullloading((hideLoading) => {
                confirmSubmit(param.wrtradedetailid).then(() => {
                    hideLoading()
                    dialog('确认交收提交成功。').then(() => {
                        router.back()
                    })
                }).catch((err) => {
                    showFailToast(err)
                })
            })
        })
    }
}

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

/// 支付申请
const spotPlaymentSubmit = () => {
    const param = detail.value
    if (param) {
        dialog({
            message: '确认要付款吗？',
            showCancelButton: true
        }).then(() => {
            fullloading((hideLoading) => {
                playmentSubmit(param.wrtradedetailid).then(() => {
                    hideLoading()
                    dialog('付款提交成功。').then(() => {
                        router.back()
                    })
                }).catch((err) => {
                    showFailToast(err)
                })
            })
        })
    }
}

///合同转让申请
const spotListingSubmit = () => {
    const param = detail.value
    if (param) {
        fullloading((hideLoading) => {
            listingSubmit(param.wrtradedetailid).then(() => {
                hideLoading()
                dialog('合同转让提交成功。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                showFailToast(err)
            })
        })
    }
}

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

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

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

<style lang="less">
.order-detail {
    &__dialog {
        .van-dialog__content {
            padding: .48rem;

            input {
                width: 100%;
                font-size: .28rem;
                border: 1px solid #ddd;
                border-radius: .12rem;
                padding: .2rem;
            }
        }
    }
}
</style>