<template>
  <div
    class="flex flex-wrap cursor-pointer"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  >
    <div
      class="template flex-shrink-0"
      :style="{
        backgroundImage: `url(${bg})`,
      }"
    >
      <div
        class="title flex items-center justify-between overflow-hidden text-ellipsis whitespace-nowrap"
        style="margin-top: 18px; margin-left: 25px"
      >
        <div>
          {{ template.name }}
        </div>
        <slot name="icon" :hover="hover"></slot>
      </div>
      <div class="date" style="margin-left: 25px">
        {{ formatTime(template.update_time, "YYYY.MM.DD") }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { iTemplate } from "./type";
import { formatTime } from "cqk-sy-ui";
import { ref } from "vue";
import bg from "@/assets/img/templateCover.svg";

const props = defineProps<{
  template: iTemplate;
}>();

const hover = ref(false);
</script>

<style scoped lang="scss">
.template {
  width: 223px;
  height: 126px;
  background: #f3f7fb;
  border-radius: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sy-black);
    line-height: 26px;
    height: 26px;
  }
  .date {
    font-size: 12px;
    font-weight: 400;
    color: var(--sy-gray);
  }
  .hoverIcon {
    display: none;
  }
  &:hover .hoverIcon {
    display: block;
    background: #000;
  }
}
</style>
