<template>
  <div class="h-full flex flex-col">
    <search
      v-model:query="query"
      search-placeholder="搜索资产标识"
      :show-create-asset="false"
    ></search>
    <div class="flex-grow overflow-hidden list-table">
      <div
        class="h-full"
        v-if="loading"
        v-loading="loading"
        element-loading-text="加载中..."
      ></div>
      <transfer-record-list
        v-if="!loading"
        @nextPage="nextPage"
        :transfer-list="transferList"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import SearchVue from "../PassList/Search.vue";
import TransferRecordList from "./TransferRecordList.vue";
import { GO_URLS } from "cqk-sy-ui";
import { $ajax } from "@/service";

export default defineComponent({
  data() {
    return {
      query: {
        // 查询通证列表的查询条件
        type: 0,
        identifier: "",
        amount_sort: 0,
      },
      page: 1,
      page_size: 50,
      transferList: [], // 查询到的通证列表
      total: 0,
      loading: true,
    };
  },
  components: {
    Search: SearchVue,
    TransferRecordList,
  },
  async mounted() {
    await this.getList(true);
    this.loading = false;
  },
  watch: {
    query() {
      this.getList(true);
    },
  },
  methods: {
    /**
     * @param refresh 当查询条件改变时传入整个列表刷新，否则查询数据添加到 passList
     */
    async getList(refresh: any) {
      if (refresh) {
        this.page = 1;
      }
      const params = Object.assign({}, this.query, {
        page: this.page,
        page_size: this.page_size,
      });
      let newParams = params as any;
      if (params.identifier === "") {
        const { identifier, ...restResult } = params;
        newParams = restResult;
      }
      const res = await $ajax({
        type: "get",
        url: GO_URLS.transferList,
        params: newParams,
      });
      if (res) {
        this.total = res.data.total;
        if (refresh) {
          this.transferList = res.data.results || [];
        } else {
          this.transferList = this.transferList.concat(res.data.results);
        }
      }
    },
    /**
     * 滚动加载通证列表
     */
    async nextPage() {
      if (this.total > this.page * this.page_size) {
        this.page += 1;
        await this.getList(false);
      }
    },
  },
});
</script>

<style scoped>
.list-table {
  margin-top: 21px;
  margin-left: 13px;
  margin-right: 11px;
}
</style>
