<template>
  <div>
    <StackBorder>
      <!--      如果调出有值-->
      <svg-icon
        v-if="test === '1'"
        class="svgStyle"
        icon-class="ESOP"
        size="85"
      />
      <!--      如果调入有值-->
      <svg-icon
        v-else-if="test === '2'"
        class="svgStyle"
        icon-class="jiaoliao"
        size="85"
      />
      <div v-else :class="['count', getClassByState()]">
        {{ currentLayer === 0 ? "" : currentLayer }}
      </div>
    </StackBorder>
  </div>
</template>

<script lang="tsx" setup>
import StackBorder from "./stackBorder.vue";
import { StackObj, StackState } from "@/api/storage/change";

const props = defineProps<StackObj>();

const state = inject("changeState");

let dic = document.getElementById("dic");

const test = ref("3"); //todu: 待删除,

const getClassByState = () => {
  // 如果正在选择调出，currentLayer大于0的显示为enable，否则显示为disable
  // 如果正在选择调入，layer为0的显示为disable，否则显示为enable
  if (state.value === StackState.SELECT_OUT) {
    return props?.currentLayer > 0 ? "enable" : "disable";
  } else if (state.value === StackState.SELECT_IN) {
    return props?.layer === 0 ? "disable" : "enable";
  }
  return "normal";
};
</script>

<style lang="scss" scoped>
.count {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.normal {
  background-color: #f5f5f5;
}

.enable {
  background-color: #64bb5c;
}

.disable {
  background-color: #d9dbdd;
}
</style>
