<template>
  <div class="component">
    <div class="top">
      <div class="box flex">
        <div class="left flex">
          <div class="ticket">#{{ info.ticket }}</div>
          <div class="volume-box flex">{{ info.cmd == 0 ? $t('exchange.l21') : $t('exchange.l22') }}<div class="volume">{{ $bigDecimal.divide(info.volume, 100, 2) }}</div></div>
        </div>
        <div class="profit" :class="info.profit > 0 ? 'up' : 'down'">{{ info.profit < 0 ? '' : "+" }}{{ $handleDigits(info.profit) }}</div>
      </div>
      <div class="box1 flex">
        <div class="left">
          <div class="name" @click="toExchange">{{ info.productBean.title }}</div>
          <div class="num">{{ info.symbol }}</div>
        </div>
        <div class="right">
          <div class="flex market">{{ $t('exchange.l3') }}:<div class="m">{{ marketAll }}</div></div>
          <div class="num">{{ $handleDigits(info.open_price, info.productBean.digits) }}-> {{ $handleDigits(info.close_price, info.productBean.digits) }}</div>
        </div>
      </div>
      <div class="label1">{{ info.open_time }}</div>
      <div class="box2 flex">
        <div class="row">
          <div>
            <div class="label">
              <!-- 止损: -->
              {{ $t('exchange.l4') }}:
            </div>
            <div class="label">
              <!-- 止盈: -->
              {{ $t('exchange.l5') }}:
            </div>
          </div>
          <div>
            <div class="val">{{ info.sl ? $handleDigits(info.sl, info.productBean.digits) : '--' }}</div>
            <div class="val">{{ info.tp ? $handleDigits(info.tp, info.productBean.digits) : '--' }}</div>
          </div>
        </div>
        <div class="right flex">
          <div>
            <div class="label">
              <!-- 利息 -->
              {{ $t('exchange.l19') }}
            </div>
            <div class="label">
              <!-- 手续费 -->
              {{ $t('exchange.l76') }}
            </div>
          </div>
          <div>
            <div class="val">{{ $handleDigits(info.swaps) }}</div>
            <div class="val">{{ $handleDigits(info.commission) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="item" @click="closeShow = true">
        <img class="icon" src="/img/exchange/icon9.png" alt="极度证券">
        <div>
          <!-- 平仓 -->
          {{ $t('exchange.l36') }}
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="item" @click="updateShow = true">
        <img class="icon" src="/img/exchange/icon10.png" alt="极度证券">
        <div>
          <!-- 修改 -->
          {{ $t('setting.btn1') }}
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="item" @click="toExchange">
        <img class="icon" src="/img/exchange/icon11.png" alt="极度证券">
        <div>
          <!-- 交易 -->
          {{ $t('tab.tab3') }}
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="item" @click="$router.push('/product-detail/' + info.symbol)">
        <img class="icon" src="/img/exchange/icon12.png" alt="极度证券">
        <div>
          <!-- 图表 -->
          {{ $t('exchange.l6') }}
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <van-popup v-model="closeShow" round position="bottom">
      <closeView @cancel="closeShow = false" @closeSuccess="closeSuccess" v-if="closeShow" :info="info"/>
    </van-popup>
    <van-popup v-model="updateShow" round position="bottom">
      <updateView @cancel="updateShow = false" @updateSuccess="updateSuccess" v-if="updateShow" :info="info"/>
    </van-popup>
  </div>
</template>
<script>
import closeView from "./closeView.vue";
import updateView from "./updateView.vue";
import bus from '@/utils/bus'
export default {
  props: ['info'],
  components: {
    closeView,
    updateView
  },
  inject: ['getproductDataObj'],
  data () {
    return {
      closeShow: false,
      updateShow: false,
    }
  },
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    marketAll() {
      if (this.info) {
        var market = this.$bigDecimal.multiply(this.info.close_price, this.$bigDecimal.multiply(this.$bigDecimal.divide(this.info.volume, 100), this.info.productBean.contract_size))
        var rate;
        if (this.info.productBean.market == 'CFD') {
          if (this.info.productBean.profit_mode == '1') {
            var market1 = ''
            var market2 = ''
            if (this.info.productBean.currency != 'USD') {
              market1 = this.productDataObj[`USD${this.info.productBean.currency}`]
              market2 = this.productDataObj[`${this.info.productBean.currency}USD`]
              if (market1) {
                rate = (market1['ask'] + market1['bid']) / 2
              }
              if (market2) {
                rate = (market2['ask'] + market2['bid']) / 2
              }
              if (market2) {
                market = market * rate
              } else if (market1) {
                market = market / rate
              }
            }
          } else if (this.info.productBean.profit_mode == '0') {
            var symbol = this.info.productBean.symbol.slice(3, 6)
            var market1 = this.productDataObj[`USD${symbol}`]
            var market2 = this.productDataObj[`${symbol}USD`]
            if (market1) {
              rate = (market1['ask'] + market1['bid']) / 2
            }
            if (market2) {
              rate = (market2['ask'] + market2['bid']) / 2
            }
            if (market2) {
              market = market * rate
            } else if (market1) {
              market = market / rate
            }
          }
        }
        return Number(market).toFixed(2)
      }
      return this.$handleDigits(this.$bigDecimal.multiply(this.info.close_price, this.$bigDecimal.multiply(this.$bigDecimal.divide(this.info.volume, 100), this.info.productBean.contract_size)))
    },
  },
  methods: {
    closeSuccess() {
      this.closeShow = false
      this.$emit('cancel')
      // bus.$emit('updateAssets', ['getAccountList'])
      // bus.$emit('updateOrder')
    },
    updateSuccess() {
      this.updateShow = false
      this.$emit('cancel')
      // bus.$emit('updateOrder')
    },
    toExchange() {
      if (this.$route.name == 'exchange') {
        if (this.$route.params.symbol == this.info.symbol) {
          this.$emit('cancel')
          bus.$emit('routerBack')
        } else {
          this.$emit('cancel')
          this.$router.replace(`/exchange/${this.info.symbol}/buy`)
        }
      } else {
        this.$router.push(`/exchange/${this.info.symbol}/buy`)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.component {
  padding: 19px 18px 30px;
}
.top {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px 15px 17px 7px;
  border-left: 6px solid var(--color-);
  margin-bottom: 10px;
}
.box {
  color: #6C6C6C;
  justify-content: space-between;
  margin-bottom: 10px;
  .left {
    column-gap: 18px;
  }
  .volume-box {
    column-gap: 3px;
  }
  .volume {
    color: var(--color-);
  }
  .profit {
    font-size: 16px;
    font-weight: 500;
    &.up {
      color: #EA4A45;
    }
    &.down {
      color: #07AC3A;
    }
  }
}
.box1 {
  margin-bottom: 8px;
  justify-content: space-between;
  .name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-1-);
    margin-bottom: 8px;
  }
  .right {
    text-align: right;
  }
  .market {
    font-size: 14px;
    column-gap: 6px;
    color: #6C6C6C;
    margin-bottom: 8px;
    justify-content: flex-end;
    .m {
      color: var(--color-1-);
    }
  }
  .num {
    font-size: 12px;
    color: #6C6C6C;
  }
}
.label1 {
  margin-bottom: 10px;
  font-size: 12px;
  color: #6C6C6C;
}
.box2 {
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-1-);
  .row {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
  }
  .label {
    color: #6C6C6C;
    &+.label {
      margin-top: 8px;
    }
  }
  .val + .val {
    margin-top: 8px;
  }
  .right {
    column-gap: 12px;
    text-align: right;
  }
}
.bottom {
  .item {
    cursor: pointer;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #E7E7E7;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--color-1-);
    padding: 0 12px;
    position: relative;
    &+.item {
      margin-top: 4px;
    }
  }
  .icon {
    width: 24px;
    margin-right: 8px;
  }
  .van-icon {
    position: absolute;
    top: 50%;
    right: 9px;
    font-size: 18px;
    transform: translateY(-50%);
    color: #000000;
  }
}
</style>