<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="getBuyOrSellName(detail.buyorsell)" />
                <Cell title="委托价格" :value="detail.fixedprice.toFixed(2)" />
                <Cell title="挂牌数量" :value="detail.orderqty" />
                <Cell title="撤销数量" :value="detail.cancelqty" />
                <Cell title="委托时间" :value="formatDate(detail.ordertime)" />
                <Cell title="状态" :value="getWRTradeOrderStatusName(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="[3, 7].includes(detail.wrtradeorderstatus)" round type="primary"
                    @click="spotConfirmSubmit">撤销</Button>
            </div>
        </template>
    </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 } from 'vant'
import { getWRTradeOrderStatusName } from '@/constants/order'
import { formatDate } from '@/filters'
import { getBuyOrSellName } from '@/constants/order'
import { useWrListingCancelOrder } from "@/business/trade"

const { router } = useNavigation()
const { route } = useNavigation()
const item = route.params.item
const detail = shallowRef<Model.WrOrderDetailRsp>()

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

const { cancelSubmit } = useWrListingCancelOrder()

/// 确认撤销
const spotConfirmSubmit = () => {
    const param = detail.value
    if (param) {
        dialog({
            message: '确认要撤销吗？',
            showCancelButton: true
        }).then(() => {
            fullloading((hideLoading) => {
                cancelSubmit(param.wrtradeorderid, param.buyorsell).then(() => {
                    hideLoading()
                    dialog('撤销请求成功。').then(() => {
                        router.back()
                    })
                }).catch((err) => {
                    showFailToast(err)
                })
            })
        })
    }

}
</script>