import { defineComponent, PropType, ref } from 'vue';
import { QueryErmcpOrderDetailsRsp } from '@/services/go/ermcp/futures/interface';
import { cancelOrderReq } from '@/services/socket/order';
import { message } from 'ant-design-vue';
import { geLoginID_number } from '@/services/bus/login';
import { CancelOrderReq } from '@/services/socket/order/interface/index';
import { getSelectedAccountId } from '@/services/bus/account';

// 期货订单-委托撤单
export const cancel = defineComponent({
    emits: ['cancel'],
    props: {
        selectedRow: {
            type: Object as PropType<QueryErmcpOrderDetailsRsp>,
            default: {},
        },
    },
    setup(props, { emit }) {
        const loading = ref(false);
        const show = ref(true);

        // 取消
        const cancel = () => {
            emit('cancel');
        }

        // 提交
        const submit = () => {
            loading.value = true;
            const { orderid, marketid, goodsid } = props.selectedRow;
            const param: CancelOrderReq = {
                OldOrderId: orderid,
                AccountID: getSelectedAccountId(), // uint64 资金账号
                OperatorID: geLoginID_number() ?? 0, // uint64 操作员账号ID
                MarketID: marketid,
                GoodsID: goodsid,
            };
            return cancelOrderReq(param).then(() => {
                message.success('撤单成功');
            }).catch(() => {
                message.error('撤单失败');
            }).finally(() => {
                loading.value = false;
                emit('cancel', true);
            })
        }

        return {
            loading,
            show,
            submit,
            cancel,
        }
    },
    render() {
        const slots = {
            footer: () => {
                return <>
                    <a-button class='cancelBtn' loading={this.loading} onClick={this.cancel}>取消</a-button>
                    <a-button type='primary' loading={this.loading} onClick={this.submit}>确认撤单</a-button>
                </>
            }
        }
        return <a-modal class='mtp-modal-confirm' v-model={[this.show, 'visible']} maskClosable={false} closable={false} v-slots={slots}>
            <span>是否撤单操作？</span>
        </a-modal>
    }
});