<template>
  <div class="h-full issuedAlbumTable">
    <Table
      :columns="
        columns.filter(
          (i) =>
            ($route.name === 'issuedDerivativesDetail' && i.label !== '备注') ||
            $route.name !== 'issuedDerivativesDetail'
        )
      "
      :data="tableData"
      ref="tableRef"
      height="100%"
      :loading="loading"
    >
      <template #img="props">
        <img
          v-if="JSON.parse(props.file_info).file_type !== 'mp4'"
          style="width: 30px; height: 30px; border-radius: 8px"
          class="object-cover"
          :src="
            JSON.parse(props.file_info).file_s_url ||
            JSON.parse(props.file_info).file_url
          "
        />
        <img
          v-else
          style="width: 30px; height: 30px; border-radius: 8px"
          class="object-cover"
          :src="videoSvg"
        />
      </template>
      <template #note="props">
        <div class="overflow-hidden overflow-ellipsis whitespace-nowrap">
          {{ JSON.parse(props.file_info).file_note }}
        </div>
      </template>
      <template #name="props">
        <div
          class="overflow-hidden overflow-ellipsis whitespace-nowrap"
          :class="{
            'cursor-pointer': props.status === 2,
          }"
          @click="props.status === 2 && toProve(props)"
        >
          {{ props.name }}
        </div>
      </template>
    </Table>
  </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 videoSvg from "@/assets/img/video.svg";
import { debounce } from "lodash";
import { columns } from "./constants";
import { globalState } from "@/store/state";
import { useTableScrollListener } from "@/components/Table/hooks";
import { $ajax } from "@/service";

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

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">
.issuedAlbumTable {
  .el-table__cell {
    height: 50px;
  }
}
</style>
