<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="child">
      <div class="title flex">
        <div>
          <!-- 修改挂单 -->
          {{ $t('exchange.l11') }}
        </div>
        <div class="id">
          <!-- 订单ID -->
          ID:{{ info.ticket }}
        </div>
      </div>
      <div class="box">
        <van-row gutter="20">
          <van-col span="12">
            <div class="flex">
              <div class="lab">
                <!-- 挂单价格 -->
                {{ $t('exchange.l17') }}
              </div>
              <div>
                {{ $handleDigits(info.open_price, info.productBean.digits) }}
              </div>
            </div>
          </van-col>
          <van-col span="12">
            <div class="flex">
              <div class="lab">
                <!-- 数量 -->
                {{ $t('common.l25') }}
              </div>
              <div>
                {{ info.volume }}
              </div>
            </div>
          </van-col>
        </van-row>
        <van-row gutter="20">
          <van-col span="12">
            <div class="flex">
              <div class="lab">
                <!-- 当前价 -->
                {{ $t('exchange.l106') }}
              </div>
              <div :class="(info.cmd == 0 || info.cmd == 2 || info.cmd == 4) ? 'up' : 'down'">
                {{ closePrice(info) }}
              </div>
            </div>
          </van-col>
          <van-col span="12">
            <div class="flex">
              <div class="lab">
                <!-- 类型 -->
                {{ $t('exchange.l41') }}
              </div>
              <div>
                {{ cmdText[info.cmd] }}
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="row">
        <div class="label flex">
          <div v-if="info.productBean.market == 'CFD'">
            <!-- 止损价 -->
            {{ $t('exchange.l12') }}
          </div>
          <div v-else>
            <!-- 止损价 -->
            {{ $t('exchange.l12') }}({{ (info.cmd == 3 || info.cmd == 5) ? $t('exchange.l103').replace('{p}', $handleDigits(point, symbolInfo.digits)).replace('{p1}', percentage) : $t('exchange.l104').replace('{p}', $handleDigits(point, symbolInfo.digits)).replace('{p1}', percentage) }})
          </div>
          <img class="icon" @click="form.sl = closePrice(info)" src="/img/exchange/icon14.png" alt="jdnx">
        </div>
        <div class="box1">
          <div class="decrease" @click="addsl(1)">
            <div>
              <van-icon name="minus" />
              <div>0.05</div>
            </div>
          </div>
          <el-input-number :controls="false" :placeholder="$t('exchange.l99')" v-model="form.sl" :precision="info.productBean.digits" :min="0"></el-input-number>
          <div class="increase" @click="addsl(2)">
            <div>
              <van-icon name="plus" />
              <div>0.05</div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="label flex">
          <div v-if="info.productBean.market == 'CFD'">
            <!-- 止盈价 -->
            {{ $t('exchange.l13') }}
          </div>
          <div v-else>
            <!-- 止盈价 -->
            {{ $t('exchange.l13') }}({{ (info.cmd == 2 || info.cmd == 4) ? $t('exchange.l103').replace('{p}', $handleDigits(point, symbolInfo.digits)).replace('{p1}', percentage) : $t('exchange.l104').replace('{p}', $handleDigits(point, symbolInfo.digits)).replace('{p1}', percentage) }})
          </div>
          <img class="icon" @click="form.tp = closePrice(info)" src="/img/exchange/icon14.png" alt="jdnx">
        </div>
        <div class="box1">
          <div class="decrease" @click="addtp(1)">
            <div>
              <van-icon name="minus" />
              <div>0.05</div>
            </div>
          </div>
          <el-input-number v-model="form.tp" :precision="info.productBean.digits" :step="info.productBean.point" :min="0"></el-input-number>
          <div class="increase" @click="addtp(2)">
            <div>
              <van-icon name="plus" />
              <div>0.05</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box flex">
      <div class="btn ltn" @click="cancel">
        <!-- 取消 -->
        {{ $t('common.l2') }}
      </div>
      <div class="btn rth" @click="updateEntrust">
        <!-- 确定 -->
        {{ $t('common.l3') }}
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { updateEntrust } from "@/api/exchange";
import { marketPoint } from "@/utils/config";
export default {
  props: ['info'],
  data () {
    return {
      form: {
        sl: 0,
        tp: 0,
      },
      percentage: 5,
    }
  },
  inject: ['getproductDataObj'],
  computed: {
    ...mapGetters(['accountList']),
    productDataObj() {
      return this.getproductDataObj()
    },
    symbolInfo() {
      return this.productDataObj[this.info.symbol] || {}
    },
    accountInfo() {
      var info = {}
      this.accountList.forEach(item => {
        if(item.server == this.info.mt_code) {
          info = item
        }
      })
      return info
    },
    cmdText() {
      return {
        // '2': '低价买入',
        // '3': '高价卖出',
        // '4': '高价买入',
        // '5': '低价卖出',
        '2': this.$t('exchange.l7'),
        '3': this.$t('exchange.l8'),
        '4': this.$t('exchange.l9'),
        '5': this.$t('exchange.l10'),
      }
    },
    point() {
      var point1 = Number(this.$bigDecimal.multiply(this.symbolInfo.point, marketPoint[this.symbolInfo.market]))
      var point2 = Number(this.$bigDecimal.divide(this.$bigDecimal.multiply(this.percentage, this.symbolInfo.ask), 100))
      return this.info.productBean.market == 'CFD' ? point1 : (point1 > point2 ? point2 : point1)
    },
  },
  created() {
    this.form.sl = this.info.sl
    this.form.tp = this.info.tp
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    updateEntrust() {
      var tp = Number(this.form.tp)
      var sl = Number(this.form.sl)
      if (sl) {
        if (this.info.cmd == 2 || this.info.cmd == 4) {
          if (sl >= Number(this.symbolInfo.ask - this.point)) {
            // message: '低于当前价 0.50或5%'
            var message = this.info.productBean.market == 'CFD' ? this.$t('exchange.l84').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)) : this.$t('exchange.l104').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            this.$notify({
              message: message,
              type: 'danger'
            })
            return
          }
        } else {
          if (sl <= Number(this.symbolInfo.ask + this.point)) {
            // message: '高于当前价 0.50或5%'
            var message = this.info.productBean.market == 'CFD' ? this.$t('exchange.l85').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)) : this.$t('exchange.l103').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            this.$notify({
              message: message,
              type: 'danger'
            })
            return
          }
        }
      }
      if (tp) {
        if (this.info.cmd ==  2 || this.info.cmd == 4) {
          if (tp <= Number(this.symbolInfo.ask + this.point)) {
            // message: '高于当前价 0.50或5%'
            var message = this.info.productBean.market == 'CFD' ? this.$t('exchange.l82').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)) : this.$t('exchange.l103').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            this.$notify({
              message: message,
              type: 'danger'
            })
            return
          }
        } else {
          if (tp >= Number(this.symbolInfo.ask - this.point)) {
            // message: '低于当前价 0.50或5%'
            var message = this.info.productBean.market == 'CFD' ? this.$t('exchange.l83').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)) : this.$t('exchange.l104').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            this.$notify({
              message: message,
              type: 'danger'
            })
            return
          }
        }
      }
      this.fullscreenLoading = true
      updateEntrust({
        ticket: this.info.ticket,
        symbol: this.info.symbol,
        sl: this.form.sl,
        tp: this.form.tp,
        account: this.accountInfo.account,
        server: this.accountInfo.server
      }).then((res) => {
        this.$notify({
          // message: '更新成功',
          message: this.$t('common.l28'),
          type: 'success'
        })
        this.$emit('updateSuccess')
      }).finally(() => {
        this.fullscreenLoading = false
      }).catch((err) => {
      })
    },
    closePrice(row) {
      var symbolInfo = this.productDataObj[row.symbol]
      if (symbolInfo) {
        if (row.cmd == 0) {
          return this.$handleDigits(symbolInfo.bid, row.productBean.digits)
        }
        return this.$handleDigits(symbolInfo.ask, row.productBean.digits)
      }
      return row.close_price
    },
    addsl(type) {
      if (type == 1) {
        if (!Number(this.form.sl)) {
          return
        }
        this.sl = Number(this.$bigDecimal.subtract(Number(this.form.sl) || 0, 0.05)) + ''
      }
      if (type == 2) {
        this.form.sl = Number(this.$bigDecimal.add(Number(this.form.sl) || 0, 0.05)) + ''
      }
    },
    addtp(type) {
      if (type == 1) {
        if (!Number(this.form.tp)) {
          return
        }
        this.form.tp = Number(this.$bigDecimal.subtract(Number(this.form.tp) || 0, 0.05)) + ''
      }
      if (type == 2) {
        this.form.tp = Number(this.$bigDecimal.add(Number(this.form.tp) || 0, 0.05)) + ''
      }
    },
  }
}
</script>
<style lang="less" scoped>
.child {
  padding: 0px 16px 20px;
}
.title {
  font-weight: 600;
  font-size: 16px;
  color: #000000;
  padding: 20px 0;
  border-bottom: 1px solid #F6F6F6;
  justify-content: space-between;
}
.id {
  font-weight: 400;
  font-size: 14px;
  color: #888888;
}
.box {
  padding-top: 19px;
  padding-bottom: 26px;
}
.van-row {
  font-size: 12px;
  &+.van-row {
    margin-top: 10px;
  }
  .flex {
    justify-content: space-between;
  }
  .lab {
    color: #888888;
  }
}
.row {
  &+.row {
    margin-top: 26px;
  }
  .label {
    color: #888888;
    margin-bottom: 12px;
    justify-content: space-between;
  }
  .icon {
    cursor: pointer;
    width: 14px;
  }
}
.btn-box {
  padding: 10px 14px 20px;
  column-gap: 7px;
  text-align: center;
  .btn {
    line-height: 50px;
    cursor: pointer;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
  }
  .ltn {
    background-color: #F6F6F6;
    color: #B6B6B6;
  }
  .rth {
    background-color: #000000;
    color: #FEFFFF;
  }
}
.box1 {
  position: relative;
  .decrease, .increase {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 46px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    background-color: #EEEEEE;
    font-size: 12px;
    color: #B6B6B6;
    padding-bottom: 4px;
    text-align: center;
    .van-icon {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 3px;
    }
  }
  .decrease {
    left: 0;
    border-radius: 8px 0 0 8px;
  }
  .increase {
    right: 0;
    border-radius: 0 8px 8px 0;
  }
}
.el-input-number {
  display: block;
  width: 100%;
}
.up {
  color: var(--red-);
}
.down {
  color: var(--green-);
}
::v-deep {
  .el-input__inner {
    background: #F3F4F6;
    border-radius: 8px;
    border: 1px solid transparent !important;
    height: 50px;
    line-height: 50px;
  }
  .el-input-number.is-without-controls .el-input__inner {
    padding-left: 60px;
    padding-right: 60px;
  }
}
</style>