<template>
  <!-- 挂牌求购 -->
  <a-drawer placement="right" :closable="false" :visible="visible" :width="1052" :destroyOnClose="true" class="post-buying-container">
    <div class="collapse">
      <div class="collapse-close" @click="cancelAction">
        <DoubleRightOutlined />
      </div>
      <slot name="titleLeft"></slot>
    </div>
    <div class="collapseCont">
      <div class="title">{{ isBuy() ? '挂牌求购' : '挂牌卖出' }}</div>
      <div class="content highContent">
        <div class="title_right">
          <span class="tline"></span>
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-B" />
          </svg>
          <span @click="changeDirection">{{ isBuy() ? '卖出' : '求购' }}</span>
        </div>
        <a-row>
          <a-col :span="14">
            <div class="post_buying_chart">
              <div class="buying_chart__nav">
                <div class="content--left">{{ selectedRow.goodscode }}</div>
                <div class="content--right">{{ selectedRow.goodsname }}</div>
              </div>
              <div class="chart-tips__last">
                <div :class="['content--left', handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')]">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</div>
                <div class="content--right">
                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteChange_out(selectedRow.refgoodscode) }}</span>
                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ quoteAmplitude_out(selectedRow.refgoodscode) }}</span>
                </div>
              </div>
              <a-row>
                <a-col :span="4" :offset="2">最高价</a-col>
                <a-col :span="6">
                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'highest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'highest') }}</span>
                </a-col>
                <a-col :span="4" :offset="2">开盘价</a-col>
                <a-col :span="6">
                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'opened')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'opened') }}</span>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="4" :offset="2">最低价</a-col>
                <a-col :span="6">
                  <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'lowest')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'lowest') }}</span>
                </a-col>
                <a-col :span="4" :offset="2">昨结价</a-col>
                <a-col :span="6">{{ getQuoteValue_out(selectedRow.refgoodscode, 'presettle') }}</a-col>
              </a-row>
              <!-- 图表  -->
              <mtp-chart class="chart-content" :goodscode="selectedRow.refgoodscode" :show-indicator="false" />
            </div>
          </a-col>
          <a-col :span="10">
            <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>
                        <a-radio-group class="commonRadioGroup" v-model:value="formState.priceType">
                          <a-radio :value="2">固定价</a-radio>
                          <!-- 掉期交易商有固定价和浮动价选择 -->
                          <!-- 普通交易商只有固定价 -->
                          <a-radio :value="3" v-if="!useUserType()">浮动价</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="参考价">
                        <span :class="handleQuotePriceColor_out(selectedRow.refgoodscode, 'last')">{{ getQuoteValue_out(selectedRow.refgoodscode, 'last') }}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="!isFloat()">
                      <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-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="估算价">
                        <span class="white">{{ getPrice() }}</span>
                      </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" :max="getMaxNum()" v-model:value="formState.OrderQty" />
                        <MinusOutlined @click="decreaseNum" />
                        <PlusOutlined @click="increaseNum" />
                        <span class="input-enumdicname">{{ selected.enumdicname }}</span>
                      </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() ? selected.minivalue : 0 }}</span>
                          <span>{{ getMaxNum() }}{{ selected.enumdicname }}</span>
                        </div>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" class="relative mt20">
                      <a-form-item :label="'挂牌金额'">
                        <span class="white ml8">{{ getMoney() }}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="getMargin()">
                      <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">{{ canUseMoney() }}</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>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts">
import { Des } from '@/common/components/commonDes';
import Drawer from '@/common/components/drawer/index.vue';
import { TradeMode } from '@/common/constants/enumCommon';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { useTaAccount } from '@/common/setup/account';
import { validateAction } from '@/common/setup/form';
import { _closeModal } from '@/common/setup/modal/modal';
import { queryTableList } from '@/common/setup/table';
import { getQuoteValue_out, handleNoneValue, handleQuotePriceColor, handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange, quoteChange_out } from '@/common/setup/table/tableQuote';
import { useListingTradeNumAndPrice } from '@/common/setup/trade';
import { ListingTradeNumAndPrice } from '@/common/setup/trade/interface';
import { useTodayMargin } from '@/hooks/margin';
import { getSelectedAccountId } from '@/services/bus/account';
import { getGoodsAgreeunitByGoodsCode, getQuoteDayInfoByCode, getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
import { geLoginID_number } from '@/services/bus/login';
import { getMarketByTradeMode, getMarketIdsByTradeMode } from '@/services/bus/market';
import { queryTradePosition } from '@/services/go/ermcp/order';
import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
import { QueryTjmdTodayAccountMarginReq } from '@/services/go/Tjmd/interface';
import { diaoQiOrder } from '@/services/socket/order';
import { OrderReq } from '@/services/socket/order/interface';
import Bus from '@/utils/eventBus';
import MtpChart from '@/common/components/echarts/index.vue';
import { DoubleRightOutlined, LineChartOutlined, MinusOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons-vue';
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
import { defineComponent, PropType, ref } from 'vue';
import { RefGoodsList } from '../../interface';
import { useUserType } from '../setup';
import { FormParam } from './interface';
import { handleForm, isFloat, useBuySellDirection, useChart, useNum, usePrice } from './setup';

export default defineComponent({
  emits: ['cancel', 'update'],
  name: ModalEnum.spot_trade_warehouse_post_buying,
  components: {
    Des, Drawer, PlusOutlined, MinusOutlined, SwapOutlined, LineChartOutlined, DoubleRightOutlined, MtpChart
  },
  props: {
    selectedRow: {
      type: Object as PropType<RefGoodsList>,
      default: {},
    },
  },
  setup(props, context) {
    // 查询 我的 持仓
    const { tableList, queryTable } = queryTableList<QueryTradePositionRsp>();
    queryTable(queryTradePosition);

    // 外部参考行情数据
    const selected = getQuoteDayInfoByCode(props.selectedRow.refgoodscode);

    const marginParam: QueryTjmdTodayAccountMarginReq = {
      accountid: getSelectedAccountId()!.toString(),
      goodsid: props.selectedRow.goodsid,
      marketids: getMarketIdsByTradeMode(TradeMode.DiaoQi),
    };
    // 获取保证金比例
    const { getReckonMarginTypeAndValueByTradeMode } = useTodayMargin(marginParam);
    // 控制弹窗
    const { visible, cancel } = _closeModal(context);
    const cancelAction = () => cancel()

    // 表单
    const { rules, formState, formRef } = handleForm();
    const loading = ref<boolean>(false);
    // 买卖方向
    const { direction, changeDirection, isBuy } = useBuySellDirection();
    // 资金账号
    const { canUseMoney, accountList } = useTaAccount<FormParam>(formState);
    // 金额 数量 保证金
    const param: ListingTradeNumAndPrice<FormParam> = {
      formState,
      goodscode: props.selectedRow.refgoodscode,
      isFloat,
      canUseMoney,
    };
    const { getFloatPrice, getMoney } = useListingTradeNumAndPrice<FormParam>(param);
    // 保证金
    const getMargin = () => {
      let result = '--';
      const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
      if (marginType) {
        // 保证金方式 1:比率 2:固定
        if (marginType === 1) {
          if (getMoney()) {
            // 履约保证金=挂牌金额*保证金比例
            result = (Math.round(getMoney() * marginValue * 100) / 100).toString();
          }
        } else {
          if (formState.OrderQty) {
            // 履约保证金=挂牌数量*保证金固定值
            result = (Math.round(formState.OrderQty * marginValue * 100) / 100).toString();
          }
        }
      }
      return result;
    };
    // 最大数量
    const getMaxNum = () => {
      let result = 0;
      const goodscode = props.selectedRow.goodscode;
      const [marginType, marginValue] = getReckonMarginTypeAndValueByTradeMode(TradeMode.DiaoQi);
      // 可用资金
      const temp = +canUseMoney();
      const money = temp > 0 ? temp : 0;
      const price = isFloat() ? getQuoteDayInfoByCodeFindPrice(props.selectedRow.refgoodscode) : formState.FixedPrice;
      if (marginType && money && price && price !== '--') {
        // 保证金方式 1:比率 2:固定
        if (marginType === 1) {
          // 合约单位
          const agreeunit = getGoodsAgreeunitByGoodsCode(goodscode);
          // 最大可挂牌数量=可用/（价格*合约单位*保证金比例
          result = money / (+price * marginValue * agreeunit);
        } else {
          // 最大可挂牌数量=可用/保证金固定值
          result = money / marginValue;
        }
      }
      return +result.toFixed(0);
    };
    // 估算价
    function getPrice() {
      let result = '--';
      const goodsPrice = getQuoteDayInfoByCodeFindPrice(props.selectedRow.refgoodscode);
      if (goodsPrice && goodsPrice !== '--') {
        // 有实时行情价格
        result = ((goodsPrice as number) + formState.PriceMove).toFixed(2);
      }
      return result;
    }

    function submit() {
      validateAction<FormParam>(formRef, formState).then((res) => {
        const { goodsid } = props.selectedRow;
        const param: OrderReq = {
          ClientSerialNo: uuidv4(), // 客户端流水号
          ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
          ClientType: 4, // 终端类型
          LoginID: geLoginID_number()!, // 登陆账号
          AccountID: res.accountid, // 交易账号
          GoodsID: goodsid, // 商品ID
          MarketID: getMarketByTradeMode(TradeMode.DiaoQi)?.marketid, // 市场ID
          ValidType: 1, // 校验类型 当日有效
          OperateType: 1, // 操作类型: 申请
          OrderSrc: 1, // 单据来源: 客户端下单
          RelatedID: selected!.orderid, // 操作员账号ID
          OperatorID: Number(geLoginID_number()),
          // MarketMaxSub: number // 市价允许最大偏差(做市)
          OrderQty: res.OrderQty, // 委托数量
          BuyOrSell: direction.value, // 买卖方向  0 买 1 卖
          BuildType: 1, // 下单类型  1 建 2 平
          // CurtQuotePrice: 0, // 保留，计算冻结金额使用
          // SpPrice: 0 ,// 止盈价格
          // SlPrice: 0 , // 止损价格
          PriceMode: res.priceType, // 取价方式
          TimevalidType: 1, // 时间有效类型 单日有效
          TriggerType: 1, // 预埋单触发类型
          // TriggerPrice: number // 预埋单触发价格
          ListingSelectType: 1, // 挂牌点选类型 1：挂牌 2：摘牌 3：先摘后挂
          DelistingType: 2, // 摘牌类型 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
        };
        if (isFloat()) {
          // 浮动价
          param.MarketMaxSub = res.PriceMove; // 基差
        } else {
          // 浮动价 不传价格，固定价才传价格
          param.OrderPrice = res.FixedPrice;
        }
        requestResultLoadingAndInfo(diaoQiOrder, param, loading, ['挂牌求购成功', '挂牌求购失败:']).then(() => {
          cancel(true);
          Bus.$emit('spotTrade', true);
        });
      });
    }
    return {
      submit,
      cancel,
      cancelAction,
      visible,
      rules,
      formState,
      formRef,
      isFloat,
      getMaxNum,
      getMoney,
      getMargin,
      getFloatPrice,
      direction,
      changeDirection,
      isBuy,
      useUserType,
      canUseMoney,
      accountList,
      ...usePrice(),
      ...useNum(getMaxNum),
      ...useChart(),
      getPrice,
      loading,
      selected,
      handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude,
      handleQuotePriceColor_out, handleSubcriteOnDemandQuote, quoteAmplitude_out, quoteAmplituOfVibration, quoteChange_out, getQuoteValue_out, getQuoteDayInfoByCode
    };
  },
});
</script>

<style lang="less">
.post-buying-container {
    top: 101px;
    .ant-drawer-content-wrapper {
        height: 510px;
    }
}
.chart-content {
    height: 305px;
    .mtp-echarts {
        width: 95% !important;
    }
}
.formBar {
    height: 100%;
}
.post_buying_chart {
    [theme='light'] & {
        --bgcolor: #fff;
        --tab-border-color: #dae5ec;
        --tab-checked-color: #0866b8;
        --tab-checked-bgcolor: #d4e0ff;
        --slider-border-color: #b2c4dd;
        --slider-bgcolor: #edf2f7;
        --slider-button-color: #b2c4dd;
        --row-border-color: #dae5ec;
        --row-title-color: #acb8c0;
        --row-content-color: #3c454b;
        --tik-title-bgcolor: #ecf2f5;
        --tik-title-color: #7a8a94;
    }
    color: @m-grey67;

    // background-color: var(--bgcolor, #0e0e0f);

    // background: @m-blue37;
    // color: @m-grey67;
    .buying_chart {
        display: flex;

        // background-color: @m-blue36;
        &__nav {
            display: flex;
            justify-content: center;
            align-items: center;

            .content {
                &:first-child:not(:last-child) {
                    margin-right: 16px;
                }

                &--left {
                    font-size: 16px;
                    color: var(--row-content-color, #acb8c0);
                    margin-right: 6px;
                }

                &--right {
                    font-size: 24px;
                    color: #fc9618;
                }
            }
        }
    }
    .chart-tips {
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 100%;

        &__last {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px 0;
            .content {
                &--left {
                    font-size: 24px;
                    margin-right: 16px;
                }

                &--right {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }
            }
        }
    }
}
.post_buying {
    width: 100%;
    height: 100%;
    .flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    .ant-form {
        height: 100%;
    }
    .ant-form.dialogForm .ant-row.ant-form-item {
        margin-bottom: 10px;
    }
    .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;
        }
    }
}
.title_right {
    color: @m-blue25;
    position: absolute;
    top: 8px;
    right: 19px;
    cursor: pointer;
    display: flex;
    .tline {
        width: 1px;
        height: 18px;
        background: @m-black47;
        margin-top: 2px;
        box-shadow: 1px 0px 0px 0px @m-black48;
    }
    .icon {
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        margin: 3px 7px 3px 17px;
        fill: @m-blue25;
    }
    span {
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
    }
}
.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;
}
.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>