<template>
  <div class="proofTable h-full">
    <Table
      ref="tableRef"
      :columns="columns"
      :data="data"
      height="100%"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <template #name="slotProps">
        <div
          class="whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer flex items-center"
          @click="
            $router.push({
              path: '/tracingDetail',
              query: {
                id: slotProps.id,
              },
            })
          "
        >
          <img src="@/assets/img/box.svg" class="mr-3" alt="" srcset="" />
          <div class="text-ellipsis overflow-hidden">
            {{ slotProps.name }}
            <span v-if="slotProps.increment_num + 1 >= 2"
              >({{ slotProps.increment_num + 1 }})</span
            >
          </div>
        </div>
      </template>
      <template #date="slotProps">
        {{ getRelativeTime(slotProps.create_time) }}
      </template>
      <template #qrcode="slotProps">
        <div class="text-center">
          <syMoreOperate
            :use-slot="true"
            teleport
            :width="121"
            :border="false"
            :disabled="slotProps.status !== 2"
          >
            <template #default>
              <div class="text-center w-6 h-6" @click="openQRcode(slotProps)">
                <i
                  class="iconfont iconerweima1"
                  :class="[
                    slotProps.status === 2 ? 'Icon--check' : 'Icon--no-check',
                  ]"
                ></i>
              </div>
            </template>
            <template #content>
              <div class="qrcode-show-box text-center">
                <div class="imgbox">
                  <img :src="QRcode" :draggable="false" />
                </div>
                <p
                  class="select-none"
                  @click="
                    downloadQrCode(
                      slotProps.hash,
                      globalState.urlList.chain_browser_url
                    )
                  "
                >
                  下载二维码
                </p>
              </div>
            </template>
          </syMoreOperate>
        </div>
      </template>
      <template #query="slotProps">
        <div class="text-center">
          <syMoreOperate
            :width="156"
            :list="getSearchOperateList()"
            :disabled="slotProps.status !== 2"
            :teleport="true"
            @click-item="
              (value) => handleClickSearchMoreOperateItem(value, slotProps)
            "
          >
            <template #default>
              <div class="w-6 h-6">
                <i
                  class="iconfont iconfangdajing1"
                  :class="[
                    slotProps.status === 2 ? 'Icon--check' : 'Icon--no-check',
                  ]"
                ></i>
              </div>
            </template>
          </syMoreOperate>
        </div>
      </template>
      <template #operate="slotProps">
        <div class="text-center">
          <syMoreOperate
            :teleport="true"
            :list="getOperateList(slotProps)"
            @click-item="(value) => handleClickItem(value, slotProps)"
            :margin-left="-20"
            class="align-middle"
          >
            <Icon
              icon-name="iconbianzu7-copy"
              style="font-size: 26px"
              class="cursor-pointer"
            ></Icon>
          </syMoreOperate>
        </div>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Table from "@/components/Table/index.vue";
import Icon from "@/components/Icon/index.vue";
import {
  syMoreOperate,
  getRelativeTime,
  copyText,
  getQR,
  downloadQrCode,
  openChainBrowser,
} from "cqk-sy-ui";
import { useTableScrollListener } from "@/components/Table/hooks";

import { columns } from "./constants";
import { globalState } from "@/store/state";
import { ElMessage } from "element-plus";
import { iProof } from "@/views/Tracing/tracingDetail/types";

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

const tableRef = ref<InstanceType<typeof Table>>();
const emit = defineEmits([
  "scrollToEnd",
  "delete",
  "duplicate",
  "privacy",
  "increment",
]);
const QRcode = ref<string>();

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

defineExpose({
  tableRef,
});

const getOperateList = (slotProps: iProof) => {
  const list = [
    {
      name: "创建副本",
      value: "duplicate",
      click: () => {
        emit("duplicate", slotProps);
      },
    },
    {
      name: "删除",
      value: "delete",
      click: () => {
        emit("delete", slotProps);
      },
    },
  ];
  if (slotProps.status === 2) {
    list.unshift({
      name: "增量更新",
      value: "increment",
      click: () => {
        emit("increment", slotProps);
      },
    });
  }
  if (slotProps.status === 2 || slotProps.status === 6) {
    list.unshift({
      name: "隐私设置",
      value: "privacy",
      click: () => {
        emit("privacy", slotProps);
      },
    });
  }
  if (slotProps.status === 5) {
    list.unshift({
      name: "已隐藏",
      value: "privacy2",
      click: () => {},
    });
  }

  return list;
};

const handleClickItem = (value: any, slotProps: any) => {
  const list = getOperateList(slotProps);
  const theOne = list.find((i) => i.value === value);
  theOne?.click && theOne.click();
};

const openQRcode = async (item: any) => {
  QRcode.value =
    (await getQR(item.hash, globalState.urlList.chain_browser_url)) || "";
};

const searchOpearteList = [
  {
    name: "浏览器查询",
    value: "浏览器查询",
    click(props: any) {
      openChainBrowser(props.hash, globalState.urlList.chain_browser_url);
    },
  },
  {
    name: "复制hash地址",
    value: "复制hash地址",
    click(props: any) {
      copyText(props.hash);
      ElMessage.success("复制成功");
    },
  },
];

const getSearchOperateList = () => {
  return searchOpearteList;
};

const handleClickSearchMoreOperateItem = (value: string, props: any) => {
  searchOpearteList.find((i) => i.value === value)?.click(props);
};
</script>

<style lang="scss" scoped>
.proofTable {
  .Icon--check {
    color: var(--sy-blue);
    cursor: pointer;
  }
  .Icon--no-check {
    cursor: no-drop;
    color: #b6b5ba;
  }
}
</style>

<style lang="scss">
.qrcode-show-box {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.13);
  overflow: hidden;
  font-size: 12px;
  color: rgba(155, 155, 155, 1);
  line-height: 17px;
  .imgbox {
    width: 106px;
    height: 106px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    cursor: pointer;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--sy-black);
  }
}
</style>
