<template>
  <div
    :style="{
      'margin-right': '8px',
      'margin-bottom': '8px',
      width: '7em',
      height: '10.5em',
      'font-size': '11pt',
      display: 'inline-block',
    }"
  >
    <div :class="{imgCom: true, active: isSelect}">
      <div class="icon">
        <img style="width: 100%" :src="config.base.easyDiffusion + '/modifier-thumbnails/' + imgUrl" />
        <div class="mo">
          <el-icon :size="50"><Minus v-if="isSelect" /><Plus v-else /></el-icon>
        </div>
      </div>
      <div class="centent">
        <div class="text" v-text="text"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import config from '../../../config';
import { defineProps } from 'vue';
defineProps({
  isSelect: Boolean,
  text: String,
  imgUrl: String,
});
</script>

<style scoped>
.imgCom {
  position: absolute;
  background-color: #16171a;
  width: 7em;
  height: 10.5em;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}
.imgCom:hover {
  transform: translate(-5px, -5px);
  width: calc(7em + 10px);
  height: calc(10.5em + 10px);
}
.icon {
  position: relative;
}

.mo {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  background-color: #00000080;
}
.imgCom:hover .mo {
  display: block;
}
.mo .el-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.active {
  border: 2px solid rgb(179 82 255 / 94%);
  box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%);
}
.centent {
  height: 3.5em;
  font-size: 0.9em;
  font-weight: 100;
  text-align: center;
  position: relative;
}
.centent .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
