<template>
    <el-dialog :title="title" :visible.sync="open" width="1200px" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="height: 600px;overflow: hidden auto;">
              <el-form-item label="交易所" prop="exchange_type">
                <el-select
                  v-model="form.exchange_type"
                  style="width: 100%;"
                  placeholder="请选择交易所"
                  clearable
                  filterable
                  size="small"
                  @change="onchangeForm"
                >
                  <el-option
                    v-for="dict in exchangeTypes"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="订单类型" prop="symbol_type">
                <el-radio-group v-model="form.symbol_type">
                  <el-radio :label="1">现货</el-radio>
                  <el-radio :label="2">合约</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- <el-form-item label="对冲类型" prop="cover_type">
              <el-radio-group v-model="form.cover_type">
                <el-radio :label="0">无对冲</el-radio>
                <el-radio :label="1" :disabled="form.symbol_type==2">现货对合约</el-radio>
                <el-radio :label="2" :disabled="form.symbol_type==1">合约对合约</el-radio>
                <el-radio :label="3" :disabled="form.symbol_type==1">合约对现货</el-radio>
              </el-radio-group>
            </el-form-item> -->
              <el-form-item label="api用户" prop="api_id">
                <el-row>
                  <el-col :span="21">
                    <el-select
                      v-model="form.api_id"
                      multiple
                      style="width: 100%;"
                      placeholder="请选择api用户"
                      clearable
                      filterable
                      size="small"
                    >
                      <el-option
                        v-for="dict in lineUsers"
                        :key="dict.id"
                        :label="dict.apiName"
                        :value="dict.id"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="3">
                    <el-button size="mini" type="primary" style="margin-left: 10px;" @click="onSelectAll">全选</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
              <!-- <el-form-item label="交易对组id" prop="groupId">
              <el-input
                v-model="form.groupId"
                placeholder="交易对组id"
              />
            </el-form-item> -->
              <el-form-item v-if="title==='批量添加'" label="交易对组" prop="symbol_group_id">
                <el-select
                  v-if="title==='批量添加'"
                  v-model="form.symbol_group_id"
                  style="width: 100%;"
                  placeholder="请选择交易对组"
                  clearable
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="dict in comSymbols"
                    :key="dict.id"
                    :label="dict.groupName"
                    :value="dict.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-else label="交易对" prop="symbol">
                <el-select
                  v-model="form.symbol"
                  style="width: 100%;"
                  placeholder="请选择交易对"
                  clearable
                  filterable
                  :remote-method="getSymbol"
                  :loading="searchLoding"
                  remote
                  size="small"
                  @change="onchangeSymbol"
                >
                  <el-option
                    v-for="dict in comSymbols"
                    :key="dict.id || dict.symbol"
                    :label="dict.symbol"
                    :value="dict.symbol"
                  />
                  <div class="page">
                    <pagination
                      v-show="symbol.total>0"
                      :background="false"
                      :total="symbol.total"
                      layout="prev, pager, next"
                      :page.sync="symbol.pageIndex"
                      :limit.sync="symbol.pageSize"
                      @pagination="getSymbol"
                    />
                  </div>
                </el-select>
              </el-form-item>
              <el-form-item label="购买方向" prop="site">
                <el-radio-group v-model="form.site">
                  <el-radio label="BUY">买（多）</el-radio>
                  <el-radio label="SELL" :disabled="form.order_type==1">卖（空）</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="购买金额（U）" prop="buy_price">
                <el-input
                  v-model="form.buy_price"
                  placeholder="购买金额（U）"
                />
              </el-form-item>
              <el-form-item label="价格模式" prop="price_pattern">
                <el-radio-group v-model="form.price_pattern">
                  <el-radio label="percentage">百分比</el-radio>
                  <el-radio label="mixture" :disabled="title==='批量添加'">主单实价委托百分比</el-radio>
                  <el-radio label="aicoin" :disabled="title==='批量添加'">aiCoin买入点</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.price_pattern === 'percentage'" label="下单百分比" prop="price">
                <el-input
                  v-model="form.price"
                  placeholder="下单百分比"
                />
              </el-form-item>
              <el-row v-else type="flex">
                <el-col :span="14">
                  <el-form-item label="下单价(实际价格)" prop="price">
                    <el-input
                      v-model="form.price"
                      placeholder="下单价(实际价格)"
                    >
                      <template #prepend>
                        <el-select v-if="form.price_pattern === 'aicoin'" v-model="aicoinPrice" placeholder="请选择" style="width: 150px;" @change="onchangeAicoin">
                          <el-option v-for="o in JSON.stringify(aicoins) !== '{}' ? options : []" :key="o.label" :label="o.label" :value="aicoins[o.value] || ''">
                            <span style="float: left">{{ o.label }}</span>
                            <span style="float: right">{{ aicoins[o.value] || 0 }}</span>
                          </el-option>
                        </el-select>
                      </template>
                      <template #append>
                        <span v-if="form.price_pattern !== 'percentage'">{{ comPrice }}</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="计算百分比">
                    <el-inputNumber v-model="percenter" controls-position="right" :min="0" style="width: 100px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-button type="primary" style="margin-left: 50px;" @click="onCalc">计算</el-button>
                </el-col>
              </el-row>
              <el-form-item label="止盈百分比" prop="profit">
                <el-input
                  v-model="form.profit"
                  placeholder="止盈百分比"
                />
              </el-form-item>
              <!-- <el-form-item label="亏损百分比" prop="stop_price">
              <el-input
                v-model="form.stop_price"
                placeholder="亏损百分比"
              />
            </el-form-item> -->
              <!-- <template v-if="form.cover_type!=0">
              <el-form-item label="对冲单购买类型" prop="hedge_buy_type">
                <el-radio-group v-model="form.hedge_buy_type">
                  <el-radio :label="1">百分比</el-radio>
                  <el-radio :label="2">实际金额</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="对冲总购买金额" prop="HedgeBuyTotal">
                <el-input
                  v-model.number="form.HedgeBuyTotal"
                  type="number"
                  placeholder="对冲总购买金额"
                />
              </el-form-item>
              <el-form-item label="对冲止盈百分比" prop="HedgeTakeProfit">
                <el-input
                  v-model.number="form.HedgeTakeProfit"
                  type="number"
                  placeholder="对冲止盈百分比"
                />
              </el-form-item>
              <el-form-item label="对冲止损百分比" prop="HedgeStopLoss">
                <el-input
                  v-model.number="form.HedgeStopLoss"
                  type="number"
                  placeholder="对冲止损百分比
"
                />
              </el-form-item>
            </template> -->
              <!-- <el-form-item label="对冲百分比" prop="cover_rate">
              <el-input
                v-model="form.cover_rate"
                placeholder="对冲百分比"
              />
            </el-form-item>
            <el-form-item label="加仓后盈利比例" prop="profit_rate">
              <el-input
                v-model="form.profit_rate"
                placeholder="加仓后盈利比例"
              />
            </el-form-item>
            <el-form-item label="对冲平仓最大次数" prop="hedge_close_count">
              <el-input
                v-model.number="form.hedge_close_count"
                type="number"
                placeholder="对冲平仓最大次数"
              />
            </el-form-item>
            <el-form-item label="随机对冲百分比" prop="hedge_trigger_percent">
              <el-row :gutter="20">
                <el-col :span="11"><el-input v-model.number="form.hedge_trigger_percent" type="number" placeholder="最小值"><template #append>最小值</template></el-input></el-col>
                <el-col :span="11"><el-input v-model.number="form.hedge_trigger_percent_max" type="number" placeholder="最大值"><template #append>最大值</template></el-input></el-col>
              </el-row>
            </el-form-item> -->
              <el-form-item label="主单类型" prop="main_order_type">
                <el-radio-group v-model="form.main_order_type">
                  <el-radio label="LIMIT">限价</el-radio>
                  <el-radio label="MARKET">市价</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- <el-form-item label="对冲单下单类型" prop="hedge_order_type">
              <el-radio-group v-model="form.hedge_order_type">
                <el-radio label="LIMIT">限价</el-radio>
                <el-radio label="MARKET">市价</el-radio>
              </el-radio-group>
            </el-form-item> -->
              <!-- <el-form-item label="加仓主单类型" prop="add_position_main_type">
              <el-radio-group v-model="form.add_position_main_type">
                <el-radio label="LIMIT">限价</el-radio>
                <el-radio label="MARKET">市价</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="加仓对冲单类型" prop="add_position_hedge_type">
              <el-radio-group v-model="form.add_position_hedge_type">
                <el-radio label="LIMIT">限价</el-radio>
                <el-radio label="MARKET">市价</el-radio>
              </el-radio-group>
            </el-form-item> -->
              <el-form-item label="对标价类型" prop="price_type">
                <el-radio-group v-model="form.price_type">
                  <el-radio label="new">最新价</el-radio>
                  <el-radio label="mixture" :disabled="title==='批量添加'">标记价</el-radio>
                  <el-radio label="aicoin" :disabled="title==='批量添加'">aicoin</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="订单过期时间" prop="profit_rate">
                <el-input
                  v-model.number="form.expire_hour"
                  class="hour"
                  type="number"
                  placeholder="订单过期时间"
                >
                  <template slot="append">小时</template>
                </el-input>
              </el-form-item>
              <el-form-item v-if="title==='批量添加'" label="批量下单次数" prop="order_num">
                <el-input
                  v-model.number="form.order_num"
                  min="1"
                  type="number"
                  placeholder="批量下单次数"
                />
              </el-form-item>
              <el-form-item v-if="title==='批量添加'" label="执行类型" prop="script">
                <el-radio-group v-model="form.script">
                  <el-radio label="1"><span>脚本执行</span></el-radio>
                  <el-radio label="0">直接执行</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="主单亏损百分比" prop="reduce_price">
                <el-input v-model.number="form.reduce_price" type="number" placeholder="主单亏损百分比" />
              </el-form-item>
              <el-form-item label="主单减仓数量百分比" prop="reduce_num">
                <el-input v-model.number="form.reduce_num" type="number" placeholder="主单减仓数量百分比" />
              </el-form-item>
              <el-form-item label="主单减仓后止盈价百分比" prop="reduce_take_profit">
                <el-input v-model.number="form.reduce_take_profit" type="number" placeholder="主单减仓后止盈价百分比">
                  <template v-if="title!=='批量添加'" #append>{{ re_take_profit_ratio }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="主单减仓后止损价百分比" prop="reduce_stop_price">
                <el-input v-model.number="form.reduce_stop_price" type="number" placeholder="主单减仓后止损价百分比" />
              </el-form-item>
              <el-row>
                <el-col :span="4"><el-form-item label="主单加仓配置" /></el-col>
                <el-col :span="2"><el-button type="primary" size="mini" @click="onAddExt(0)">新增</el-button></el-col>
                <el-col v-if="title!=='批量添加'" :span="2"><el-button type="primary" size="mini" :disabled="form.ext && form.ext.length===0" @click="onCalculate">计算</el-button></el-col>
              </el-row>
              <div v-for="(item,index) in form.ext" :key="index" class="exts">
                <el-row :gutter="20">
                  <el-col :span="5">
                    <div style="margin-bottom: 8px;">加仓类型</div>
                    <el-radio-group v-model="item.addPositionOrderType" size="mini">
                      <el-radio label="LIMIT">限价</el-radio>
                      <el-radio label="MARKET">市价</el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col :span="5">
                    <div style="margin-bottom: 8px;">加仓方式</div>
                    <el-radio-group v-model="item.addPositionType" size="mini">
                      <el-radio :label="1">百分比</el-radio>
                      <el-radio :label="2">实际金额</el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col :span="5">加仓下跌百分比<el-input v-model.number="item.addPositionPriceRatio" size="mini" type="number" placeholder="加仓下跌百分比" /></el-col>
                  <el-col :span="5">加仓数值<el-input v-model.number="item.addPositionVal" size="mini" type="number" placeholder="加仓数值" /></el-col>
                  <el-col :span="4">加仓后止盈价百分比<el-input v-model.number="item.takeProfitRatio" size="mini" type="number" placeholder="止盈百分比">
                    <template v-if="title!=='批量添加'" #append>{{ ext[index] ? ext[index].reTakeProfitRatio : 0 }}</template>
                  </el-input></el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 10px;">
                  <el-col :span="5">减仓下跌百分比<el-input v-model.number="item.reducePriceRatio" size="mini" type="number" placeholder="减仓下跌百分比" /></el-col>
                  <el-col :span="5">减仓数量百分比<el-input v-model.number="item.reduceNumRatio" size="mini" type="number" placeholder="减仓数量百分比" /></el-col>
                  <el-col :span="5">减仓后止盈价百分比<el-input v-model.number="item.reduceTakeProfitRatio" size="mini" type="number" placeholder="减仓后止盈百分比">
                    <template v-if="title!=='批量添加'" #append>{{ ext[index] ? ext[index].reduceReTakeProfitRatio : 0 }}</template>
                  </el-input></el-col>
                  <el-col :span="5">减仓后止损价百分比<el-input v-model.number="item.reduceStopLossRatio" size="mini" type="number" placeholder="减仓后止损百分比" /></el-col>
                  <el-col :span="4"><div style="margin-bottom: 14px;" /><el-button size="mini" type="danger" @click="onAddExt(1,index)">删除</el-button></el-col>
                </el-row>
              </div>
              <el-form-item label="是否保存模板" prop="save_template">
                <el-radio-group v-model="form.save_template">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">保存并下单</el-radio>
                  <el-radio label="2">仅保存模板</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="模板名称" prop="template_name">
                <el-input
                  v-model="form.template_name"
                  placeholder="模板名称"
                />
              </el-form-item>

            </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { resetForm } from '@/utils/costum';

export default {
    name: "AddPosition",
    props: {
        open: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form:{},
      options: [
        { label: '买入点1', value: 'buyPoint1' },
        { label: '买入点2', value: 'buyPoint2' },
        { label: '买入点3', value: 'buyPoint3' },
        { label: '卖出点1', value: 'sellPoint1' },
        { label: '卖出点2', value: 'sellPoint2' },
        { label: '卖出点3', value: 'sellPoint3' }
      ],
      buyer: [
        { v: 'BUY', l: '买（多）' },
        { v: 'SELL', l: '卖（空）' }
      ],
        }
    },
    methods: {
        resetForm(){
            this.form={
                id:null,
                exchangeType:"",
                orderType:1,
                symbol:"",
                apiId:null,
                site:'',
                buyPrice:null,
                pricePattern:'',
                price:null,
                profit:null,
                addPositionOrderType:'LIMIT',
                priceType:null,
                reTakeProfitRatio:null,
                reducePriceRatio:null,
                reduceNumRatio:null,
                reduceTakeProfitRatio:null,
                reduceStopLossRatio:null,
            }
        },
        //提交
        submitForm() {

        },
        //取消
        cancel() {
            this.$emit("update:open", false)
        }
    }
}
</script>

<style scoped></style>