<template>
    <!-- 挂牌求购 -->
    <Drawer :title="'挂牌求购'" :placement="'right'" :visible="visible" @cancel="cancel" class="top">
        <div class="post_buying">
            <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-col :span="24" v-if="!isFloat()">
                            <a-form-item label="挂牌价格" name="FixedPrice">
                                <a-input-number
                                    class="commonInput"
                                    style="width: 260px"
                                    :min="0"
                                    v-model:value="formState.FixedPrice"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" v-else>
                            <a-form-item label="基差" name="PriceMove">
                                <a-input-number
                                    class="commonInput"
                                    style="width: 260px"
                                    v-model:value="formState.PriceMove"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" v-if="isFloat()">
                            <a-form-item label="估算价" name="PriceMove">
                                <span class="white">{{getPrice()}}</span>
                            </a-form-item>
                        </a-col>

                        <a-col :span="24">
                            <a-form-item label="挂牌数量" name="OrderQty">
                                <a-input-number
                                    class="commonInput"
                                    style="width: 260px"
                                    :min="0"
                                    :max="getMaxNum()"
                                    v-model:value="formState.OrderQty"
                                />
                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" v-if="!isWR()">
                            <a-form-item label="交收月" name="DeliveryMonth">
                                <a-month-picker
                                    style="width: 260px"
                                    v-model:value="formState.DeliveryMonth"
                                    :allowClear="false"
                                    class="commonDatePicker dialogDatePicker"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" class="mt-10">
                            <a-form-item>
                                <a-slider
                                    :min="0"
                                    v-model:value="formState.OrderQty"
                                    :max="getMaxNum()"
                                    class="formSlider"
                                />
                                <div class="unit">
                                    <span>{{getMaxNum() ? selectedRow.minivalue : 0}}</span>
                                    <span>{{getMaxNum()}}{{selectedRow.enumdicname}}</span>
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="起摘数量" class="relative">
                                <a-input
                                    class="commonInput"
                                    :suffix="selectedRow.enumdicname"
                                    :min="selectedRow.minivalue"
                                    style="width: 260px"
                                />
                                <div
                                    class="tip"
                                >最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" class="relative mt20">
                            <a-form-item :label="isFloat() ? '估算金额' : '挂牌金额'">
                                <span class="white ml8">{{getMoney()}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" v-if="getMargin()">
                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
                                <!-- <a-row>
                                <a-col :span="8">-->
                                <span class="white ml8">{{getMargin()}}</span>
                                <!-- </a-col>
                                    <a-col :span="4" class="tr">
                                        <span class="grey1">可用资金</span>
                                    </a-col>
                                    <a-col :span="12">
                                        <span
                                            class="white ml8"
                                        >{{getCanUseMoney(getSelectedAccount())}}</span>
                                    </a-col>
                                </a-row>-->
                            </a-form-item>
                        </a-col>
                        <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" @click="submit">买入</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 { defineComponent, PropType, ref } from 'vue';
import { Des } from '@/common/components/commonDes';
import { _closeModal } from '@/common/setup/modal/modal';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import Drawer from '@/common/components/drawer/index.vue';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { hdWROrder } from '@/services/proto/warehousetrade';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { DGFactoryItems, WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
import { getAccountTypeList, getUserId } from '@/services/bus/account';
import { v4 as uuidv4 } from 'uuid';
import moment, { Moment } from 'moment';
import { getMarketRunByTradeMode } from '@/services/bus/market';
import { WrOrderQuote } from '@/services/go/wrtrade/interface';
import { handleForm, handleNumAndPrice } from './setup';
import { validateAction } from '@/common/setup/form';
import { FormParam, TempWrOrderQuoteDetail } from './interface';
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { handleIs } from '../buy-sell-market/setup';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { getCanUseMoney } from '@/services/bus/account';

export default defineComponent({
    emits: ['cancel', 'update'],
    name: ModalEnum.spot_trade_warehouse_post_buying,
    components: { Des, Drawer, PlusOutlined, MinusOutlined },
    props: {
        selectedRow: {
            type: Object as PropType<TempWrOrderQuoteDetail>,
            default: {},
        },
        enumName: {
            default: '',
            type: String as PropType<EnumRouterName>,
        },
        time: {
            type: Object as PropType<Moment>,
            default: moment(),
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const { isWR, isFloat } = handleIs(props.enumName, BuyOrSell.buy);
        const { rules, formState, formRef } = handleForm();
        const loading = ref<boolean>(false);
        const accountList = getAccountTypeList([2]);
        if (accountList.length) {
            formState.accountid = accountList[0].accountid;
        }
        function getSelectedAccount() {
            return accountList.find((e) => e.accountid === formState.accountid);
        }
        formState.DeliveryMonth = props.selectedRow.deliverymonth ? moment(props.selectedRow.deliverymonth) : props.time;

        const { getMaxNum, getMoney, getMargin, getPrice } = handleNumAndPrice(props.enumName, props.selectedRow);
        function submit() {
            const marketInfo = getMarketRunByTradeMode(17);
            if (marketInfo) {
                validateAction<FormParam>(formRef, formState).then((res) => {
                    // 现在增加一种挂牌求购的情况
                    // 这种求购模式会生成一种仓单贸易商品

                    const wrGoodsInfo: WRGoodsInfo = {
                        GoodsID: props.selectedRow.goodsid, // uint32 配置商品ID
                        GoodsCode: props.selectedRow.goodscode, // string 配置商品代码
                        PriceFactor: 1, // double 商品价格系数
                        PriceMove: 0, // double 商品升贴水值
                        WeightRatio: 1, // double 商品重量系数
                    };
                    const param = {
                        AccountID: res.accountid, // 默认内部资金账号第一个
                        ClientSerialNo: uuidv4(), // 客户端流水号
                        // OperateSrc: 2,
                        ClientType: 4,
                        // MarketID: marketInfo.marketid,
                        LadingBillId: 0, // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
                        // LadingBillId: 'uint642081626946446000001', // 提单id(wrholdlb的LadingBillId字段),卖的时候填写 uint64
                        TradeDate: moment(marketInfo.tradedate).format('YYYYMMDD'), // 交易日 string
                        // SubNum: '0', // 提单子单号
                        SubNum: 0,
                        // WRFactorTypeId: '2121626946446000001', // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
                        WRFactorTypeId: props.selectedRow.wrfactortypeid ? props.selectedRow.wrfactortypeid : 0, // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
                        IsSpecified: 0, // 是否指定对手 0：不指定 1：指定 uint32
                        // MatchUserIDs: 0, // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
                        OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
                        DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID  // 有仓单求购
                        WRPriceType: isFloat() ? 2 : 1, // 价格方式 1：固定价 2：浮动价
                        FixedPrice: res.FixedPrice, // 固定价格
                        PriceFactor: 1, // 价格系数(浮动价时填写)
                        PriceMove: res.PriceMove, // 升贴水(浮动价时填写)
                        TimevalidType: 4, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
                        // ValidTime: moment('2021-08-25 00:00:00').format('YYYY-MM-DD HH:mm:ss'), // 有效期限
                        ClientOrderTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                        FirstRatio: 0, // 首付比例
                        PerformanceTemplateID: 0, // 履约计划模板ID
                        UserID: getUserId(),
                        OperatorID: getUserId(), // 操作员账号ID
                        BuyOrSell: 0, // 买卖方向 0买1卖
                        PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
                        CanBargain: 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
                        Attachment1: '', // 附件1
                        Attachment2: '', // 附件2
                        Remark: '', // 备注
                        ApplyID: 0, // 申请ID
                        WRTradeGoods: isFloat() ? [wrGoodsInfo] : [],
                        CanPart: 1, // 是否允许部份摘牌0:不允许;1:允许
                        WRStandardID: props.selectedRow.wrstandardid,
                        HasWr: isWR(), // 无仓单挂牌  是否有无仓单
                        DeliveryMonth: isWR() ? '' : moment(res.DeliveryMonth).format('YYYY-MM'),
                        FactoryItems: props.selectedRow.wrResult != undefined ? props.selectedRow.wrResult.flatMap((it) => {
                            return {
                                DGFactoryItemTypeID: it.dgfactoryitemtypeid, // uint64 要素项类型ID
                                DGFactoryItemID: it.dgfactoryitemid, // uint64 预约要素项类型值
                                ItemTypeMode: 1, // uint32 要素项类型模式
                            };
                        }): [], // DGFactoryItems 要素类型明细集合(没有仓单要素ID填写)
                    };
                    requestResultLoadingAndInfo(hdWROrder, param, loading, ['求购成功', '求购失败:']).then(() => {
                        cancel(true);
                    });
                });
            }
        }
        return {
            submit,
            cancel,
            visible,
            accountList,
            rules,
            formState,
            formRef,
            isFloat,
            isWR,
            getMaxNum,
            getMoney,
            getMargin,
            getSelectedAccount,
            getCanUseMoney,
            getPrice,
        };
    },
});
</script>

<style lang="less">
.post_buying {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    .ant-form {
        height: 100%;
    }
    .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;
        }
    }
}

.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%) !important;
    &:hover {
        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
        color: @m-white0-hover;
    }
}
.ml10 {
    margin-left: 10px;
}
.ant-form.dialogForm .ant-row.ant-form-item {
    margin-bottom: 14px;
}
.mt20 {
    margin-top: 20px;
}
.mt-10 {
    margin-top: -10px;
}
.ant-input-suffix {
    position: absolute;
    right: -25px;
}
.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;
}
.ant-slider.formSlider {
    width: 260px !important;
    margin-left: 70px;
    .ant-slider-rail {
        margin-right: 0;
        padding-right: 0;
        height: 3px !important;
        border-radius: 2px !important;
        background-color: @m-blue14;
    }
    .ant-slider-track {
        height: 3px;
        background-color: @m-blue0;
    }
    .ant-slider-step {
        height: 3px;
    }
    .ant-progress-text {
        display: none;
    }
}
</style>