<template>
  <syTable
    height="100%"
    :data="passList"
    :columns="columns"
    v-if="passList.length > 0"
    show-overflow-tooltip
  >
    <template #name="props">
      <div
        class="cursor-pointer overflow-hidden overflow-ellipsis"
        @click="toProve(props)"
      >
        {{ props.name }}
      </div>
    </template>
    <template #identifier="props">
      <div class="overflow-hidden overflow-ellipsis">
        {{ props.identifier }}
      </div>
    </template>
    <template #amount="props">
      <div class="overflow-hidden overflow-ellipsis">
        {{ props.amount }}
      </div>
    </template>
    <template #balance="props">
      <div class="overflow-hidden overflow-ellipsis">
        {{ props.balance }}
      </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="">
        <span class="text-gray" v-if="props.balance === 0">划转</span>
        <el-button
          class="text-btn cursor-pointer"
          v-else-if="props.status === 2"
          type="text"
          @click="transfer(props)"
          >划转</el-button
        >
      </div>
    </template>
  </syTable>
  <div class="empty" v-if="passList.length <= 0">
    <img
      src="/images/pass/empty.png"
    />
    <span>搜索无结果</span>
  </div>
  <!-- 转账弹窗-->
  <common-dialog
    showMask
    @closePopup="passShow = false"
    type="element"
    :visible="passShow"
    :element-dialog-props="{
      title: '资产转账',
    }"
    element-dialog-size="medium"
  >
    <transfer-pass
      v-if="passShow"
      @update="$emit('update', curItem.id, curItem.balance)"
      :content="curItem"
      @closePopup="passShow = false"
    ></transfer-pass>
  </common-dialog>
</template>

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

export default defineComponent({
  props: ["passList"],
  components: {
    CommonDialog: syCommonDialog,
    syTable,
    ElButton,
    syButton,
    syIcon,
    TransferPass,
  },
  emits: ["update", "nextPage"],
  data() {
    return {
      columns: [
        {
          minWidth: "30",
        },
        {
          label: "资产名称",
          minWidth: "180",
          slotName: "name",
          showOverflowTooltip: true,
          prop: "name",
        },
        {
          label: "资产标识",
          minWidth: "180",
          showOverflowTooltip: true,
          slotName: "identifier",
          prop: "identifier",
        },
        {
          label: "发行数量",
          slotName: "amount",
          showOverflowTooltip: true,
          prop: "amount",
        },
        {
          label: "剩余数量",
          slotName: "balance",
          showOverflowTooltip: true,
          prop: "balance",
        },
        {
          label: "发行时间",
          minWidth: "150",
          showOverflowTooltip: true,
          slotName: "create_time",
          prop: "create_time",
        },
        {
          label: "发行状态",
          slotName: "status",
          showOverflowTooltip: true,
          prop: "status",
        },
        {
          label: "转划",
          slotName: "transfer",
        },
      ],
      passShow: false, // 显示转账弹窗
      curItem: {} as any,
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 145;
    },
  },
  mounted() {
    this.addListener();
  },
  beforeUnmount() {
    const wrap = document.querySelector(
      ".el-scrollbar__wrap"
    ) as HTMLDivElement | null;
    wrap && (wrap.onscroll = null);
  },
  methods: {
    addListener() {
      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.id}&evm_tx_hash=${item.tx_hash}&from=client`
      );
    },
    reIssue: debounce(
      async function (this: any, content: any) {
        const res = await $ajax({
          type: "post",
          url: GO_URLS.reissue,
          params: {
            ids: [content.id],
          },
        });
        if (!res) return;
        ElMessage.success("重新发行成功");
        this.$emit("update");
      },
      500,
      false
    ),
    transfer(item: any) {
      this.curItem = item;
      this.passShow = true;
    },
    next() {
      this.$emit("nextPage");
    },
  },
  watch: {
    passList(newV) {
      if (newV.length > 0) {
      }
    },
  },
});
</script>

<style scoped lang="scss">
.status {
  position: relative;
  .icon-re {
    height: 14px;
    width: 14px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: 40px;
  }
}
.pass-name {
  cursor: pointer;
}

.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;
}
.text-gray {
  font-size: 12px;
  color: #808080;
}
.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;
  }
}

:deep(.el-table) {
  .el-table__cell {
    padding: 0;
  }
  th.el-table__cell {
    height: 35px;
    line-height: 35px;
  }
  .el-table__body td.el-table__cell {
    height: 55px;
    line-height: 55px;
  }
}
</style>
