<template>
    <!-- 仓单贸易&仓单预售 买/卖 摘牌 -->
    <Drawer
        :title="'摘牌'"
        :placement="'right'"
        :visible="visible"
        width="486px"
        height="479px"
        @cancel="cancel"
        class="top"
    >
        <div class="delisting">
            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
                <div class="formBar">
                    <a-row :gutter="24">
                        <a-col :span="24">
                            <a-form-item label="交易账户" name="accountid">
                                <a-select
                                    class="inlineFormSelect"
                                    style="width: 260px"
                                    v-model:value="formState.accountid"
                                    placeholder="请选择"
                                >
                                    <a-select-option
                                        v-for="item in accountList"
                                        :value="item.accountid"
                                        :key="item.accountid"
                                    >{{item.accountid}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24">
                            <a-form-item label="挂牌方">
                                <span class="white ml8">{{selectedRow.username}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24">
                            <a-form-item label="基差" v-if="isFloat()">
                                <span class="yellow ml8">{{selectedRow.pricemove}}</span>
                            </a-form-item>
                            <a-form-item label="挂牌价格" v-if="!isFloat()">
                                <span class="yellow ml8">{{selectedRow.fixedprice}}</span>
                            </a-form-item>
                            <a-row :gutter="24">
                                <a-col :span="24"></a-col>
                            </a-row>
                            <a-form-item label="挂牌数量">
                                <span
                                    class="white ml8"
                                >{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" v-if="isBuy() && isWR()">
                        <a-col :span="24">
                            <a-form-item label="现货仓单" name="LadingBillId">
                                <a-select
                                    class="inlineFormSelect"
                                    style="width: 260px"
                                    v-model:value="formState.LadingBillId"
                                    placeholder="请选择"
                                >
                                    <a-select-option
                                        v-for="item in wrHoldList"
                                        :value="item.id"
                                        :key="item.id"
                                    >{{item.name}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24">
                            <a-form-item label="摘牌数量" class="relative" name="num">
                                <a-input-number
                                    class="dialogInput yellowInput"
                                    style="width: 260px"
                                    :min="0"
                                    :max="getMaxNum()"
                                    v-model:value="formState.num"
                                />
                                <span class="input-enumdicname-absolute">{{selectedRow.enumdicname}}</span>
                                <div
                                    class="labelTip"
                                >({{selectedRow.minivalue}}{{selectedRow.enumdicname}}起)</div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24" class="mt-20">
                            <a-form-item>
                                <a-slider
                                    ::min="0"
                                    v-model:value="formState.num"
                                    :max="selectedRow.orderqty"
                                    class="formSlider"
                                    style="width: 260px;"
                                />
                                <div class="unit">
                                    <span>0</span>
                                    <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">&nbsp;</a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24" class="mt-20">
                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
                                <span class="white ml8">{{getMoney()}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" v-if="getMargin()">
                        <a-col :span="24">
                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
                                <a-row>
                                    <a-col :span="24">
                                        <span class="white ml8">{{getMargin()}}</span>
                                    </a-col>
                                </a-row>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24">
                            <a-form-item label="可用资金">
                                <span class="white ml8">{{getCanUseMoney(getSelectedAccount())}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <a-row :gutter="24">
                    <a-col :span="24" class="fixedBtns">
                        <a-form-item class="btnCenter">
                            <a-button
                                class="listedBtn"
                                :loading="loading"
                                :disabled="loading"
                                @click="submit"
                            >{{isBuy() ? '卖出' : '买入'}}</a-button>
                            <a-button class="ml10 cancelBtn" @click="cancel">取消</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { defineComponent, PropType, ref } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { WrOrderQuote, WrOrderQuoteDetail } from '@/services/go/wrtrade/interface';
import { getAccountTypeList, getSelectedAccountId, getUserId } from '@/services/bus/account';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { HdWRDealOrder } from '@/services/proto/warehousetrade';
import { v4 as uuidv4 } from 'uuid';
import moment from 'moment';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { HdWRDealOrderReq } from '@/services/proto/warehousetrade/interface';
import { _closeModal } from '@/common/setup/modal/modal';
import { handleForm, handleNumAndMoney, handleSpotWarrant, getWrPosition } from './setup';
import { handleIs } from '../../setup';
import { validateAction } from '@/common/setup/form';
import { ListingForm, TempWrOrderQuoteDetail } from './interface';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { getCanUseMoney } from '@/services/bus/account';
export default defineComponent({
    name: ModalEnum.spot_trade_warehouse_financing_delisting,
    components: { Drawer, PlusOutlined, MinusOutlined },
    emits: ['cancel', 'update'],
    props: {
        enumName: {
            default: '',
            type: String as PropType<EnumRouterName>,
        },
        selectedRow: {
            type: Object as PropType<TempWrOrderQuoteDetail>,
            default: {},
        },
        parantSelectedRow: {
            type: Object as PropType<WrOrderQuote>,
            default: {},
        },
        buyOrSell: {
            type: Number as PropType<BuyOrSell>,
            default: BuyOrSell.buy,
        },
    },

    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        // 资金账号
        const accountList = getAccountTypeList([2]);
        const { rules, formState, formRef } = handleForm(props.selectedRow);
        if (accountList.length) {
            formState.accountid = accountList[0].accountid;
        }
        function getSelectedAccount() {
            return accountList.find((e) => e.accountid === formState.accountid);
        }
        const loading = ref<boolean>(false);
        // 判断
        const { isWR, isBuy, isFloat } = handleIs(props.enumName, props.buyOrSell);
        // 现货仓单
        const { wrHoldList } = handleSpotWarrant(props.enumName, props.buyOrSell, props.parantSelectedRow, loading);
        getWrPosition(props.enumName, props.buyOrSell, loading);
        const { getMaxNum, getMoney, getMargin } = handleNumAndMoney(props.enumName, props.buyOrSell, props.selectedRow, props.parantSelectedRow, formState);
        function submit() {
            validateAction<ListingForm>(formRef, formState).then((res) => {
                // 首先确定  这是仓单贸易的有仓单挂摘牌 HasWr = 1
                // 其次判断  摘牌 1。摘买 （需要通过自己的仓单进行摘买）  2。摘卖 （不需要通过仓单）
                const param: HdWRDealOrderReq = {
                    UserID: getUserId(), // uint32 用户ID
                    AccountID: getSelectedAccountId(), // uint64 资金账号
                    RelatedWRTradeOrderID: props.selectedRow.wrtradeorderid, // uint64 关联委托单号(摘牌委托关联挂牌委托单ID)
                    WRTransferUserID: props.selectedRow.userid, // uint32 仓单受让用户
                    OrderQty: res.num as number, // uint64 委托数量
                    OrderSrc: 0, // uint32 委托来源
                    ClientSerialNo: uuidv4(), // string 客户端流水号
                    ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // string 客户端委托时间
                    ClientType: 4, // uint32 终端类型
                    OperatorID: getUserId(), // uint64 操作员账号ID
                    BuyOrSell: 0, // uint32 买卖方向
                    ApplyID: 0, // uint64 申请ID
                    // LadingBillId: 0, // uint64 提单id(wrholdlb的LadingBillId字段),卖的时候填写
                    SubNum: 0, // uint64 提单子单号(wrholdlb的SubNum字段),卖的时候填写
                    WRFactorTypeId: props.parantSelectedRow.wrfactortypeid, // uint64 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写
                    TradeDate: moment().format('YYYYMMDD'), // string 交易日
                    DeliveryMonth: '', // string 交收月
                    HasWr: isWR(), // uint32 是否有仓单-0:没有仓单 1:有仓单
                    IsFinancing: 0, // uint32 是否融资购买(买摘牌时有效)-0:否 1:是
                    ProductDetailID: 0, // uint64 金融机构产品组合ID(融资购买时有效)
                };
                // 摘买方向
                if (isBuy()) {
                    param.BuyOrSell = 1;
                    param.LadingBillId = res.LadingBillId;
                } else {
                    param.BuyOrSell = 0;
                }

                requestResultLoadingAndInfo(HdWRDealOrder, param, loading, ['摘牌成功', '摘牌失败:']).then(() => {
                    cancel(true);
                });
            });
        }

        return {
            visible,
            cancel,
            accountList,
            wrHoldList,
            loading,
            submit,
            isWR,
            isBuy,
            isFloat,
            rules,
            formState,
            formRef,
            getCanUseMoney,
            getSelectedAccount,
            getMaxNum,
            getMoney,
            getMargin,
        };
    },
});
</script>

<style lang="less">
.delisting {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    overflow: hidden;
    .condition {
        width: 100%;
        height: 48px;
        margin: 0 16px;
        padding: 10px 0;
        border-bottom: 1px solid @m-black6;
        .inlineflex;
        .conditionBtn {
            align-self: center;
            align-items: center;
            border: 0;
            min-width: 80px;
            height: 28px;
            line-height: 28px;
            background: @m-black7;
            .rounded-corners(3px);
            font-size: 14px;
            color: @m-blue0;
            &:hover {
                background: @m-black7-hover;
                color: @m-blue0-hover;
            }
        }
        .conditionBtn + .conditionBtn {
            margin-left: 10px;
        }
    }
    .ant-form {
        height: 100%;
    }
}
::v-deep.ant-slider.formSlider {
    width: 260px;
}
::v-deep.ant-input-suffix {
    position: absolute;
    right: -25px;
}
.unit {
    margin-left: 70px;
    width: 260px;
    .flex;
    justify-content: space-between;
    font-size: 14px;
    color: @m-grey41;
    height: 14px;
    line-height: 14px;
}
.listedBtn {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
    border-radius: 3px;
    color: @m-white0;
    font-size: 14px;
    text-align: center;
    border: 0;
    &:hover {
        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
        color: @m-white0-hover;
    }
}
.cancelBtn:extend(.listedBtn) {
    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%);
    &:hover,
    &:active,
    &:focus,
    &::after {
        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
        color: @m-white0-hover !important;
        border: 0 !important;
    }
}
.ml10 {
    margin-left: 10px;
}
.ant-form.dialogForm .ant-row.ant-form-item {
    margin-bottom: 14px;
}
.mt20 {
    margin-top: 20px;
}
.mt-20 {
    margin-top: -20px;
}
.labelTip {
    font-size: 14px;
    color: @m-blue16;
    position: absolute;
    top: 15px;
    left: -66px;
}
.minusBtn,
.plusBtn {
    width: 15px;
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    color: @m-blue15;
    cursor: pointer;
}
.minusBtn {
    position: absolute;
    top: -6px;
    left: 14px;
    z-index: 1;
}
.plusBtn {
    position: absolute;
    top: -6px;
    right: 14px;
    z-index: 1;
}
.stepper {
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    color: @m-yellow1;
    font-size: 16px;
}
</style>;
