<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">
          {{ item.cmd == 0 ? $t('exchange.l21') : $t('exchange.l22') }}
        </div>
        <div>
          <div class="top flex">
            <div class="left flex">
              <div>#{{ item.ticket }}</div>
              <div class="flex">
                <div class="lab">
                  <!-- 手数 -->
                  {{ $t('exchange.l16') }}
                </div>
                <div class="val">{{ $handleDigits2(Number($bigDecimal.divide(item.volume, 100))) }}</div>
              </div>
            </div>
            <div class="flex">
              <div class="lab">
                <!-- 数量 -->
                {{ $t('common.l25') }}
              </div>
              <div class="val">{{ $handleDigits($bigDecimal.multiply($bigDecimal.divide(item.volume, 100), item.productBean.contract_size)) }}</div>
            </div>
          </div>
        </div>
        <div class="body flex">
          <div class="left">
            <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>
          <div class="profit flex">
            <div :class="{up: item.profit > 0, down: item.profit <= 0}">{{ item.profit > 0 ? '+' : "" }}{{ $handleDigits(item.profit) }} {{ serverUtil[item.productBean.market] }}</div>
          </div>
        </div>
        <div class="flex price">
          <div>{{ $handleDigits(item.open_price, item.productBean.digits) }}</div>
          &gt;
          <div :class="{up: item.cmd == 0, down: item.cmd == 1}">{{ $handleDigits(item.close_price, item.productBean.digits) }}</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" round position="bottom">
      <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
  },
  data () {
    return {
      operateShow: false,
      closeShow: false,
      targetInfo: {}
    }
  },
  created() {
  },
  methods: {
    rowClick(row) {
      this.targetInfo = row
      this.operateShow = true
    },
    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;
  background-color: #fff;
  overflow: hidden;
  &+.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;
    &.cmd0 {
      background-color: #EA4A45;
    }
    &.cmd1 {
      background-color: #07AC3A;
    }
  }
  .top {
    justify-content: space-between;
    color: #6C6C6C;
    font-size: 12px;
    margin-bottom: 7px;
    .lab {
      padding-right: 4px;
    }
    .left {
      column-gap: 21px;
    }
  }
  .val {
    color: #333333;
  }
  .body {
    justify-content: space-between;
    margin-bottom: 11px;
    .left {
      flex: 1;
      min-width: 10%;
    }
  }
  .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;
  }
  .profit {
    font-size: 17px;
    font-weight: 600;
  }
  .price {
    font-size: 12px;
    color: #333333;
    column-gap: 4px;
  }
  .label {
    font-size: 11px;
    color: #6C6C6C;
  }
  .up {
    color: #EA4A45;
  }
  .down {
    color: #07AC3A;
  }
  .close {
    position: absolute;
    bottom: 9px;
    right: 9px;
    width: 14px;
    cursor: pointer;
  }
}
</style>