<template>
    <div class='icon' :class="{ 'red-flash': equip && isUnique(equip) }"
        :style="{ 'box-shadow': 'inset 0 0 7px 2px ' + ((equip && equip.quality.color) || '#a1a1a1') }">
        <span v-if="equip">
            <img :src="require('@/assets/icons/equips/' + equip.base.icon)">
            <div class="lv">lv{{ equip.lv }}</div>
        </span>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, computed } from "vue";
import { useI18n } from "vue3-i18n";
import { qualitys } from "@/config";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();

const prop = defineProps({
    equip: {
        type: Object,
        default: ''
    }
})

const isUnique = (equip) => {
    if(!equip){
        return false;
    }
    const quality = equip.quality.quality;
    return quality && quality == qualitys[4];
  }

const iconClass = computed(() => {
    if (prop.equip && prop.equip.isUnique()) {
        return
    }
    return "";
})

onMounted(() => { });
</script>
<style lang="scss" scoped>
.icon {
    width: 3.5rem;
    height: 3.5rem;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    position: relative;
    .lv{
        position: absolute;
        left: 0.1rem;
        bottom: 0.1rem;
        color: white;
        font-size: 0.8rem;
    }
}

.red-flash.icon {
    background-image: url(@/assets/icons/red.gif) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
</style>