<template>
  <div class="h-full transferTable">
    <Table
      :columns="columns"
      :data="data"
      ref="tableRef"
      height="100%"
      :loading="loading"
    >
      <template #name="props">
        <div class="flex items-center cursor-pointer" @click="toProve(props)">
          <div class="overflow-hidden text-ellipsis whitespace-nowrap">
            {{ props.pass_name }}
          </div>
          <syButton mode="littleBtn" class="ml-3">
            {{ props.amount }}
          </syButton>
        </div>
      </template>
      <template #address="props">
        <div class="flex items-center whitespace-nowrap">
          <div class="mr-2 overflow-hidden text-ellipsis">
            {{ props.to }}
          </div>
          <ElTooltip effect="dark" content="复制地址" placement="top-start">
            <el-icon @click="handleClickCopy(props.to)" class="cursor-pointer"
              ><DocumentCopy
            /></el-icon>
          </ElTooltip>
        </div>
      </template>
      <template #time="props">
        <div class="whitespace-nowrap overflow-hidden text-ellipsis">
          {{ formatTime(props.update_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="__reTransfer(props)"
            class="iconfont2 icon-re cursor-pointer"
            style="color: rgb(103, 169, 255); margin-left: 3px"
          ></span>
        </div>
      </template>
      <template #operate="slotProps">
        <syMoreOperate
          :teleport="true"
          :list="[
            {
              name: '删除',
              value: '删除',
            },
          ]"
          @click-item=""
          :margin-left="-20"
          class="align-middle"
        >
          <Icon
            icon-name="iconbianzu7-copy"
            style="font-size: 26px"
            class="cursor-pointer"
          ></Icon>
        </syMoreOperate>
      </template>
    </Table>
  </div>
</template>

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

import { ElTooltip, ElIcon, ElMessage } from "element-plus";
import { DocumentCopy } from "@element-plus/icons-vue";
import { formatTime, syButton, syMoreOperate, copyText } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";
import Table from "@/components/Table/index.vue";

import { debounce } from "lodash";
import { useTableScrollListener } from "@/components/Table/hooks";
import { $ajax } from "@/service";
import { globalState } from "@/store/state";
import { columns } from "./config";
import { URLS } from "@/service/URL";
import { eCollectionType } from "@/views/Collection/PassMaker/types";
import { reTransfer } from "@/service/Transfer";
import { router } from "@/router";

const props = defineProps<{
  data: any[];
  type: eCollectionType;
  loading?: boolean;
}>();

const tableRef = ref<InstanceType<typeof Table>>();

defineExpose({
  tableRef,
});

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

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

const __reTransfer = debounce(async (content: any) => {
  const ret = await reTransfer(props.type, content);
  if (ret?.code === 200) {
    emit("update");
  }
}, 500);

const toProve = (item: any) => {
  if (item.pass_id && item.pass_hash)
    window.open(
      `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`
    );
  else if (item.batch_num) {
    router.push({
      name: "issuedAlbumDetail",
      query: {
        batch_num: item.batch_num,
        name: item.pass_name,
      },
    });
  }
};

const handleClickCopy = (str: string) => {
  copyText(str);
  ElMessage.success("复制成功");
};
</script>

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