<template>
  <div class="recycleBinTable h-full">
    <Table
      ref="tableRef"
      :columns="columns"
      :data="data"
      height="100%"
      :loading="loading"
    >
      <template #update_time="slotProps">
        {{ getRelativeTime(slotProps.update_time) }}
      </template>
      <template #query="slotProps">
        <syMoreOperate
          :teleport="true"
          :list="queryOperateList"
          :disabled="slotProps.status !== 2"
          @click-item="
            (value) =>
              queryOperateList.find((i) => i.value === value)?.click(slotProps)
          "
          class="align-middle"
        >
          <span
            :style="{
              color:
                slotProps.status === 2 ? 'var(--sy-blue)' : 'var(--sy-gray)',
            }"
            >查询</span
          >
        </syMoreOperate>
      </template>
      <template #operate="slotProps">
        <div class="text-right">
          <syMoreOperate
            :teleport="true"
            :list="operateList"
            :margin-left="-65"
            @click-item="
              (value) =>
                operateList.find((i) => i.value === value)?.click(slotProps)
            "
            :disabled="slotProps.status !== 2"
            class="align-middle"
          >
            <Icon icon-name="iconbianzu7-copy" style="font-size: 26px"></Icon>
          </syMoreOperate>
        </div>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

import Table from "@/components/Table/index.vue";
import Icon from "@/components/Icon/index.vue";
import {
  syMoreOperate,
  getRelativeTime,
  copyText,
  openChainBrowser,
  GO_URLS,
} from "cqk-sy-ui";

import { columns } from "./config";
import { useTableScrollListener } from "@/components/Table/hooks";
import { ElMessage } from "element-plus";
import { globalState } from "@/store/state";
import { showTip } from "@/components/GlobalMount/api";
import { $ajax } from "@/service";

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

const tableRef = ref<InstanceType<typeof Table>>();
const emit = defineEmits(["scrollToEnd", "update"]);

const queryOperateList = [
  {
    name: "查看区块链",
    value: "check",
    click(slotProps: any) {
      openChainBrowser(slotProps.hash, globalState.urlList.chain_browser_url);
    },
  },
  {
    name: "复制存证地址",
    value: "copy",
    click(slotProps: any) {
      copyText(slotProps.hash);
      ElMessage.success("复制成功");
    },
  },
];
const operateList = [
  {
    name: "隐私设置",
    value: "privacySettings",
    click(slotProps: any) {
      showTip(
        "确定要隐藏该条记录吗",
        async () => {
          const res = await $ajax({
            type: "post",
            url: GO_URLS.deleteBlockChainProof,
            params: {
              id: slotProps.id,
            },
          });
          if (res) {
            ElMessage({
              type: "success",
              message: "隐藏成功!",
            });
            emit("update");
          }
        },
        () => {}
      );
    },
  },
];

useTableScrollListener(tableRef, () => {
  emit("scrollToEnd");
});

defineExpose({
  tableRef,
});
</script>

<style lang="scss" scoped>
.recycleBinTable {
  :deep(.el-table__cell) {
    height: 50px;
  }
}
</style>
