<template>
  <syTable :data="list" :columns="columns" class="w-full overflow-hidden">
    <template #id="props">{{ serialNumber(props.index.$index) }}</template>
    <template #name="props">
      <div class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        {{ props.name }}
      </div></template
    >
    <template #createDate="props">
      <div>{{ formatTime(props.create_time) }}</div>
    </template>
    <template #deleteDate="props">{{ formatTime(props.update_time) }}</template>
    <template #reason="props">
      <div class="whitespace-nowrap overflow-hidden overflow-ellipsis">
        {{ props.abandon_remark }}
      </div>
    </template>
    <template #query="props">
      <syMoreOperate
        teleport
        :width="156"
        :list="queryOperateList"
        @click-item="(v) => handleClickQuery(props, v)"
        :disabled="props.status !== 2"
      >
        <div class="iconOutBox" style="color: #9b9b9b">
          <i
            class="iconfont iconfangdajing1"
            style="font-size: 13px"
            :class="{ 'iconerweima--check': props.status === 2 }"
          ></i>
        </div>
      </syMoreOperate>
    </template>
    <template #operate="props">
      <syMoreOperate
        :width="156"
        teleport
        :list="operateList"
        @click-item="(v) => handleClickOperate(props, v)"
        :disabled="props.status !== 2"
      >
        <i
          class="iconfont iconCZ2 align-middle"
          style="font-size: 42px; margin-left: -10px"
          :class="{ 'iconerweima--check': props.status === 2 }"
        ></i>
      </syMoreOperate>
    </template>
  </syTable>
</template>
<script lang="ts" setup>
import { syTable, formatTime, syMoreOperate } from "cqk-sy-ui";
const props = defineProps<{
  list: any[];
  page: number;
  serialNumber: (n: number) => number;
}>();

const emit = defineEmits(["handleChain", "copyHash", "privacySettings"]);
const operateList = [
  {
    name: "隐私设置",
    value: "隐私设置",
    click(item: any) {
      emit("privacySettings", item);
    },
  },
];

const queryOperateList = [
  {
    name: "查看区块链",
    value: "查看区块链",
    click(item: any) {
      emit("handleChain", item);
    },
  },
  {
    name: "复制存证地址",
    value: "复制存证地址",
    click(item: any) {
      emit("copyHash", item);
    },
  },
];

const handleClickOperate = (item: any, v: any) => {
  operateList.find((i) => i.name === v)?.click(item);
};

const handleClickQuery = (item: any, v: any) => {
  queryOperateList.find((i) => i.name === v)?.click(item);
};

const columns = [
  {
    width: "30",
  },
  {
    width: "90",
    label: "序号",
    dataIndex: "id",
    slotName: "id",
  },
  {
    width: "300",
    label: "存证名称",
    dataIndex: "name",
    showOverflowTooltip: true,
    slotName: "name",
  },
  {
    width: "200",
    label: "创建日期",
    dataIndex: "createDate",
    slotName: "createDate",
    showOverflowTooltip: true,
  },
  {
    width: "200",
    label: "删除日期",
    dataIndex: "deleteDate",
    slotName: "deleteDate",
    showOverflowTooltip: true,
  },
  {
    label: "删除原因",
    dataIndex: "reason",
    showOverflowTooltip: true,
    slotName: "reason",
  },
  {
    width: "100",
    label: "区块链查询",
    showOverflowTooltip: true,
    dataIndex: "query",
    slotName: "query",
  },
  {
    width: "85",
    label: "操作",
    dataIndex: "operate",
    showOverflowTooltip: true,
    slotName: "operate",
  },
];
</script>
<style lang="scss" scoped>
.iconOutBox {
  position: relative;
  height: 25px;
  width: 25px;
  line-height: 25px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  background: rgba(155, 155, 155, 0.1);
}
.iconerweima--check {
  color: var(--sy-blue);
}
</style>
