<template>
  <!--仓单贸易 贸易圈挂牌 挂牌求购 -->
  <Drawer :title="'挂牌求购'" :placement="'right'" :visible="visible" @cancel="cancel" class="top486">
    <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">
              <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
                <a-input-number
                  class="commonInput"
                  style="width: 260px"
                  :min="0"
                  v-model:value="formState.FixedPrice"
                />
                <MinusOutlined @click="decreasePrice" />
                <PlusOutlined @click="increasePrice" />
                <a-checkbox class="commonCheckbox" v-model:checked="priceCheck">可议价</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
                <a-input-number
                  class="commonInput"
                  style="width: 260px"
                  :min="0"
                  v-model:value="formState.OrderQty"
                />
                <MinusOutlined @click="decreaseNumber" />
                <PlusOutlined @click="increaseNumber" />
                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
                <a-checkbox v-model:checked="numCheck" class="commonCheckbox">整单</a-checkbox>
              </a-form-item>
            </a-col>

            <a-col :span="24" v-if="!numCheck">
              <a-form-item label="起摘数量" name="delistingQty">
                <a-input-number
                  class="commonInput"
                  v-model:value="formState.delistingQty"
                  :min="0"
                  style="width: 260px !important"
                />
                <span class="input-enumdicname">{{ selectedRow.enumdicname }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="履约保证金" name="margin">
                <a-input-number
                  class="commonInput"
                  v-model:value="formState.margin"
                  :min="0"
                  style="width: 260px"
                />
                <span class="input-enumdicname">%</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="挂牌有效期" name="vidaliteTime" class="inputIconBox">
                <a-date-picker
                  style="width: 260px"
                  v-model:value="formState.vidaliteTime"
                  :allowClear="false"
                  class="commonDatePicker dialogDatePicker"
                />
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="履约模板" class="inputIconBox">
                <span
                  :class="['clickBox', formState.permanceTempName ? 'white' : '']"
                  @click="openPermance"
                >{{ formState.permanceTempName ? formState.permanceTempName : '选择履约模板' }}</span>
                <svg class="icon svg-icon" aria-hidden="true" @click="openPermance">
                  <use xlink:href="#icon-moban" />
                </svg>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="指定朋友" class="inputIconBox">
                <span
                  :class="['clickBox', getFriendLength() ? 'white' : '']"
                  @click="openFriend"
                >{{ getFriendLength() ? `已选${getFriendLength()}人` : '选择朋友' }}</span>
                <svg class="icon svg-icon" aria-hidden="true" @click="openFriend">
                  <use xlink:href="#icon-pengyou1" />
                </svg>
                <a-checkbox
                  class="commonCheckbox"
                  v-model:checked="friendCheck"
                  @change="limiteFriends"
                >不限</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="挂牌金额">
                <span class="white ml8">{{ getMoney() }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="履约保证金">
                <span class="white ml8">{{ getMargin() }}</span>
              </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>
  <!-- 选择朋友 -->
  <Friend
    v-if="showFriend"
    :friends="formState.friends"
    @cancel="chooseFriend"
    @update="chooseFriend"
  />
  <!-- 选择履约模板 -->
  <Permance v-if="showPermance" @cancel="choosePermance" @update="choosePermance" />
</template>

<script lang="ts">
import { defineComponent, PropType, ref, UnwrapRef } 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 { getUserId } from '@/services/bus/account';
import { v3, v4 as uuidv4 } from 'uuid';
import moment, { Moment } from 'moment';
import { getMarketRunByTradeMode, marketIsRun } from '@/services/bus/market';
import { validateAction } from '@/common/setup/form';
import { getCanUseMoney } from '@/services/bus/account';
import { TempWrOrderQuoteDetail } from '@/views/market/market-spot/components/post_buying/interface';
import Friend from '@/common/components/friends/index.vue';
import Permance from '@/common/components/permanceTemp/choosePermancePlanTmp.vue';
import { message } from 'ant-design-vue';
import { useBlocksPrice, useBlocksNumber, useBlocksAccount, useBlocksMoney, useBlocksFriends, useBlocksPermaceTemp, handleForm } from '@/common/setup/warehouse_receipt_trade/listing';

import { BlocsListingForm } from '@/common/setup/warehouse_receipt_trade/interface';
import { TradeMode } from '@/common/constants/enumCommon';
import { useVerifyBeginDelistingNum } from '@/hooks/form/verify';
import { WrResultItem } from '@/views/market/futures/compoments/futures-trade/interface'

export default defineComponent({
  emits: ['cancel', 'update'],
  name: ModalEnum.spot_trade_warehouse_post_buying,
  components: { Des, Drawer, PlusOutlined, MinusOutlined, Friend, Permance },
  props: {
    selectedRow: {
      type: Object as PropType<TempWrOrderQuoteDetail>,
      default: { wrResult: [], wrstandardid: 0, deliverygoodsid: 0, wrfactortypeid: 0, minivalue: 0 },
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context);
    // 表单
    const { rules, formState, formRef } = handleForm();
    // 验证 起摘数量
    const { v_beginDelistingRules } = useVerifyBeginDelistingNum(props.selectedRow.minivalue);
    rules.delistingQty = v_beginDelistingRules;
    // 选择朋友
    const { friendCheck, showFriend, chooseFriend, openFriend, getFriendLength, limiteFriends } = useBlocksFriends(formState);
    // 履约模板
    const { showPermance, choosePermance, openPermance } = useBlocksPermaceTemp(formState);
    // 价格
    const { priceCheck, increasePrice, decreasePrice } = useBlocksPrice(formState);
    const loading = ref<boolean>(false);
    // 摘牌数量
    const { numCheck, increaseNumber, decreaseNumber } = useBlocksNumber(formState);
    function submit() {
      // 判断是否开市
      if (!marketIsRun(TradeMode.WarehouseReceiptTrade)) {
        return;
      }
      const marketInfo = getMarketRunByTradeMode(TradeMode.WarehouseReceiptTrade);
      if (marketInfo) {
        validateAction<BlocsListingForm>(formRef, formState).then((res) => {
          if (!formState.permanceTempName) {
            message.error('请选择履约模板');
            return;
          }
          if (!friendCheck.value) {
            if (formState.friends.length === 0) {
              message.error('请选择朋友');
              return;
            }
          }
          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: 1, // 是否指定对手 0：不指定 1：指定 uint32
            MatchAccIDs: res.friends, // 仓单贸易对手资金账号ID集合(指定对手时填写) uint32
            OrderQty: res.OrderQty, // 委托数量(可挂部分数据量) ======
            DeliveryGoodsID: props.selectedRow.deliverygoodsid, // 交割商品商品ID  // 有仓单求购
            WRPriceType: 1, // 价格方式 1：固定价 2：浮动价
            FixedPrice: res.FixedPrice, // 固定价格
            PriceFactor: 1, // 价格系数(浮动价时填写)
            PriceMove: 0, // 升贴水(浮动价时填写)
            TimevalidType: 3, // 时间有效类型 1：当日有效 2：本周有效 3：指定时间有效 4：一直有效
            ValidTime: moment(formState.vidaliteTime).format('YYYY-MM-DD HH:mm:ss'), // 有效期限
            ClientOrderTime: moment().format('YYYY-MM-DD HH:mm:ss'),
            FirstRatio: 0, // 首付比例
            PerformanceTemplateID: res.permaceTempId, // 履约计划模板ID
            UserID: getUserId(),
            OperatorID: getUserId(), // 操作员账号ID
            BuyOrSell: 0, // 买卖方向 0买1卖
            PriceDisplayMode: 1, // 浮动价显示方式 1：合并显示 2：分开显示
            CanBargain: priceCheck.value ? 1 : 0, // 挂牌是否可议价0:不可1:可-摘牌是否议价
            Attachment1: '', // 附件1
            Attachment2: '', // 附件2
            Remark: '', // 备注
            ApplyID: 0, // 申请ID
            WRTradeGoods: [],
            CanPart: numCheck.value ? 0 : 1, // 是否允许部份摘牌0:不允许;1:允许
            WRStandardID: props.selectedRow.wrstandardid,
            HasWr: 1, // 无仓单挂牌  是否有无仓单
            DeliveryMonth: '',
            DelistMinQty: numCheck.value ? formState.delistingQty : res.delistingQty, // 起摘数量
            MarginFlag: 1, // 挂牌是否指定保证金 0:否 1:是
            MarginAlgorithm: 1, // 指定保证金方式 1:比率 2:固定
            MarginValue: +(formState.margin / 100), // 指定保证金设置值
            AllFriendsFlag: friendCheck.value ? 1 : 0, //是否全好友可见 0：否 1:是
            FactoryItems:
              props.selectedRow.wrResult != undefined
                ? props.selectedRow.wrResult.map((it: WrResultItem) => {
                  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,
      rules,
      formState,
      formRef,
      getCanUseMoney,
      priceCheck,
      increasePrice,
      decreasePrice,
      ...useBlocksAccount(formState),
      ...useBlocksMoney(formState),
      showPermance,
      choosePermance,
      openPermance,
      numCheck,
      increaseNumber,
      decreaseNumber,
      friendCheck,
      showFriend,
      chooseFriend,
      openFriend,
      getFriendLength,
      limiteFriends,
    };
  },
});
</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;
    }
  }
}

.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;
}
.ant-input-suffix {
  position: absolute;
  right: -25px;
}
.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-label {
  width: 80px;
}
.ant-form.dialogForm .ant-row.ant-form-item .ant-form-item-control-wrapper {
  width: calc(100% - 80px);
}
.ant-form.dialogForm {
  .ant-row.btnCenter.ant-form-item {
    width: 100%;
    .ant-col.ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}
</style>