<template>
  <div class="albumTable h-full">
    <ImageDisplay :url="url" v-model:visible="visible"></ImageDisplay>
    <Table
      ref="tableRef"
      :columns="columns"
      :data="dataWithIndex"
      height="100%"
      :loading="loading"
    >
      <template #img="slotProps">
        <img
          @click="
            url = slotProps.original_image_url || slotProps.url;
            visible = true;
          "
          :src="slotProps.url"
          style="width: 30px; height: 30px; border-radius: 8px"
          class="object-cover cursor-pointer"
        />
      </template>
      <template #time="slotProps">
        {{ formatTime(slotProps.create_time) }}
      </template>
      <template #operate="slotProps">
        <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>
      </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 { formatTime, syMoreOperate } from "cqk-sy-ui";

import { columns } from "./config";
import { useTableScrollListener } from "@/components/Table/hooks";
import ImageDisplay from "@/components/ImageDisplay/index.vue";

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

const url = ref("");
const visible = ref(false);

const dataWithIndex = computed(() => {
  return props.data.map((i, index) => ({ ...i, index: index + 1 }));
});
const tableRef = ref<InstanceType<typeof Table>>();
const emit = defineEmits(["scrollToEnd", "deleteAlbum"]);

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

defineExpose({
  tableRef,
});

const getOperateList = (slotProps: any) => {
  return [
    {
      name: "删除",
      value: "delete",
    },
  ];
};

const handleClickItem = (value: any, slotProps: any) => {
  emit("deleteAlbum", {
    ...slotProps,
  });
};
</script>

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