<template>
  <syTable
    height="100%"
    :data="transferList"
    :columns="columns"
    v-if="transferList.length > 0"
    show-overflow-tooltip
  >
    <template #pass_name="props">
      <div class="overflow-hidden overflow-ellipsis cursor-pointer" @click="toProve(props)">
        {{ props.pass_name }}
      </div>
    </template>
    <template #identifier="props">
      <div class="overflow-hidden overflow-ellipsis">
        {{ props.identifier }}
      </div>
    </template>
    <template #to="props">
      <div class="overflow-hidden overflow-ellipsis">
        {{ props.to }}
      </div>
    </template>
    <template #amount="props">
      <div class="overflow-hidden overflow-ellipsis">
        {{ props.amount }}
      </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>
  </syTable>
  <div class="empty" v-if="transferList.length <= 0">
    <img
      src="/images/pass/empty.png"
    />
    <span>搜索无结果</span>
  </div>
</template>

<script lang="ts">
import { $ajax } from "@/service";
import { globalState } from "@/store/state";
import { debounce, GO_URLS, syTable, formatTime, syButton } from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { defineComponent } from "vue";

export default defineComponent({
  props: ["transferList"],
  emits: ["update", "nextPage"],
  components: {
    syTable,
    syButton,
  },
  watch: {
    transferList(newV) {
      if (newV.length > 0) {
      }
    },
  },
  data() {
    return {
      columns: [
        {
          minWidth: "30",
        },
        {
          label: "转账名称",
          prop: "pass_name",
          slotName: "pass_name",
          showOverflowTooltip: true,
          minWidth: "150",
        },
        {
          label: "资产标识",
          prop: "identifier",
          slotName: "identifier",
          showOverflowTooltip: true,
          minWidth: "150",
        },
        {
          label: "划转地址",
          prop: "to",
          slotName: "to",
          showOverflowTooltip: true,
          minWidth: "250",
        },
        {
          label: "划转数量",
          prop: "amount",
          slotName: "amount",
          showOverflowTooltip: true,
          minWidth: "100",
        },
        {
          label: "划转时间",
          prop: "create_time",
          showOverflowTooltip: true,
          slotName: "create_time",
          minWidth: "180",
        },
        {
          label: "划转状态",
          prop: "status",
          slotName: "status",
          minWidth: "100",
        },
      ],
      passShow: false, // 显示转账弹窗
      curItem: {},
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 145;
    },
  },
  mounted() {
    this.addScrollListener();
  },
  beforeUnmount() {
    const wrap = document.querySelector(
      ".el-scrollbar__wrap"
    ) as HTMLDivElement | null;
    wrap && (wrap.onscroll = null);
  },
  methods: {
    addScrollListener() {
      this.$nextTick(() => {
        const wrap = document.querySelector(
          ".el-scrollbar__wrap"
        ) as HTMLDivElement | null;
        wrap &&
          (wrap.onscroll = debounce(
            (event: Event) => {
              const target = event.target as HTMLDivElement;
              if (
                target.offsetHeight + target.scrollTop >=
                target.scrollHeight
              ) {
                console.log("bottom");
                this.next();
              }
            },
            500,
            false
          ));
      });
    },
    formatTime,
    toProve(item: any) {
      window.open(
        `${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`
      );
    },
    reIssue: debounce(
      async function (this: any, content: any) {
        const res = await $ajax({
          type: "post",
          url: GO_URLS.reTransfer,
          params: {
            id: content.id,
          },
        });
        if (!res) return;
        ElMessage.success("重新转账成功");
        this.$emit("update");
      },
      500,
      false
    ),
    next() {
      this.$emit("nextPage");
    },
  },
});
</script>

<style scoped lang="scss">
.text-btn {
  color: var(--sy-blue) !important;
  font-size: 12px;
  font-weight: normal;
  outline: none !important;
  border: none !important;
  padding-top: 0;
  padding-bottom: 0;
}
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 145px);

  img {
    width: 134px;
    height: 113px;
    margin-bottom: 6px;
  }

  span {
    font-size: 14px;
    color: var(--sy-gray);
    line-height: 20px;
  }
}
</style>
