<template>
  <!--仓单贸易 贸易圈挂牌 摘牌-->
  <Drawer :title="isBargin() ? '议价摘牌' : '摘牌'" :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-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-col :span="24">
              <a-form-item label="挂牌数量">
                <span class="white ml8">{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-col :span="24" v-if="isBargin()">
            <a-form-item label="摘牌价格" name="price">
              <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.price" />
            </a-form-item>
          </a-col>
          <a-col :span="24" v-else>
            <a-form-item label="摘牌价格">
              <span class="white ml8">{{selectedRow.fixedprice}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="isBuy()">
            <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 :gutter="24" v-if="isCanpart()">
            <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.delistminqty}}{{selectedRow.enumdicname}}起)
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" v-if="isCanpart()">
            <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-col :span="24" v-if="!isCanpart()">
            <a-form-item label="摘牌数量">
              <span class="white ml8">{{selectedRow.orderqty}}{{selectedRow.enumdicname}}</span>
            </a-form-item>
          </a-col>
          <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">{{getMargin()}}</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">{{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 { Des } from '@/common/components/commonDes';
import Drawer from '@/common/components/drawer/index.vue';
import { BuyOrSell, TradeMode } from '@/common/constants/enumCommon';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { validateAction } from '@/common/setup/form';
import { _closeModal } from '@/common/setup/modal/modal';
import { getAccountTypeList, getCanUseMoney, getSelectedAccountId, getUserId } from '@/services/bus/account';
import { marketIsRun } from '@/services/bus/market';
import { getRules } from '@/services/bus/rules';
import { QueryOrderQuoteMyqQsp } from '@/services/go/wrtrade/interface';
import { HdWRDealOrder, wrBargainApply } from '@/services/proto/warehousetrade';
import { WrBargainApplyReq } from '@/services/proto/warehousetrade/interface';
import Bus from '@/utils/eventBus';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
import Long from 'long';
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
import { defineComponent, PropType, ref } from 'vue';
import { ListingForm } from './interface';
import { handleForm, handleSpotWarrant } from './setup';

export default defineComponent({
  emits: ['cancel', 'update'],
  name: 'warehouse_receipt_trade_blocs_delisting_tab',
  components: { Des, Drawer, PlusOutlined, MinusOutlined },
  props: {
    selectedRow: {
      type: Object as PropType<QueryOrderQuoteMyqQsp>,
      default: {},
    },
    buyOrSell: {
      type: Number as PropType<BuyOrSell>,
      default: BuyOrSell.buy,
    },
    componentId: {
      type: String,
      default: '',
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context);
    const { rules, formState, formRef } = handleForm();
    const loading = ref<boolean>(false);
    const accountList = getAccountTypeList([2]);
    // 现货仓单
    const { wrHoldList, allWrHoldList } = handleSpotWarrant(props.buyOrSell, props.selectedRow, loading);
    if (accountList.length) {
      formState.accountid = accountList[0].accountid;
    }

    function getSelectedAccount() {
      return accountList.find((e) => e.accountid === formState.accountid)!;
    }
    function getPrice() {
      return isBargin() ? formState.price : props.selectedRow.fixedprice;
    }
    function getNum() {
      return isCanpart() ? formState.num : props.selectedRow.orderqty;
    }
    // 摘牌金额
    function getMoney() {
      const price = getPrice();
      const num = getNum();
      if (price) {
        return Math.round(price * num * 100) / 100;
      } else {
        return '--';
      }
    }
    // 履约保证金
    function getMargin() {
      const price = getPrice();
      const num = getNum();
      let result = 0;
      const { marginvalue } = props.selectedRow;
      if (price && num && marginvalue) {
        result = price * num * marginvalue;
      }
      return result ? Math.round(result * 100) / 100 : '--';
    }
    function getMaxNum() {
      const qty = props.selectedRow.orderqty;
      let result = 0;
      if (!isBuy()) {
        // 交易规则
        const rules = getRules();
        const { buymarginvalue } = rules.length ? rules[0] : { buymarginvalue: 0 };
        const canUseMoney = Number(getCanUseMoney(getSelectedAccount()));
        if (canUseMoney && !isNaN(canUseMoney)) {
          const num = +(canUseMoney / buymarginvalue).toFixed(0);
          // 买 最大可摘数量=min{挂牌数量，可用资金/(履约保证金比例)}
          result = Math.min(qty, num);
        }
      } else {
        // 卖出 最大可摘数量=min{挂牌数量，仓单可用数量}
        const id = formState.LadingBillId;
        if (id) {
          const item = allWrHoldList.value.find((el) => el.ladingbillid === id)!;
          result = Math.min(qty, item.enableqty);
        }
      }
      return result;
    }
    function isBuy() {
      return props.buyOrSell === BuyOrSell.buy;
    }
    // 是否部分摘牌
    function isCanpart() {
      return props.selectedRow.canpart === 1;
    }
    // 是否议价 摘牌
    function isBargin() {
      return props.componentId === 'warehouse_receipt_trade_blocs_bargain_delisting';
    }
    if (isBargin()) {
      formState.price = props.selectedRow.fixedprice;
    }

    function submit() {
      // 判断是否开市
      if (!marketIsRun(TradeMode.WarehouseReceiptTrade)) {
        return;
      }
      validateAction<ListingForm>(formRef, formState).then((res) => {
        const price = getPrice();
        const num = getNum();
        if (isBargin()) {
          // 议价摘牌
          const param: WrBargainApplyReq = {
            WRTradeOrderID: Long.fromString(props.selectedRow.wrtradeorderid),
            ApplyQty: num,
            UserID: getUserId().toString(),
            AccountID: getSelectedAccountId().toString(),
            BuyOrSell: (isBuy() ? BuyOrSell.sell : BuyOrSell.buy).toString(),
            ApplyPrice: price.toString(),
            ApplyRemark: '',
          };
          requestResultLoadingAndInfo(wrBargainApply, param, loading, ['议价摘牌成功', '议价摘牌失败:']).then(() => {
            Bus.$emit('spotTrade', true);
            cancel(true);
          });
        } else {
          // 首先确定  这是仓单贸易的有仓单挂摘牌 HasWr = 1
          // 其次判断  摘牌 1。摘买 （需要通过自己的仓单进行摘买）  2。摘卖 （不需要通过仓单）
          const param = {
            UserID: getUserId(), // uint32 用户ID
            AccountID: getSelectedAccountId(), // uint64 资金账号
            RelatedWRTradeOrderID: props.selectedRow.wrtradeorderid, // uint64 关联委托单号(摘牌委托关联挂牌委托单ID)
            WRTransferUserID: props.selectedRow.userid, // uint32 仓单受让用户
            OrderQty: num, // uint64 委托数量
            OrderSrc: 1, // uint32 委托来源
            ClientSerialNo: uuidv4(), // string 客户端流水号
            ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // string 客户端委托时间
            ClientType: 4, // uint32 终端类型
            OperatorID: getUserId(), // uint64 操作员账号ID
            BuyOrSell: isBuy() ? BuyOrSell.sell : BuyOrSell.buy, // uint32 买卖方向
            ApplyID: 0, // uint64 申请ID
            LadingBillId: 0, // uint64 提单id(wrholdlb的LadingBillId字段),卖的时候填写
            SubNum: 0, // uint64 提单子单号(wrholdlb的SubNum字段),卖的时候填写
            WRFactorTypeId: Long.fromString(props.selectedRow.wrfactortypeid), // uint64 仓单要素ID(wrholdlb的WRFactorTypeId字段),卖的时候填写
            TradeDate: moment().format('YYYYMMDD'), // string 交易日
            DeliveryMonth: '', // string 交收月
            HasWr: 1, // uint32 是否有仓单-0:没有仓单 1:有仓单
            IsFinancing: 0, // uint32 是否融资购买(买摘牌时有效)-0:否 1:是
            ProductDetailID: res.caseId, // uint64 金融机构产品组合ID(融资购买时有效)
          };
          // 摘买方向
          if (isBuy()) {
            param.BuyOrSell = BuyOrSell.sell;
            param.LadingBillId = Long.fromString(res.LadingBillId);
            const item = wrHoldList.value.find((el) => el.id === res.LadingBillId);
            if (item) {
              param.SubNum = +item.subnum;
            }
          } else {
            param.BuyOrSell = BuyOrSell.buy;
          }

          requestResultLoadingAndInfo(HdWRDealOrder, param, loading, ['摘牌成功', '摘牌失败:']).then(() => {
            cancel(true);
            Bus.$emit('blocsTrade', true);
          });
        }
      });
    }
    return {
      submit,
      cancel,
      visible,
      accountList,
      rules,
      formState,
      formRef,
      getSelectedAccount,
      getCanUseMoney,
      getMoney,
      isBuy,
      isBargin,
      wrHoldList,
      loading,
      getMaxNum,
      isCanpart,
      getMargin,
    };
  },
});
</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>