<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.warehousename" />
                <Cell title="类型" :value="detail.wrtradetype === 1 ? '挂牌' : '摘牌'" />
                <Cell title="方向" :value="detail.tradeqty" />
                <Cell title="委托价格" :value="detail.fixedprice.toFixed(2)" />
                <Cell title="挂牌数量" :value="detail.orderqty" />
                <Cell title="撤销数量" :value="detail.cancelqty" />
                <Cell title="委托时间" :value="formatDate(detail.ordertime, 'YYYY/MM/DD HH:mm:ss')" />
                <Cell title="状态" :value="detail.wrtradeorderstatus" />
                <Cell title="委托单号：" :value="detail.wrtradeorderid" />
            </CellGroup>
        </div>
        <div v-else>
            <Empty />
        </div>
        <template #footer>
            <div class="g-form__footer" v-if="detail">
                <Button block v-if="detail.wrtradeorderstatus === (3 | 7)" round type="primary"
                    @click="spotConfirmSubmit">撤销</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, Toast } from 'vant'
import { formatDate } from "@/filters";
import { useWrListingCancelOrder } from "@/business/trade"

const { router } = useNavigation()

const { cancelSubmit, detail } = useWrListingCancelOrder()

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

</script>