<template>
    <!-- 预售仓单 现货明细 挂牌 -->
    <Drawer
        :title="'挂牌'"
        :placement="'right'"
        class="delistingBottom"
        :visible="visible"
        @cancel="cancel"
    >
        <div class="listed">
            <div class="condition">
                <a-button class="conditionBtn">{{selectedRow.deliverygoodsname}}</a-button>
                <a-button class="conditionBtn">{{selectedRow.wrtypename}}</a-button>
                <a-button class="conditionBtn">{{selectedRow.warehousename}}</a-button>
            </div>

            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
                <div class="formBar">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="挂牌方式" name="WRPriceType">
                                <a-select
                                    class="inlineFormSelect"
                                    default-value="1"
                                    v-model:value="formState.WRPriceType"
                                    style="width: 140px"
                                >
                                    <a-select-option :value="1">一口价</a-select-option>
                                    <a-select-option :value="2">浮动价</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12" v-if="!isFloat()">
                            <a-form-item label="挂牌价" name="FixedPrice">
                                <a-input-number
                                    class="dialogInput"
                                    style="width: 140px"
                                    :min="0"
                                    v-model:value="formState.FixedPrice"
                                    placeholder="请输入挂牌价"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12" v-if="isFloat()">
                            <a-form-item label="基差" name="PriceMove">
                                <a-input-number
                                    class="commonInput"
                                    v-model:value="formState.PriceMove"
                                    style="width: 140px"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="挂牌数量" name="OrderQty">
                                <a-input-number
                                    class="dialogInput"
                                    style="width: 140px"
                                    :min="0"
                                    v-model:value="formState.OrderQty"
                                    placeholder="请输入挂牌数量"
                                />
                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="起摘数量" class="relative" name="DelistMinQty">
                                <a-input-number
                                    class="commonInput"
                                    :min="0"
                                    v-model:value="formState.DelistMinQty"
                                    style="width: 140px"
                                />
                                <span class="input-enumdicname">{{selectedRow.enumdicname}}</span>
                                <div
                                    class="tip"
                                >最小单位：{{selectedRow.minivalue}}{{selectedRow.enumdicname}}</div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="12" class="mt-20">
                            <a-form-item>
                                <a-slider
                                    v-model:value="formState.OrderQty"
                                    ::min="0"
                                    :max="selectedRow.enableqty"
                                    class="formSlider"
                                    style="width: 140px;"
                                />
                                <div class="unit">
                                    <span>0</span>
                                    <span>{{selectedRow.enableqty}}{{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="12">
                            <a-form-item label="交收月" name="DeliveryMonth">
                                <a-month-picker
                                    style="width: 140px"
                                    v-model:value="formState.DeliveryMonth"
                                    :allowClear="'false'"
                                    class="commonDatePicker dialogDatePicker"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item>&nbsp;</a-form-item>
                        </a-col>
                    </a-row>

                    <a-row :gutter="24" v-if="isFloat()">
                        <a-col :span="24">
                            <a-form-item label="行情商品" name="goodsid">
                                <!-- <a-select class="inlineFormSelect"
                          style="width: 135px"
                          placeholder="请择交易所">
                                </a-select>-->
                                <a-select
                                    class="inlineFormSelect ml5"
                                    @change="handleGoodsGroups"
                                    style="width: 135px"
                                    v-model:value="formState.goodsgroupid"
                                    placeholder="请选择商品"
                                >
                                    <a-select-option
                                        v-for="item in goodsGroup"
                                        :value="item.goodsgroupid"
                                        :key="item.goodsgroupid"
                                    >{{item.goodsgroupname}}</a-select-option>
                                </a-select>
                                <a-select
                                    class="inlineFormSelect ml5"
                                    style="width: 135px"
                                    v-model:value="formState.goodsid"
                                    @change="handleGoodsChange"
                                    placeholder="请选择合约"
                                >
                                    <a-select-option
                                        v-for="item in goodsList"
                                        :value="item.goodsid"
                                        :key="item.goodsid"
                                    >{{item.goodsname}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24" class="relative">
                            <a-form-item :label="isFloat() ? '估算金额' : '摘牌金额'">
                                <span class="white ml8">{{getMoney()}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" class="relative">
                            <a-form-item :label="getMargin() ? '履约保证金' : ''">
                                <a-row>
                                    <a-col :span="8" v-if="getMargin()">
                                        <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(handleSelectedAccount())}}</span>
                                    </a-col>
                                </a-row>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <a-row :gutter="24" class="fixedBtns">
                    <a-col :span="24">
                        <a-form-item class="btnCenter">
                            <a-button
                                class="listedBtn"
                                :loading="loading"
                                :disabled="loading"
                                @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, onMounted, PropType, ref } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { WrPosition } from '@/services/go/wrtrade/interface';
import { getAccountTypeList, getInTaAccount, getSelectedAccount, getUserId } from '@/services/bus/account';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { hdWROrder } from '@/services/proto/warehousetrade';
import { v4 as uuidv4, v4 } from 'uuid';
import moment from 'moment';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';
import { validateAction } from '@/common/setup/form';
import { ListingForm } from './interface';
import { getMarketRunByTradeMode } from '@/services/bus/market';
import { WRGoodsInfo } from '@/services/proto/warehousetrade/interface';
import Bus from '@/utils/eventBus';
import { handleGoods, handleForm, handleNumAndPrice } from './setup';
import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/socket/quota';
import { getCanUseMoney } from '@/services/bus/account';

export default defineComponent({
    name: ModalEnum.spot_warrant_spot_details_listed,
    components: { Drawer },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<WrPosition>,
            default: {},
        },
    },
    setup(props, context) {
        const loading = ref<boolean>(false);
        const { visible, cancel } = _closeModal(context);
        const { rules, formState, formRef } = handleForm(props.selectedRow);
        const { goodsGroup, goodsList, groupsChange, findGoodsCode } = handleGoods();
        // 切换商品组
        function handleGoodsGroups(value: number) {
            groupsChange(value);
            formRef.value.validate();
        }
        const uuid = v4();
        // 切换商品
        function handleGoodsChange(id: number) {
            //行情订阅
            removeSubscribeQuotation(uuid);
            const goodsCode = goodsList.value.find((e) => e.goodsid === id)?.goodscode as string;
            const arr = [{ exchangeCode: 250, goodsCode: goodsCode, subState: 0 }];
            addSubscribeQuotation(uuid, arr);
            formRef.value.validate();
        }
        onMounted(() => {
            removeSubscribeQuotation(uuid);
        });
        const { getMoney, getMargin, isFloat } = handleNumAndPrice();
        // 处理内部资金账号
        function handleSelectedAccount() {
            const item = getSelectedAccount();
            const list = getAccountTypeList([2]);
            return item.taaccounttype === 2 ? item : list[0];
        }
        function submit() {
            const marketInfo = getMarketRunByTradeMode(17);
            if (marketInfo) {
                // 无仓单挂牌
                validateAction<ListingForm>(formRef, formState).then((res) => {
                    const wrGoodsInfo: WRGoodsInfo = {
                        GoodsID: res.goodsid as number, // uint32 配置商品ID
                        GoodsCode: findGoodsCode(res.goodsid as number) as string, // string 配置商品代码
                        PriceFactor: 1, // double 商品价格系数
                        PriceMove: 0, // double 商品升贴水值
                        WeightRatio: 1, // double 商品重量系数
                    };
                    const param = {
                        AccountID: getInTaAccount(),
                        ClientSerialNo: uuidv4(), // 客户端流水号
                        // OperateSrc: 2,
                        ClientType: 4,
                        // MarketID: 17201,
                        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, // 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写 uint64
                        IsSpecified: 0, // 是否指定对手 0：不指定 1：指定 uint32
                        // MatchUserIDs: 0, // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
                        OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
                        DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID
                        WRPriceType: res.WRPriceType, // 价格方式 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: 1, // 买卖方向 0买1卖
                        PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
                        CanBargain: 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
                        Attachment1: '', // 附件1
                        Attachment2: '', // 附件2
                        Remark: '222', // 备注
                        ApplyID: 0, // 申请ID
                        CanPart: 1, // 是否允许部份摘牌0:不允许;1:允许
                        WRTradeGoods: [wrGoodsInfo],
                        wrstandardid: props.selectedRow.wrstandardid,
                        DeliveryMonth: moment(res.DeliveryMonth).format('YYYY-MM'), // string 交收月
                        HasWr: 0, // 0 无仓单  1： 有仓单
                        DelistMinQty: res.DelistMinQty, // 起摘数量
                    };
                    requestResultLoadingAndInfo(hdWROrder, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
                        Bus.$emit('spotTrade', true);
                        cancel(true);
                    });
                });
            }
        }

        return {
            submit,
            visible,
            cancel,
            loading,
            rules,
            formState,
            formRef,
            goodsGroup,
            goodsList,
            handleGoodsGroups,
            handleGoodsChange,
            isFloat,
            getMoney,
            getMargin,
            getCanUseMoney,
            handleSelectedAccount,
        };
    },
});
</script>

<style lang="less" scoped>
.listed {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    overflow: hidden;
    .condition {
        width: calc(100% - 32px);
        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;
        }
    }
}
.mt-20 {
    margin-top: -20px;
}
::v-deep.ant-slider.formSlider {
    width: 140px;
    // height: 3px;
    // .rounded-corners(2px);
    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 {
        //     background: @m-grey14;
        //     .rounded-corners(2px);
        //     .ant-progress-bg {

        //     }
        // }
    }
    .ant-slider-track {
        height: 3px;
        background-color: @m-blue0;
    }
    .ant-slider-step {
        height: 3px;
    }
    .ant-progress-text {
        display: none;
    }
}
.unit {
    margin-left: 70px;
    width: 140px;
    .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 {
        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%);
        color: @m-white0-hover;
    }
}
.ml10 {
    margin-left: 10px;
}
.ml5 {
    margin-left: 5px;
}
</style>;
