<template>
  <div>
    <div class="ul" v-if="list.length">
      <div class="li" v-for="item in list" :key="item.ticket" @click="rowClick(item)">
        <div class="cmd flex" :class="'cmd' + item.cmd">
          {{ cmdText1[item.cmd] }}
        </div>
        <div class="body">
          <div class="left">
            <div class="top flex">
              <div>#{{ item.ticket }}</div>
              <div class="flex">
                <div class="label">
                  <!-- 手数 -->
                  {{ $t('exchange.l16') }}
                </div>
                <div class="val">{{ $handleDigits2(Number($bigDecimal.divide(item.volume, 100))) }}</div>
              </div>
            </div>
            <div class="title">{{ item.productBean.title }}</div>
            <!-- <div class="title" v-else-if="language == 'zh-TW'">{{ item.productBean.name_cht || item.productBean.title }}</div> -->
            <!-- <div class="title" v-else>{{ item.productBean.name_en || (item.productBean.market == 'CFD' ? item.productBean.symbol : item.productBean.title) }}</div> -->
            <div class="symbol">{{ item.symbol }}</div>
            <div class="flex">
              <div class="label">
                <!-- 挂单价格 -->
                {{ $t('exchange.l17') }}
              </div>
              <div class="val">{{ $handleDigits(item.open_price, item.productBean.digits) }}</div>
            </div>
            <div class="flex time">
              <div class="label">
                <!-- 时间 -->
                {{ $t('common.l24') }}
              </div>
              <div class="val">{{ item.open_time.replace(new RegExp(/-/gm), "/") }}</div>
            </div>
          </div>
          <div class="right">
            <div class="top">
              <div class="flex">
                <div class="label">
                  <!-- 数量 -->
                  {{ $t('common.l25') }}
                </div>
                <div class="val">{{ $handleDigits($bigDecimal.multiply($bigDecimal.divide(item.volume, 100), item.productBean.contract_size)) }}</div>
              </div>
            </div>
            <div class="col flex">
              <div class="label">
                <!-- 方向 -->
                {{ $t('exchange.l18') }}
              </div>
              <div class="val">{{ cmdText[item.cmd] }}</div>
            </div>
            <div class="profit" :class="(item.cmd == 0 || item.cmd == 2 || item.cmd == 4) ? 'up' : 'down'">{{ closePrice(item) }}</div>
          </div>
        </div>
        <img @click.stop="closeClick(item)" class="close" src="/img/icon/close.png" alt="极度证券">
      </div>
    </div>
    <NoData pTop="20px" v-if="list.length == 0"></NoData>
    <van-popup class="order-popup" v-model="operateShow" round position="bottom">
      <operateView @cancel="operateShow = false" v-if="operateShow" :info="targetInfo"/>
    </van-popup>
    <van-popup v-model="closeShow" :style="{ width: '292px' }">
      <closeView @cancel="closeShow = false" @closeSuccess="closeSuccess" v-if="closeShow" :info="targetInfo"/>
    </van-popup>
  </div>
</template>
<script>
import operateView from "./components/operateView.vue";
import closeView from "./components/closeView.vue";
export default {
  props: ['list'],
  components: {
    operateView,
    closeView
  },
  inject: ['getproductDataObj'],
  data () {
    return {
      operateShow: false,
      closeShow: false,
      targetInfo: {}
    }
  },
  computed: {
    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'),
      }
    },
    cmdText1() {
      return {
        // '0': '买多委托',
        // '1': '卖空委托',
        '0': this.$t('exchange.l14'),
        '1': this.$t('exchange.l15'),
        '2': this.$t('exchange.l14'),
        '3': this.$t('exchange.l15'),
        '4': this.$t('exchange.l14'),
        '5': this.$t('exchange.l15'),
      }
    },
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  created () {
  },
  methods: {
    rowClick(row) {
      this.targetInfo = row
      this.operateShow = true
    },
    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
    },
    closeClick(row) {
      this.targetInfo = row
      this.closeShow = true
    },
    closeSuccess() {
      this.closeShow = false
    },
  }
}
</script>
<style lang="less" scoped>
.ul {
  padding-top: 7px;
}
.li {
  border-radius: 8px;
  border: 1px solid #E2E2E2;
  position: relative;
  padding: 9px 9px 8px 25px;
  overflow: hidden;
  background-color: #fff;
  &+.li {
    margin-top: 8px;
  }
  .cmd {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    width: 15px;
    font-size: 10px;
    text-align: center;
    color: #fff;
    line-height: 12px;
    word-break: break-word;
  }
  .left {
    flex: 1;
    min-width: 20%;
    max-width: 100%;
    padding-right: 5px;
  }
  .cmd0,.cmd2,.cmd4 {
    background-color: #EA4A45;
  }
  .cmd1,.cmd3,.cmd5 {
    background-color: #07AC3A;
  }
  .body {
    display: flex;
    align-items: flex-start;
  }
  .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1-);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 21px;
  }
  .symbol {
    color: #6C6C6C;
    font-size: 12px;
    margin-bottom: 7px;
  }
  .col {
    margin-bottom: 10px;
  }
  .profit {
    font-size: 17px;
    font-weight: 600;
    text-align: right;
  }
  .top {
    font-size: 12px;
    color: #6C6C6C;
    column-gap: 21px;
    margin-bottom: 6px;
  }
  .right {
    .top {
      margin-bottom: 9px;
    }
    .flex {
      justify-content: flex-end;
    }
  }
  .label {
    font-size: 12px;
    color: #6C6C6C;
    padding-right: 4px;
  }
  .val {
    font-size: 12px;
    color: #333333;
  }
  .up {
    color: #EA4A45;
  }
  .down {
    color: #07AC3A;
  }
  .time {
    margin-top: 5px;
    white-space: nowrap;
  }
  .close {
    position: absolute;
    bottom: 9px;
    right: 9px;
    width: 14px;
    cursor: pointer;
  }
}
</style>