<template>
  <mescroll-vue
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
  >
    <div class="list-wrap">
      <div
        class="list-item"
        v-for="item of ListData"
        :key="item.id"
        @click="goRecordDetail(item)"
      >
        <div class="item-top flex-default">
          <div class="number" :class="{ reduce: item.typeObj.symbol == '-' }">
            {{ AssetsRecordTypeObj[item.type].symbol }}{{ item.amount }}
          </div>
          <div class="status" :class="{ fail: item.status == AssetsRecordStatus.FAIL }">
            {{ AssetsRecordStatusObj[item.status].label }}
          </div>
        </div>
        <div class="item-footer flex-default">
          <div class="address">
            {{ AssetsRecordTypeObj[item.type].label }}
          </div>
          <div class="time">
            {{ item.createTime | getTime }}
          </div>
        </div>
      </div>
    </div>
    <m-no-data v-if="ListData.length == 0" />
  </mescroll-vue>
</template>

<script>
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
import { formatTime } from "@/utils/common";
import {
  AssetsRecordType,
  AssetsRecordTypeObj,
  AssetsRecordStatus,
  AssetsRecordStatusObj,
} from "@/enums";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  props: {
    coin: String,
    tab: Object,
    index: Number,
    skuId: String,
    assets: Object,
  },
  data() {
    return {
      AssetsRecordType,
      AssetsRecordTypeObj,
      AssetsRecordStatus,
      AssetsRecordStatusObj,
      downOptions: {
        autoShowLoading: false,
        auto: false,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
        callback: this.upCallback,
      },
      ListData: [],
    };
  },
  filters: {
    getTime(val) {
      if (val) {
        return formatTime(new Date(val), "yyyy-MM-dd hh:mm:ss");
      }
      return "";
    },
  },
  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,
          skuId: this.skuId,
        },
        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);
    },
    goRecordDetail(item) {
      let data = {
        title: this.assets.skuVo.name,
        num: (item.typeObj.symbol || "") + item.amount,
        status: AssetsRecordStatusObj[item.status].label,
        infoList: [
          { label: "交易类型", val: item.typeObj.label },
          { label: "TokenID", val: this.assets.coin },
          { label: "交易时间", val: formatTime(item.createTime) },
        ],
      };
      if (item.status == AssetsRecordStatus.SUCCESS && item.hash) {
        data.infoList.push({ label: "交易哈希", val: item.hash, hash: true });
      }
      if (!item.note) {
        item.note = "--";
      }

      switch (+item.type) {
        case AssetsRecordType.TRANSFER_GIFT_IN:
          data.infoList = data.infoList.concat([
            { label: "转赠人地址", val: item.otherSide },
            { label: "受赠人地址", val: this.assets.address },
            { label: "备注", val: item.note },
          ]);
          break;
        case AssetsRecordType.TRANSFER_GIFT_OUT:
          data.infoList = data.infoList.concat([
            { label: "转赠人地址", val: this.assets.address },
            { label: "受赠人地址", val: item.otherSide },
            { label: "备注", val: item.note },
          ]);
          break;
        default:
          break;
      }
      this.$router.push({ name: "assets-record-detail", query: data });
    },
  },
};
</script>
<style lang="less">
</style>
