<template>
  <div class="h-full copyrightTable">
    <Empty
      v-if="!loading && tableData.length === 0"
      class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
    >
      {{
        debouncedSearchStr === ""
          ? "暂无数据"
          : "没有找到匹配结果，尝试其他关键词搜索"
      }}
    </Empty>
    <Table
      v-show="showTableCheck(loading, tableData)"
      :columns="columns"
      :data="tableData"
      ref="tableRef"
      height="100%"
      :loading="loading"
    >
      <template #name="props">
        <div
          class="cursor-pointer overflow-hidden overflow-ellipsis"
          @click="toProve(props)"
        >
          {{ props.name }}
        </div>
      </template>
      <template #create_time="props">
        <div class="overflow-hidden overflow-ellipsis">
          {{ formatTime(props.create_time) }}
        </div>
      </template>
      <template #status="props">
        <div class="flex items-center">
          <syButton mode="issuing" v-if="props.status === 1">发行中</syButton>
          <syButton mode="issuedSuccess" v-else-if="props.status === 2"
            >发行成功</syButton
          >
          <syButton v-else-if="props.status === 3" mode="issuedFailed"
            >发行失败</syButton
          >
          <span
            v-if="props.status === 3"
            @click="reIssue(props)"
            class="iconfont2 icon-re cursor-pointer"
            style="color: rgb(103, 169, 255); margin-left: 3px"
          ></span>
        </div>
      </template>
      <template #transfer="props">
        <div class="whitespace-nowrap">
          <span class="text-gray" v-if="props.balance === 0">已划转</span>
          <syButton
            mode="elementBtn"
            v-else-if="props.status === 2"
            type="text"
            @click="transfer(props)"
            >划转</syButton
          >
        </div>
      </template>
    </Table>
    <syCommonDialog
      showMask
      @closePopup="passShow = false"
      type="element"
      :visible="passShow"
      :element-dialog-props="{
        title: '资产转账',
      }"
      element-dialog-size="medium"
    >
      <TransferCollection
        v-if="passShow"
        transfer-type="picture"
        @update="$emit('transferExecuted', curItem.id, curItem.balance)"
        :content="curItem"
        @closePopup="passShow = false"
      >
      </TransferCollection>
    </syCommonDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import Table from "@/components/Table/index.vue";
import TransferCollection from "@/views/Collection/PassList/TransferCollection.vue";
import { ElMessage } from "element-plus";
import { formatTime, GO_URLS, syButton, syCommonDialog } from "cqk-sy-ui";

import { debounce } from "lodash";
import { columns } from "./constants";
import { globalState } from "@/store/state";
import { useTableScrollListener } from "@/components/Table/hooks";
import { $ajax } from "@/service";
import Empty from "../../../../../components/Empty/index.vue";
import { showTableCheck } from "@/utils/show";

const props = defineProps<{
  tableData: any[];
  loading: boolean;
  debouncedSearchStr: string;
}>();

const curItem = ref<any>();
const passShow = ref<boolean>();
const tableRef = ref<InstanceType<typeof Table>>();

const reIssue = debounce(async (content: any) => {
  const res = await $ajax({
    type: "post",
    url: GO_URLS.reissue,
    params: {
      ids: [content.id],
    },
  });
  if (!res) return;
  ElMessage.success("重新发行成功");
}, 500);

useTableScrollListener(tableRef, (scrollTop) => {
  console.log("scrollToEnd");
  emit("scrollToEnd");
});

const emit = defineEmits(["transferExecuted", "scrollToEnd"]);

const transfer = (item: any) => {
  curItem.value = item;
  passShow.value = true;
};

const toProve = (item: any) => {
  window.open(
    `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.id}&evm_tx_hash=${item.tx_hash}&from=client`
  );
};

const scrollTo = (...options: Parameters<typeof window.scrollTo>) => {
  tableRef.value?.scrollTo(...options);
};

defineExpose({
  tableRef,
  scrollTo,
});
</script>

<style lang="scss">
.copyrightTable {
  .el-table__cell {
    height: 50px;
  }
}
</style>
