<template>
  <div class="albumItem transition-all flow-root">
    <div
      class="albumBanner mx-auto bg-center bg-cover"
      :style="{
        backgroundImage: `url(${bgUrl || albumDefaultBg})`,
      }"
    ></div>
    <div
      class="flex items-center justify-between overflow-hidden"
      style="padding: 7px 17px"
    >
      <div class="overflow-hidden">
        <div class="name whitespace-nowrap overflow-hidden text-ellipsis">
          {{ name }}
        </div>
        <div class="time">
          {{ formatTime(time, 'YYYY.MM.DD') }}
        </div>
      </div>
      <slot name="bottomR">
        <syMoreOperate
          :list="operateList"
          @click-item="clickItem"
          teleport
          :margin-left="-47"
        >
          <template #default="{ show }">
            <div
              :style="{ backgroundColor: show ? '#e0e0e0' : '' }"
              style="border-radius: 4px"
              class="transition-all"
            >
              <Icon
                icon-name="iconbianzu7-copy"
                style="font-size: 23px"
                class="cursor-pointer"
              ></Icon>
            </div>
          </template>
        </syMoreOperate>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { formatTime, syMoreOperate } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";
import albumDefaultBg from "@/assets/img/Fm.svg";

const props = defineProps<{
  name: string;
  time: number;
  bgUrl: string;
}>();

const emit = defineEmits<{
  (e: "rename"): void;
  (e: "delete"): void;
}>();

const operateList = [
  { name: "重命名", value: "rename" },
  { name: "删除", value: "delete" },
];

const clickItem = (item: string) => {
  if (item === "rename") {
    emit("rename");
  } else if (item === "delete") {
    emit("delete");
  }
};
</script>

<style lang="scss" scoped>
.albumItem {
  width: 295px;
  height: 238px;
  border-radius: var(--sy-border-radius);
  &:hover {
    background: #efefef;
  }
  .albumBanner {
    width: 263px;
    height: 149px;
    margin-top: 18px;
    border-radius: var(--sy-border-radius);
  }
  .name {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: var(--sy-black);
  }
  .time {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--sy-gray);
  }
}
</style>
