<template>
  <div class="h-full pictureTable">
    <Table :columns="columns" :data="tableData" ref="tableRef" height="100%">
      <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"

const props = defineProps<{
  tableData: any[]
  active: boolean
  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">
.pictureTable {
  .el-table__cell {
    height: 50px;
  }
}
</style>
