<template>
  <div class="h-full albumTable">
    <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"
          @click="
            $emit('goToDetail', {
              batch_num: props.batch_num,
              name: props.name,
            })
          "
        >
          {{ props.name }}
          <syButton mode="littleBtn" class="ml-3">
            {{ props.amount }}
          </syButton>
        </div>
      </template>
      <template #time="props">
        {{ formatTime(props.create_time) }}
      </template>
      <template #status="props">
        <div class="flex items-center">
          <syButton mode="issuing" v-if="props.pass_status === 1"
            >发行中</syButton
          >
          <syButton mode="issuedSuccess" v-else-if="props.pass_status === 2"
            >发行成功</syButton
          >
          <syButton v-else-if="props.pass_status === 3" mode="issuedFailed"
            >发行失败</syButton
          >
          <span
            v-if="props.pass_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">
          <!-- 	0:未转账 1:转账中 2:转账成功 3:转账失败 -->
          <syButton
            mode="elementBtn"
            v-if="
              props.transfer_status === 0 &&
              props.pass_status !== 1 &&
              props.pass_status !== 3
            "
            type="text"
            @click="transfer(props)"
            >划转</syButton
          >
          <span class="text-gray" v-else-if="props.transfer_status === 2"
            >已划转</span
          >
          <span class="text-gray" v-else-if="props.transfer_status === 3"
            >划转</span
          >
          <span
            v-if="props.transfer_status === 3"
            @click="__reTransfer(props)"
            class="iconfont2 icon-re cursor-pointer"
            style="color: rgb(103, 169, 255); margin-left: 3px"
          >
          </span>
        </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="album"
        @update="$emit('update', curItem.id, curItem.balance)"
        :content="curItem"
        @closePopup="passShow = false"
      ></TransferCollection>
    </syCommonDialog>
  </div>
</template>

<script setup lang="ts">
import { $ajax } from "@/service";
import { formatTime, syButton, syCommonDialog } from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { debounce } from "lodash";
import { ref, watch } from "vue";

import { globalState } from "@/store/state";
import { useTableScrollListener } from "@/components/Table/hooks";

import Table from "@/components/Table/index.vue";
import { columns } from "./constants";
import TransferCollection from "@/views/Collection/PassList/TransferCollection.vue";
import { URLS } from "@/service/URL";
import { reTransfer } from "@/service/Transfer";
import { eCollectionType } from "@/views/Collection/PassMaker/types";
import { showTableCheck } from "@/utils/show";
import Empty from "@/components/Empty/index.vue";

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

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

const __reIssue = debounce(async (content: any) => {
  const res = await $ajax({
    type: "post",
    url: URLS.resendBatch,
    params: {
      batch_num: content.batch_num,
    },
  });
  if (!res) return;
  ElMessage.success("重新发行成功");
  emit("update");
}, 500);

useTableScrollListener(tableRef, () => {
  emit("scrollToEnd");
});

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

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

const __reTransfer = (item: any) => {
  curItem.value = item;
  reTransfer(eCollectionType.album, {
    ...item,
    to: item.transfer_address,
  }).then((res) => {
    if (!res) return;
    ElMessage.success("已请求重新划转");
    emit("update");
  });
};

watch(
  () => props.tableData,
  (newV, oldV) => {
    if (newV.length <= oldV.length) {
      scrollTo(0, 0);
    }
  }
);

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

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`
  );
};
</script>

<style lang="scss" scoped>
.albumTable {
  :deep(.el-table__cell) {
    height: 50px;
  }
}
</style>
