<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">{{ cmdText[info.cmd] }}<div class="volume">{{ $bigDecimal.divide(info.volume, 100, 2) }}</div></div>
        </div>
        <div class="profit" :class="info.profit > 0 ? 'up' : 'down'" v-if="info.cmd == 0 || info.cmd == 1">{{ info.profit > 0 ? '+' : "" }}{{ $handleDigits(info.profit) }}</div>
        <div class="profit" v-else>--</div>
      </div>
      <div class="box1 flex">
        <div class="left">
          <div class="name">{{ info.title }}</div>
          <div class="num">{{ info.symbol }}</div>
        </div>
        <div class="right">
          <div class="num">{{ $handleDigits(info.open_price, info.productBean.digits) }}-> {{ $handleDigits(info.close_price, info.productBean.digits) }}</div>
        </div>
      </div>
      <div class="label1">{{ info.close_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 ? info.sl : '--' }}</div>
            <div class="val">{{ info.tp ?  info.tp : '--' }}</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="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>
  </div>
</template>
<script>
export default {
  props: ['info'],
  data () {
    return {
      closeShow: false,
      updateShow: false,
    }
  },
  computed: {
    cmdText() {
      return {
        // '0': '买多',
        // '1': '卖空',
        // '2': '低价买入',
        // '3': '高价卖出',
        // '4': '高价买入',
        // '5': '低价卖出',
        '0': this.$t('exchange.l21'),
        '1': this.$t('exchange.l22'),
        '2': this.$t('exchange.l7'),
        '3': this.$t('exchange.l8'),
        '4': this.$t('exchange.l9'),
        '5': this.$t('exchange.l10'),
      }
    }
  },
  methods: {
    toExchange() {
      if (this.$route.name == 'exchange') {
        if (this.$route.params.symbol == this.info.symbol) {
          this.$emit('cancel')
        } else {
          this.$emit('cancel')
          this.$router.replace(`/exchange/${this.info.symbol}/buy`)
        }
      } else {
        this.$router.push(`/exchange/${this.info.symbol}/buy`)
      }
    }
  },
  filters: {
    cmdtext(v) {
      if (v == 0 || v== 1) {
        return ''
      }
      if (v === 2 || v === 3) {
        return 'limit'
      } else {
        return 'stop'
      }
    },
    orderType(v) {
      if (v === 0 || v === 2 || v === 4) {
        return 'buy'
      }
      return 'sell'
    },
  }
}
</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>