<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="挂牌价格"
                           class="relative"
                           name="price">
                <a-input-number class="dialogInput yellowInput"
                                style="width: 260px"
                                :min="0"
                                :max="99999"
                                v-model:value="formState.price" />
              </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="99999"
                                v-model:value="formState.num" />
                <span class="input-enumdicname-absolute">{{parantSelectedRow.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="parantSelectedRow.orderqty"
                          class="formSlider"
                          style="width: 260px" />
                <div class="unit">
                  <span>0</span>
                  <span>99999{{parantSelectedRow.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="挂牌金额">
                <span class="white ml8">{{getMoney()}}</span>
              </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">买入</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 { getAccountTypeList, getSelectedAccountId, getUserId } from '@/services/bus/account';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';
import { handleForm } from './setup';
import { validateAction } from '@/common/setup/form';
import { FormState } from './interface';
import { getCanUseMoney } from '@/services/bus/account';
import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
import { OrderReq } from '@/services/socket/order/interface';
import { Order } from '@/services/socket/order';
import { DelistingType, PriceType } from '@/common/constants/enumCommon';
import { getLongTypeLoginID } from '@/services/bus/login';
import { LongType } from '@/services/socket/login/interface';
import { v4 as uuidv4 } from 'uuid';
import moment from 'moment';
import Long from 'long';
export default defineComponent({
    name: ModalEnum.spot_trade_warehouse_financing_delisting,
    components: { Drawer, PlusOutlined, MinusOutlined },
    emits: ['cancel', 'update'],
    props: {
        parantSelectedRow: {
            type: Object as PropType<QueryDeliveryRelationRsp>,
            default: {},
        },
    },

    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        // 资金账号
        const accountList = getAccountTypeList([2]);
        const { rules, formState, formRef } = handleForm();
        if (accountList.length) {
            formState.accountid = accountList[0].accountid;
        }
        function getSelectedAccount() {
            return accountList.find((e) => e.accountid === formState.accountid);
        }
        const loading = ref<boolean>(false);
        function getMoney() {
            return (formState.price * formState.num).toFixed(2);
        }
        // const { getMaxNum, getMoney, getMargin } = handleNumAndMoney(props.enumName, props.buyOrSell, props.selectedRow, props.parantSelectedRow, formState);
        function submit() {
            validateAction<FormState>(formRef, formState).then((res) => {
                // 挂牌请求 通过挂牌求购进行挂牌
                const param: OrderReq = {
                    ClientSerialNo: uuidv4(), // 客户端流水号
                    ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
                    ClientType: 4, // 终端类型
                    LoginID: Number(getLongTypeLoginID() as LongType), // 登陆账号
                    AccountID: getSelectedAccountId(), // 交易账号
                    GoodsID: props.parantSelectedRow.goodsid, // 商品ID
                    MarketID: props.parantSelectedRow.marketid, // 市场ID
                    ValidType: 1, // 校验类型 当日有效
                    OperateType: 1, // 操作类型: 申请
                    OrderSrc: 1, // 单据来源: 客户端下单
                    OrderPrice: res.price, // 委托价格
                    OperatorID: Number(getLongTypeLoginID()),
                    // MarketMaxSub: number // 市价允许最大偏差(做市)
                    OrderQty: res.num, // 委托数量
                    BuyOrSell: 0, // 买卖方向  0 买 1 卖
                    BuildType: 1, // 下单类型  1 建 2 平
                    // CurtQuotePrice: 0, // 保留，计算冻结金额使用
                    // SpPrice: 0 ,// 止盈价格
                    // SlPrice: 0 , // 止损价格
                    PriceMode: PriceType.limit, // 取价方式
                    TimevalidType: 1, // 时间有效类型 单日有效
                    TriggerType: 1, // 预埋单触发类型
                    // TriggerPrice: number // 预埋单触发价格
                    ListingSelectType: 1, // 挂牌点选类型 1：挂牌 2：摘牌 3：先摘后挂
                    DelistingType: DelistingType.selected, // 摘牌类型 2:点选成交
                    // RelatedID: number // 关联单号
                    OptionType: 1, // 期权类型(1:认购(看涨)2:认沽(看跌))
                    // Premium: number // 权利金
                    // TriggerOperator: number // 触发条件(1:大于等于2:小于等于)
                    // ServiceTime: string // 服务端时间
                    // CouponTypeID: number // 优惠券类型ID(买方)
                    // UsedQty: number // 使用数量
                    // ValidTime: string // 指定有效日期
                    // ReceiveInfoID: number // 收货地址ID
                    OrderFlag: 1,
                };
                requestResultLoadingAndInfo(Order, param, loading, ['挂牌成功', '挂牌失败:']).then(() => {
                    cancel(true);
                });
            });
        }

        return {
            visible,
            cancel,
            accountList,
            loading,
            submit,
            rules,
            formState,
            formRef,
            getCanUseMoney,
            getSelectedAccount,
            getMoney,
        };
    },
});
</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%) !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-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>;
