<template>
  <div class="h-full albumTable">
    <Table :columns="columns" :data="tableData" ref="tableRef" height="100%">
      <template #name="props">
        <div
          class="cursor-pointer"
          @click="
            $router.push({
              name: 'issuedAlbumDetail',
              query: {
                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>
      <!-- 	0:未转账 1:转账中 2:转账成功 3:转账失败 -->
      <!-- <template #transfer="props">
        <div class="whitespace-nowrap">
          
          <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"

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

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

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(["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>
