<template>
  <mescroll-vue
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
  >
    <div class="integral-detail-list-wrap">
      <div class="list-item" v-for="item of ListData" :key="item.id">
        <div class="item-top flex-default">
          <div class="number" :class="{ reduce: pay.includes(item.type) }">
            {{ item.typeObj.symbol }}{{ item.amount }}
          </div>
        </div>
        <div class="item-footer flex-default">
          <div class="address">
            {{ item.typeObj.label }}
          </div>
          <div class="time">
            {{ item.createTime | timeFilter }}
          </div>
        </div>
      </div>
    </div>
    <m-no-data v-if="ListData.length == 0" />
  </mescroll-vue>
</template>

<script>
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
import { AssetsRecordType, AssetsRecordTypeObj } from "@/enums";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  props: {
    coin: String,
    tab: Object,
    index: Number,
  },
  data() {
    return {
      AssetsRecordType,
      AssetsRecordTypeObj,
      downOptions: {
        autoShowLoading: false,
        auto: false,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
        callback: this.upCallback,
      },
      ListData: [],
      pay: [2, 4, 6, 8, 9, 11, 16, 17],
    };
  },
  filters: {},
  methods: {
    initData() {
      this.requestData({ num: 1, size: 10 });
      this.ListData = [];
      this.mescroll.setPageNum(2);
    },
    requestData(page) {
      this.$api({
        apiName: "postAssetRecord",
        postData: {
          coin: this.coin,
          payment: this.tab.payment,
          page: page.num,
          size: page.size,
        },
        success: (res) => {
          if (res.data) {
            res.data.forEach((item) => {
              item.typeObj = AssetsRecordTypeObj[item.type] || {};
            });
          }
          if (page.num == 1) {
            this.ListData = res.data;
          } else {
            this.ListData = this.ListData.concat(res.data);
          }
          this.mescroll.endBySize(res.data.length, res.totalSize);
        },
        fail: (err) => {
          this.mescroll.endErr();
        },
        complete: () => {
          this.mescroll.endDownScroll();
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page);
    },
  },
};
</script>
<style lang="less">
.integral-detail-list-wrap {
  padding-left: 26px;
  .list-item {
    border-bottom: 1px solid #f1f1f1;
    .item-top,
    .item-footer {
      justify-content: space-between;
      align-items: center;
      padding-right: 26px;
    }
    .item-top {
      padding-top: 6px;
      .number {
        font-size: 19px;
        color: #dcb329;
        line-height: 27px;
        &.reduce {
          color: #140603;
        }
      }
      .status {
        font-size: 9px;
        color: #140603;
        &.fail {
          color: #dd2e41;
        }
      }
    }
    .item-footer {
      color: #999999;
      margin-bottom: 6px;
      .address,
      .time {
        font-size: 12px;
      }
      .time {
        flex-shrink: 0;
      }
      .address {
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>

