<template>
  <div class="transfer-record-list assets-details-tabs">
    <div class="tabs-title">交易记录</div>
    <div class="tabs-content">
      <mescroll-vue
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOptions"
        :up="upOptions"
      >
        <div class="record-list-con">
          <div class="record-item" v-for="item of list" :key="item.id">
            <div class="flex-between">
              <span class="amount">-{{ item.number }}</span>
              <span class="price">{{item.price.toFixed(2)}}元</span>
            </div>
            <div class="bottom flex-between">
              <span>DFGYHBBB787…HUJI89672</span>
              <span>{{ item.createTime | timeFilter }}</span>
            </div>
          </div>
        </div>
      </mescroll-vue>
    </div>
  </div>
</template>

<script>
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      downOptions: {
        use: false,
      },
      upOptions: {
        use: false,
      },
    };
  },
  methods: {},
};
</script>

<style lang="less">
.transfer-record-list {
  .record-list-con {
    padding-left: 26px;
    > .record-item {
      padding: 10px 25px 10px;
      border-bottom: 1px solid #f1f1f1;
      &:last-of-type {
        border: none;
      }
      .amount {
        font-size: 20px;
        font-weight: bold;
        font-family: DINAlternate-Bold;
      }
      .price {
        font-size: 14px;
      }
      .bottom {
        margin-top: 8px;
        color: #999999;
        font-size: 12px;
      }
    }
  }
}
</style>