<template>
  <div>
    <div
      class="flex items-center mt-5"
      style="margin-left: 26px"
      v-if="infoList && infoList.length !== 0"
    >
      <div
        style="font-size: 16px; font-weight: 600; color: rgba(53, 53, 53, 1)"
        class="mr-4"
      >
        回收站
      </div>
      <sySearch
        v-model:value="params.key_words"
        @search="inputBlur"
        placeholder="搜索存证名称/存证地址"
      ></sySearch>
    </div>
    <div
      class="overflow-hidden px-3 mt-5"
      v-if="infoList && infoList.length !== 0"
    >
      <DeletedTableVue
        :list="infoList"
        :serialNumber="serialNumber"
        :page="params.page"
        @handleChain="handleChain"
        @copyHash="copyHash"
        @privacySettings="privacySettings"
      ></DeletedTableVue>
      <pagination
        style="
          margin-top: 13px;
          text-align: right;
          padding-right: 13px;
          padding-bottom: 80px;
        "
        v-model:value="params.page"
        :total="total"
        @change="pagechange"
        :size="10"
      >
        <span class="pager-count">共{{ Math.ceil(total / 10) }}页</span>
      </pagination>
    </div>
    <div v-if="!infoList || infoList.length === 0">
      <div
        class="absolute top-1/3 left-1/2 transform -translate-x-1/2 text-center"
      >
        <img
          src="/images/category/deletes.png"
        />
        <p class="text-sm mt-4">暂无已删除存证</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { showTip } from "@/components/GlobalMount/api";
import { $ajax } from "@/service";
import { setDeletedNum } from "@/store/mutations";
import { globalState } from "@/store/state";
import {
  sySearch,
  syPagination,
  syPrompt,
  syCommonDialog,
  GO_URLS,
  openChainBrowser,
  fmtTimeStamp,
} from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { defineComponent } from "vue";
import DeletedTableVue from "./DeletedTable.vue";

export default defineComponent({
  components: {
    Pagination: syPagination,
    prompt: syPrompt,
    CommonDialog: syCommonDialog,
    sySearch,
    DeletedTableVue,
  },
  props: ["ToUpdate"],
  data() {
    return {
      infoList: [] as any,
      params: {
        page: 1,
        key_words: "",
        page_size: 10,
        is_valid: 1,
      },
      showBlock: false,
      checkBlock: 0,
      total: 0,
      isFirst: true,
      showList: false,
      checkSet: -1,
      PromptShow: false,
      PromptID: -1,
    };
  },
  watch: {
    ToUpdate: function (newO, oldO) {
      this.inValid(this.params);
    },
  },
  mounted() {
    this.inValid(this.params);
  },
  methods: {
    async callDialogMethod(refName: string, methodName: string) {
      return (this.$refs as any)[refName][methodName]();
    },
    serialNumber(index: number) {
      return (this.params.page - 1) * 10 + (index + 1);
    },
    async hiddenCertificate() {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.deleteBlockChainProof,
        params: {
          id: this.PromptID,
        },
      });
      if (res) {
        this.inValid(this.params);
        ElMessage({
          type: "success",
          message: "隐藏成功!",
        });
      }
    },
    privacySettings(item: any) {
      showTip(
        "确定要隐藏该条记录吗",
        () => {
          this.hiddenCertificate();
        },
        () => {}
      );

      this.PromptID = item.id;
    },
    openSet(item: any, index: number) {
      if (item.status !== 2) return;
      this.checkSet = index;
      document.addEventListener("mousedown", this.onHindMenu);
    },
    inputBlur() {
      if (this.params.key_words.trim() === "") {
        this.params.key_words = "";
      }
      this.params.page = 1;
      this.inValid(this.params);
    },
    pagechange() {
      this.inValid(this.params);
    },
    // 隐藏条件选中
    onHindMenu() {
      this.showBlock = false; // 区块链
      this.checkSet = -1;
      document.removeEventListener("mousedown", this.onHindMenu);
    },
    // 复制哈希值
    copyHash(item: any) {
      var input = document.createElement("input"); // 直接构建input
      input.value = item.hash; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input);
      ElMessage({
        message: "复制成功，请右键粘贴使用",
        type: "success",
      });
    },
    // 打开区块链浏览器
    handleChain(item: any) {
      openChainBrowser(item.hash, globalState.urlList.chain_browser_url);
    },
    // 显示区块链弹窗
    openBlock(item: any, index: number) {
      if (item.status != 2) {
        return;
      }
      this.checkBlock = index;
      document.addEventListener("mousedown", this.onHindMenu);
      this.showBlock = true;
    },
    fmtTimeStamp2: function (stampStr: any) {
      return fmtTimeStamp("Y-M-D", parseInt(stampStr));
    },
    //   获取已删除数据
    async inValid(params: any) {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.list,
        params: params,
      });
      if (res) {
        if (this.isFirst) {
          if (res.data.results) {
            this.showList = true;
            this.isFirst = false;
          }
        }
        setDeletedNum(res.data.total);
        this.infoList = res.data.results;
        this.total = res.data.total;
      }
    },
  },
});
</script>

<style>
.pager-count {
  margin-left: 12px;
  font-size: 12px;
}
</style>
