<template>
  <div class="h-full flex flex-col">
    <Search v-model:query="query" :showCreateAsset="true"></Search>
    <div class="flex-grow overflow-hidden list-table">
      <div
        class="h-full"
        v-if="loading"
        v-loading="loading"
        element-loading-text="加载中..."
      ></div>
      <pass-list-table
        v-if="!loading"
        :pass-list="passList"
        @nextPage="nextPage"
        @update="updateSinglePass"
      />
    </div>
  </div>
</template>

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

export default defineComponent({
  components: {
    PassListTable,
    Search,
    syButton,
  },
  data() {
    return {
      query: {
        // 查询通证列表的查询条件
        type: 0,
        identifier: "",
        amount_sort: 0,
      },
      page: 1,
      page_size: 50,
      passList: [] as any, // 查询到的通证列表
      total: 0,
      loading: true,
    };
  },
  async mounted() {
    this.loading = true;
    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.passList,
        params: newParams,
      });
      if (res) {
        this.total = res.data.total;
        if (refresh) {
          this.passList = res.data.results || [];
        } else {
          this.passList = this.passList.concat(res.data.results);
        }
      }
    },
    /**
     * 滚动加载通证列表
     */
    async nextPage() {
      if (this.total > this.page * this.page_size) {
        this.page += 1;
        await this.getList(false);
      }
    },
    async updateSinglePass(id: any, balance: any) {
      let times = 5;
      let i = setInterval(async () => {
        times -= 1;
        const res = await $ajax({
          type: "get",
          url: GO_URLS.pass,
          params: {
            id,
          },
        });
        if ((res && res.data.balance !== balance) || times <= 0) {
          this.passList.forEach((item: any, index: number) => {
            if (item.id === id) {
              const list = [this.passList];
              list[index].balance = res?.data.balance;
              this.passList = list;
            }
          });
          clearInterval(i);
        }
      }, 1000 * 5);
    },
  },
});
</script>

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