<template>
  <div class="markets-pair-list exchange-store bg-plain" style="margin-top: 8px;">
    <div class="px-3 pri">
      <div class="nav nav-pills" style="border-bottom: 1px solid #2e2e2e;">
        <div class="nav-item">
          <a class="nav-link" :class="{ active: form.type == 2 }" @click="form.type = 2">{{
            $t("contract.d9")
          }}</a>
        </div>
        <div class="nav-item">
          <a class="nav-link" :class="{ active: form.type == 1 }" @click="form.type = 1">{{
            $t("contract.e0")
          }}</a>
        </div>
      </div>
    </div>
    <div class="nav nav-pills px-3 py-3">
      <div class="nav-item" style="background-color: #2e2e2e;width:50%;text-align: center;">
        <a class="nav-link" @click="tab = 1">{{
          $t("contract.d5")
        }}</a>
      </div>
      <!-- <div class="nav-item">
        <a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{
          $t("contract.d6")
        }}</a>
      </div> -->
      <div class="flex-fill px-3 justify-content-end d-flex align-items-center" style="background-color: #2e2e2e;width:50%;text-align: center;">
        <el-popover style="display: block;width: 100%;"
          placement="bottom"
          width="100"
          v-model="visible"
          trigger="manual"
        >
          <div
            class="rounded border p-1 bg-black pointer"
            slot="reference"
            @click="visible = !visible"
          >
            <!-- {{ $t("contract.b0") }} -->
            <span class="fn-16"> {{ form.lever_rate }}X </span>
            <i class="el-icon-edit text-primary"></i>
          </div>
          <div class="list">
            <div
              class="el-select-dropdown__item"
              @click="
                selectLever(item);
                visible = false;
              "
              v-for="item in lever_rage"
              :key="item"
            >
              {{ item }}X
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="content-box d-flex" style="flex-wrap: wrap;justify-content: space-between;">
      <!-- 买入表单 -->
      <div style="width: 50%;" class="px-3">
        <div class="d-flex my-4 align-items-center">
          <div class="input-group input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ $t("contract.d8") }}</span>
            </div>
            <template v-if="form.type == 1">
              <input
                type="number"
                v-model="buyform.entrust_price"
                class="form-control"
                placeholder=""
              />
              <div class="input-group-append">
                <span class="input-group-text">USDT</span>
              </div>
            </template>
            <template v-if="form.type == 2">
              <input
                type="text"
                disabled
                :value="$t('contract.d9')"
                class="form-control"
                :placeholder="$t('contract.d9')"
              />
            </template>
          </div>
          
        </div>
        <div class="input-group mb-4 input-group-sm">
          <div class="input-group-prepend">
            <!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> -->
            <span class="input-group-text">{{ $t("contract.l2") }}</span>
          </div>

          <input
              type="number"
              class="form-control"
              v-model="marginBuy"
              :placeholder="tips"
			  @input="inputEnter(false)"
			  title=""
          />
          <!-- <div class="input-group-append">
              <span class="input-group-text">{{ $t("contract.e2") }}</span>
          </div> -->
        </div>
        <div class="px-2" v-if="this.tab == 1">
					<!-- :value="activeStepBuy"
					@input="sliderChangeBuy" -->
          <el-slider
			  v-model="activeStepBuy"
              @change="sliderChangeBuy"
              :format-tooltip="tooltip"
              :marks="marks"
              :step="25"
          ></el-slider>
        </div>
        <div class="d-flex justify-content-between mb-3 color_7c fn-10">
          <div>0</div>
          <div>100%</div>
        </div>
        <!-- 开仓 -->
        <div v-if="tab == 1" class="kaicang">
          <div class="d-flex justify-content-between mb-3">
            <div class="color_7c">{{ $t("contract.e7") }} </div>
            <div>{{ maxNum }}</div>
          </div>
          <div class="d-flex justify-content-between mb-3">
              <div class="color_7c">{{ $t("contract.e1") }}</div>
              <div>{{ amountBuy }} </div>
          </div>
          <div class="d-flex justify-content-between mb-4">
            <div class="color_7c">{{ $t("contract.a3") }}</div>
            <div>
              {{ accountInfo.usable_balance }} USDT
              <i
                class="el-icon-sort"
                @click="$router.push('/wallet/assets/exchange')"
              ></i>
            </div>
          </div>
        </div>
        <!-- 平仓 -->
        <div v-if="tab == 2">
          <div class="d-flex justify-content-between">
            <div>{{ $t("contract.e4") }}：</div>
            <div>{{ multiplePositions }} {{ $t("contract.e2") }}</div>
          </div>
          <div class="d-flex justify-content-between mb-4">
            <div>{{ $t("contract.e5") }}:</div>
            <div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
          </div>
        </div>
        <!-- 止盈止损 -->
        <div class="d-flex mb-4 border-top py-2">
          <input type="checkbox" name="" id="" v-model="checkboxBuy">
          <div>{{ $t("contact.Profit&Loss") }}</div>
        </div>
        <template v-if="checkboxBuy">
          <div class="input-group mb-4 input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ $t("contract.j3") }}</span>
            </div>
            <input
                type="number"
                class="form-control"
                v-model="buyform.pri1"
                :placeholder="tips"
            />
          </div>
          <div class="input-group mb-4 input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ $t("contract.j4") }}</span>
            </div>
            <input
                type="number"
                class="form-control"
                v-model="buyform.pri2"
                :placeholder="tips"
            />
          </div>
        </template>
      </div>
      <!-- 卖出表单 -->
      <div style="width: 50%;" class="px-3">
        <div class="d-flex my-4 align-items-center">
          <div class="input-group input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ $t("contract.d8") }}</span>
            </div>
            <template v-if="form.type == 1">
              <input
                type="number"
                v-model="sellform.entrust_price"
                class="form-control"
                placeholder=""
              />
              <div class="input-group-append">
                <span class="input-group-text">USDT</span>
              </div>
            </template>
            <template v-if="form.type == 2">
              <input
                type="text"
                disabled
                :value="$t('contract.d9')"
                class="form-control"
                :placeholder="$t('contract.d9')"
              />
            </template>
          </div>
          
        </div>
        <div class="input-group mb-4 input-group-sm">
          <div class="input-group-prepend">
            <!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> -->
            <span class="input-group-text">{{ $t("contract.l2") }}</span>
          </div>

          <input
              type="number"
              class="form-control"
              v-model="marginSell"
              :placeholder="tips"
			  @input="inputEnter(true)"
			  title=""
          />
          <!-- <div class="input-group-append">
              <span class="input-group-text">{{ $t("contract.e2") }}</span>
          </div> -->
        </div>
        <div class="px-2" v-if="this.tab == 1">
			<!-- :value="activeStepSell"
			@input="sliderChangeSell" -->
          <el-slider
			  v-model="activeStepSell"
			  @change="sliderChangeSell"
              :format-tooltip="tooltip"
              :marks="marks"
              :step="25"
          ></el-slider>
        </div>
        <div class="d-flex justify-content-between mb-3 color_7c fn-10">
          <div>0</div>
          <div>100%</div>
        </div>
        <!-- 开仓 -->
        <div v-if="tab == 1" class="kaicang">
          <div class="d-flex justify-content-between mb-3">
            <div class="color_7c">{{ $t("contract.e7") }} </div>
            <!-- <div>{{ accountInfo.account_equity }}</div> -->
			<div>{{ maxNum }}</div>
          </div>
          <div class="d-flex justify-content-between mb-3">
              <div class="color_7c">{{ $t("contract.e1") }}</div>
              <div>{{ amountSell }} </div>
          </div>
          <div class="d-flex justify-content-between mb-4">
            <div class="color_7c">{{ $t("contract.a3") }}</div>
            <div>
              {{ accountInfo.usable_balance }} USDT
              <i
                class="el-icon-sort"
                @click="$router.push('/wallet/assets/exchange')"
              ></i>
            </div>
          </div>
        </div>
        <!-- 止盈止损 -->
        <div class="d-flex mb-4 border-top py-2">
          <input type="checkbox" name="" id="" v-model="checkboxSell">
          <div>{{ $t("contact.Profit&Loss") }}</div>
        </div>
        <template v-if="checkboxSell">
          <div class="input-group mb-4 input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ $t("contract.j3") }}</span>
            </div>
            <input
                type="number"
                class="form-control"
                v-model="sellform.pri1"
                :placeholder="tips"
            />
          </div>
          <div class="input-group mb-4 input-group-sm">
            <div class="input-group-prepend">
              <span class="input-group-text">{{ $t("contract.j4") }}</span>
            </div>
            <input
                type="number"
                class="form-control"
                v-model="sellform.pri2"
                :placeholder="tips"
            />
          </div>
        </template>
      </div>
      <div class="exchange_button" v-if="tab == 1" style="width: 100%;">
        <div class="px-3 flex-fill mb-4">
          <button
            @click="ifOpenPosition(1)"
            type="button"
            class="sub w-24/24 btn-success btn btn-sm mb-3"
          >
            {{ $t("contract.d0") }}{{ symbol }}
            <!-- {{ $t("contract.d0") }} -->
            <!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> -->
          </button>
        </div>
        <div class="px-3 flex-fill">
          <button
            @click="ifOpenPosition(2)"
            type="button"
            class="sub w-24/24 btn-danger btn btn-sm mb-3"
          >
            {{ $t("contract.d2") }}{{ symbol }}
            <!-- {{ $t("contract.d2") }} -->
            <!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> -->
          </button>
          <!-- <div class="text-center"> -->
        </div>
      </div>
      <div class="" v-if="tab == 2" style="width: 100%;">
        <div class="px-2 flex-fill mb-4">
          <button
            @click="ifOpenPosition(1)"
            type="button"
            class="sub w-24/24 btn-success  btn btn-sm"
          >
            {{ $t("contract.d3") }}
          </button>
          <div class="text-center">
            {{ $t("contract.e9") }} {{ canMore }} {{ $t("contract.e2") }}
          </div>
        </div>
        <div class="px-2 flex-fill">
          <button
            @click="ifOpenPosition(2)"
            type="button"
            class="sub w-24/24 btn-danger btn btn-sm"
          >
            {{ $t("contract.d1") }}
          </button>
          <div class="text-center">
            {{ $t("contract.e9") }} {{ canEmpty }} {{ $t("contract.e2") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Contract from "@/api/contract.js";
import date from "@/utils/class/date.js";
import math from "@/utils/class/math.js";
export default {
  data() {
    return {
      tab: 1,
      
      visible: false,
      form: {
        type: 2,//2市价1限价
        lever_rate: ""
      },
      buyform: {
        entrust_price: undefined,
        amount:"",
        pri1: "",//止盈触发价
        pri2: ""//止损触发价
      },
      sellform: {
        entrust_price: undefined,
        amount:"",
        pri1: "",//止盈触发价
        pri2: ""//止损触发价
      },
        // 最多可开张数
        maxNum: 0,
        lever_rage: [],
        accountInfo: {},
        _time: null,
        unit_amount:0,
        marks:{
            25:'',
            50:'',
            75:''
        },
        marginBuy:0,
        marginSell:0,
        checkboxBuy: false,
        checkboxSell: false,
		activeStepBuy:0,
		activeStepSell:0
    };
  },
  props: {
    symbol: {
      default: "",
      type: String,
      required: false
    },
    holdPositionList: {
      default: () => [],
      type: Array,
      required: false
    },
    defaultPrice: {
      default: "",
      type: String | Number,
      required: false
    },
    newPriceObj: {
      default: () => {},
      type: Object,
      required: false
    },
    contractOpen: {}
  },
  watch: {
    symbol() {
      this.buyform.entrust_price = undefined;
      this.sellform.entrust_price = undefined;
      this.contractAccount();
      this.getSymbolDetail();
    },
    defaultPrice(n) {
      this.buyform.entrust_price = n;
      this.sellform.entrust_price = n;
    },
    newPriceObj(n) {
      if (n && this.buyform.entrust_price === undefined) {
        this.buyform.entrust_price = n.price;
      }
      if (n && this.sellform.entrust_price === undefined) {
        this.sellform.entrust_price = n.price;
      }
    },
    contractOpen(n, o) {
      if (n != o) {
        this.contractAccount();
      }
    }
  },
  destroyed() {
    clearInterval(this._time);
  },
  mounted() {
    if (this.symbol) {
      this.contractAccount();

      this.getSymbolDetail();
    }
    this._time = setInterval(() => {
      if (this.symbol) {
        // if (this.contractOpen) {
          this.contractAccount(true);
        // }
      }
    }, 3000);
  },
  computed: {
    tips(){
        // return this.unit_amount?(`${this.unit_amount}USDT`):''
        return this.unit_amount?(`USDT`):''
    },
    isLogin() {
      return Boolean(localStorage.token);
    },
    // 多仓持仓
    multiplePositions() {
      let item = this.holdPositionList.find(item => item.side == 1);
      if (!item) return 0;
      return item.hold_position;
    },
    // 可平多
    canMore() {
      let item = this.holdPositionList.find(item => item.side == 1);
      if (!item) return 0;
      return item.avail_position;
    },
    // 空仓持仓
    shortPosition() {
      let item = this.holdPositionList.find(item => item.side == 2);
      if (!item) return 0;
      return item.hold_position;
    },
    // 可以平空
    canEmpty() {
      let item = this.holdPositionList.find(item => item.side == 2);
      if (!item) return 0;
      return item.avail_position;
    },
    // activeStepBuy() {
    //   if (!this.buyform.amount || !this.maxNum) return 0;
    //   let num = (this.buyform.amount / this.maxNum) * 100;
    //   return num;
    // },
    // activeStepSell() {
    //   if (!this.sellform.amount || !this.maxNum) return 0;
    //   let num = (this.sellform.amount / this.maxNum) * 100;
    //   return num;
    // },
    // 保证金
    // margin() {
    //     if (!this.form.lever_rate) return '';
    //     return math.omitTo(this.form.amount*this.unit_amount / this.form.lever_rate, 4);
    // },
    amountBuy(){
        // console.info(this.form.lever_rate)
        // console.info(this.margin)
        if (!this.form.lever_rate || !this.marginBuy) return 0;
        let p = Math.round(this.marginBuy*this.form.lever_rate);

        this.buyform.amount=p;
        return p
    },
    amountSell(){
        // console.info(this.form.lever_rate)
        // console.info(this.margin)
        if (!this.form.lever_rate || !this.marginSell) return 0;
        let p = Math.round(this.marginSell*this.form.lever_rate);

        this.sellform.amount=p;
        return p
    }
  },
  methods: {
	inputEnter(boll) {
		if(boll){
			this.marginSell = this.marginSell
			    .replace(/[^\d.]/g, "") // 移除非数字、非小数点的字符
			    .replace(/^(\d*\.?\d{0,2}).*$/, "$1"); // 限制最多两位小数
		}else{
			this.marginBuy = this.marginBuy
			    .replace(/[^\d.]/g, "") // 移除非数字、非小数点的字符
			    .replace(/^(\d*\.?\d{0,2}).*$/, "$1"); // 限制最多两位小数
		}
	},
    // 获取合约账户信息
    contractAccount(boo) {
      if (!this.isLogin) return;
      // if (!this.contractOpen) return;
      let data = {
        symbol: this.symbol
      };
      Contract.contractAccount(data).then(res => {
        this.accountInfo = res;
        this.$emit("accountInfo", res);
        // if (!this.form.lever_rate) {
        //   this.form.lever_rate = res.lever_rate;
        // }
        if (this.form.lever_rate) {
          this.openNum();
        }
      });
    },
    // 获取可开启张数
    openNum() {
      if (!this.isLogin) return;
      let data = {
        symbol: this.symbol, //ETH
        lever_rate: this.form.lever_rate //10
      };
      Contract.openNum(data).then(res => {
        this.maxNum = res;
      });
    },
    // 获取合约详情
    getSymbolDetail() {
      let data = {
        symbol: this.symbol
      };
      Contract.getSymbolDetail(data).then(res => {
        this.lever_rage = res.lever_rage;
        this.unit_amount = res.unit_amount
        this.$emit('getSymbolDetail',res)
        if (!this.form.lever_rate) {
          this.form.lever_rate = res.default_lever;
        }
      });
    },
    // 设置数量
    sliderChangeBuy($ev) {
      this.buyform.amount = Math.round((this.maxNum * $ev) / 100)||'';
      // console.info(this.buyform)
      this.marginBuy=this.buyform.amount/this.form.lever_rate || 0
    },
    sliderChangeSell($ev) {
      this.sellform.amount = Math.round((this.maxNum * $ev) / 100)||'';
      // console.info(this.sellform)
      this.marginSell=this.sellform.amount/this.form.lever_rate || 0
    },
    // 选择杠杆
    selectLever(idx) {
      this.form.lever_rate = idx;
      this.openNum();
    },
    tooltip($ev) {
      return Math.round($ev) + "%";
    },
    // 提示
    ifOpenPosition(side) {
        if (this.tab == 1) {
            this.openPosition(side);
        } else {
            this.closePosition(side);
        }

        // let typeStr =
        //     this.form.type == 1
        //     ? `${this.form.entrust_price}${this.$t("contract.f0")}`
        //     : this.$t("contract.d9");
        // let decStr =
        //     this.tab == 1
        //     ? `${this.$t("contract.d5")}${this.form.amount}${this.$t(
        //         "contract.e2"
        //         )}${side == 1 ? this.$t("contract.f1") : this.$t("contract.f2")}`
        //     : `${this.$t("contract.d6")}${this.form.amount}${this.$t(
        //         "contract.e2"
        //         )}`;


            //  `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate}${this.$t(
            // "contract.f4"
            // )}${decStr}?`
        // this.$confirm(
        //     `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate}
        //     ${this.$t("contract.f4")}${this.$t("contract.d5")}?`
        // )
        //     .then(res => {
        //     if (this.tab == 1) {
        //         this.openPosition(side);
        //     } else {
        //         this.closePosition(side);
        //     }
        //     })
        //     .catch(res => {});
    },
    // 开仓
    openPosition(side) {
      let data = {
        side,
        symbol: this.symbol,
        ...this.form
      };
      if(side==1){
        data.entrust_price = this.buyform.entrust_price;
        data.amount = this.buyform.amount;
        data.checkbox = this.checkboxBuy;
      }else{
        data.entrust_price = this.sellform.entrust_price;
        data.amount = this.sellform.amount;
        data.checkbox = this.checkboxSell;
      }
	  
	  if(side==1&&this.checkboxBuy){
	  	data.tp_trigger_price = this.buyform.pri1;
	  	data.sl_trigger_price = this.buyform.pri2;
	  }else{
	  	data.tp_trigger_price = this.sellform.pri1;
	  	data.sl_trigger_price = this.sellform.pri2;
	  }
      Contract.openPosition(data).then(() => {
		if(side==1&&this.checkboxBuy){
			this.buyform.pri1 = "";
			this.buyform.pri2 = "";
		}else{
			this.sellform.pri1 = "";
			this.sellform.pri2 = "";
		}
        this.contractAccount();
        this.buyform.amount = 0;
        this.sellform.amount = 0;
		this.marginBuy = 0;
		this.marginSell = 0;
        this.$message.success(this.$t("contract.f5"));
        this.$emit("position");
      });
    },
    // 平仓-买卖分表单后未处理平仓的表单数据
    closePosition(side) {
      let data = {
        side: side == 1 ? 2 : 1,
        type: this.form.type,
        symbol: this.symbol,
        entrust_price: this.form.entrust_price || 0,
        amount: this.form.amount
      };
      Contract.closePosition(data).then(() => {
        this.form.amount = "";
        this.contractAccount();
        this.$message.success(this.$t("contract.f6"));
        this.$emit("position");
      });
    }
  }
};
</script>
<style scoped="scoped">
    .exchange_button{
        display: flex;
        font-size: 16px !important;
    }
    .btn,.kaicang{
        font-size: 0.9rem;
    }
    /* ::v-deep .el-slider__stop{
        background-color: ;
    } */

    .exchange-store.markets-pair-list .pri .nav-link.active::after{
      content: "";
      display: block;
      position: absolute;
      bottom: 0px;
      left: 50%;
      width: 52px;
      height: 4px;
      background-color: #fff;
      border-radius: 0px;
      transform: translateX(-50%);
      margin-left: 0px;
    }
    .exchange-store.markets-pair-list .nav{
      padding: 7px 0px 0px;
      font-size: 14px;
    }
    .exchange-store .btn-success, 
    .exchange-store .btn-success:hover{
      background-color: #52A45A;
      border-color: #52A45A;
      border-radius: 100px;
      color: #fff;
      background-image: none;
      height: 44px;
    }
    .exchange-store .btn-danger,
    .exchange-store .btn-danger:hover{
      background-color: #BB4965;
      border-color: #BB4965;
      border-radius: 100px;
      color: #fff;
      background-image: none;
      height: 44px;
    }
    .color_7c{
      color: #7c7c7c !important;
    }
    .exchange-store .input-group-text{
      background-color: transparent;
      color: #E4E5E4;
      border-color: #404040;
    }
    .exchange-store .form-control{
      height: 44px !important;
      border-color: #404040;
    }
    .el-icon-sort:before{
      color: #2C60DC;
    }
</style>
