<template>
  <div
    class="grid grid-cols-4 justify-center items-center justify-items-stretch"
    style="grid-row-gap: 24px; grid-column-gap: 22px"
  >
    <div
      class="album relative bg-center"
      v-for="(album, index) in list"
      :style="{
        backgroundImage: `url(${album.m_img_url || albumDefaultBg})`,
      }"
    >
      <div class="mask"></div>
      <div class="title">{{ album.name }}</div>
      <div
        class="uploadBtn absolute"
        style="right: 15px; bottom: 16px"
        @click="$emit('select', album)"
      >
        上传
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import albumDefaultBg from "@/assets/img/Fm.svg";

const props = defineProps<{
  list: any[];
}>();

defineEmits(["select"]);
</script>

<style scoped lang="scss">
.album {
  display: flow-root;
  height: 112px;
  border-radius: 20px;
  .mask {
    width: 100%;
    position: absolute;
    height: 90px;
    background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, #000000 100%);
    border-radius: 20px;
    opacity: 0.46;
  }
  .title {
    position: absolute;
    margin-top: 13px;
    margin-left: 19px;
    margin-right: 19px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }
  &:hover {
    .uploadBtn {
      display: block;
    }
  }
  .uploadBtn {
    display: none;
    width: 52px;
    height: 26px;
    background: var(--sy-blue);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
  }
}
</style>
