<template>
  <div class="h-full transferTable">
    <Table :columns="columns" :data="data" ref="tableRef" height="100%">
      <template #name="props">
        <div
          class="flex items-center"
          @click="toProve(props)"
          :class="{
            'cursor-pointer': props.pass_id && props.pass_hash,
          }"
        >
          <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)"
              ><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"
            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, watch } from "vue";

import { ElTooltip, ElIcon } from "element-plus";
import { DocumentCopy } from "@element-plus/icons-vue";
import {
  formatTime,
  GO_URLS,
  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";

const props = defineProps<{
  data: any[];
}>();

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

defineExpose({
  tableRef,
});

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

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

const reTransfer = debounce(async (content: any) => {
  const transferType = "picture";
  if (transferType === "picture") {
    const res = await $ajax({
      type: "post",
      url: GO_URLS.reTransfer,
      params: {
        id: content.id,
      },
    });
    if (!res) return;
  } else if (transferType === "album") {
    const res = await $ajax({
      type: "post",
      url: URLS.transferBatch,
      params: {
        batch_num: "",
        to: content.to,
      },
    });
    if (!res) return;
  }
}, 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`
    );
};

const handleClickCopy = (str: string) => {
  copyText(str);
};
</script>

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