<template>
  <div class="shelf-container">
    <div class="shelf">
      <el-divider>{{ freightName }}--{{ freightCode }}</el-divider>
      <div style="margin-top: 20px">
        <div
          v-for="(row, rowIndex) in shelfData"
          :key="rowIndex"
          class="shelf-row"
          :style="{ display: 'flex', flexWrap: 'nowrap', height: `${ row.height}px` }"
        >
          <div
            v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
            :key="slot.id"
            class="shelf-slot"
            :style="{ width: `${100 / row.sysWorkplaceQueues.length}%` , height: `${ row.height}px`}"
            @click="handleSlotClick(slot)"
          >
            <div class="top-border-boxes">
              <div class="left-box">

                <span :style="{
                            color: slot.cpmctymc ? 'green' : 'black',
                            fontSize:`${13 + 25/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">
                  {{ slot.cpmctymc ? slot.cpmctymc: "暂未绑定"}}
                </span>

              </div>
              <div class="right-box">

                <div
                  :class="['top-border-box',  slot.red != null && slot.red != 0 ?  'red-box' : 'white-box' ]"
                ></div>
                <div
                  :class="['top-border-box',  slot.blue != null &&slot.blue != 0 ?  'blue-box': 'white-box' ]"
                ></div>
                <div
                  :class="['top-border-box',  slot.green != null &&slot.green != 0 ?  'green-box'  : 'white-box' ]"
                ></div>
                <div
                  :class="['top-border-box',  slot.orange != null &&slot.orange != 0 ?  'orange-box':  'white-box' ]"
                ></div>


              </div>

            </div>
            <div class="centered-container">

              <span  v-if="slot.cpmctymc" :style="{
                            color: 'black',
                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">当前库存： <span :style="{
                            color: 'green',
                            fontSize:`${12 + 20/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">{{ slot.reCount }}
                </span> </span>

              <span v-if="slot.cpmctymc":style="{
                            color: 'black',
                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">最大库存：<span  :style="{
                            color: 'green',
                            fontSize:`${12 + 20/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">{{ slot.maxDrugCount }}
                </span></span>

              <span v-if="slot.cpmctymc"  :style="{
                            color: 'black',
                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">预警信息：<span :style="{
                            color: slot.reCount <= 0? 'red': slot.reCount <= slot.remindCount?'orange':'green' ,
                            fontSize:`${12 + 20/row.sysWorkplaceQueues.length}px` ,
                            fontWeight: 'bold'
                          }">{{ slot.reCount <= 0? '无库存': slot.reCount <= slot.remindCount?'低库存':'正常' }}
                </span></span>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShelfDisplay',
  props: {
    shelfData: {
      type: Array,
      required: true
    },
    freightCode: {
      type: Object,
      required: true
    },
    freightName: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleSlotClick(slot) {
      // 发射一个名为 'slot-click' 的自定义事件，携带被点击的货位信息
      this.$emit('slot-click', slot)
    }
  },
  created() {

  }
}
</script>

<style scoped>
.shelf-container {
  border: 2px solid #ccc; /* 新添加的外层边框 */
  border-radius: 10px; /* 外层边框的圆角效果 */
  padding: 10px; /* 外层边框的内边距 */
  background-color: #f8f8f8; /* 外层边框的背景颜色 */
}

.shelf {
  width: 100%;
  margin: auto;
  perspective: 1000px; /* 添加透视效果 */
}

.shelf-row {
  margin: 10px;
  padding: 0;
  display: flex;
  align-items: center; /* 确保行内容垂直居中 */
}

.shelf-slot {
  position: relative; /* 为伪元素定位 */
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s ease; /* 添加过渡效果 */
  transform-style: preserve-3d; /* 保持3D子元素的变换 */
  border-top: 5px solid #ddd; /* 新添加的上边框，宽度为 5px，颜色为 #ddd */
  margin-left: 5px; /* 增加左边距 */
  margin-right: 5px; /* 增加右边距 */
  transition: transform 0.3s ease; /* 平滑的过渡效果 */
  transform-style: preserve-3d; /* 保持3D变换的子元素在3D空间中 */
  perspective: 800px; /* 设置透视效果，模拟3D深度 */
  z-index: 10;
  background: linear-gradient(to bottom, #e6f7ff, #d1e8fd); /* 线性渐变的浅蓝背景 */
}

.shelf-slot:hover {
  z-index: 25;
  transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1.1); /* 悬停时应用3D变换和放大效果 */
}

/* 使用伪元素创建颜色框 */
.shelf-slot::before,
.shelf-slot::after {
  content: '';
  position: absolute;
  width: 20px; /* 调整颜色框宽度 */
  height: 20px; /* 调整颜色框高度 */
  border-radius: 50%; /* 圆形颜色框 */
}

.centered-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column; /* 使得子元素垂直排列 */
  align-items: flex-start; /* 让子元素在水平方向上靠左对齐 */
}

.left-content {
  width: 100%;
  display: flex;
  flex-direction: column; /* 使得子元素垂直排列 */
}
.left-content span {
  display: block; /* 使每个span元素成为块级元素，从而单独占一行 */
  text-align: left; /* 文本左对齐 */
}

/* 上边框的颜色框容器 */
.top-border-boxes {
  display: flex;
  height: 20px; /* 上边框颜色框的高度 */
  padding: 0;
}

.top-border-boxes .left-box {
  display: flex;
  flex-grow: 5; /* 左边区域将占据剩余空间 */
}
.top-border-boxes .right-box {
  display: flex;
  flex-grow: 0.1;/* 右边区域将占据剩余空间 */
}

/* 上边框的颜色框 */
.top-border-box {
  /*flex: 1; !* 平均分配宽度 *!*/
  height:10px; /* 与容器高度一致 */
  width: 10px; /* 与容器高度一致 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 50%; /* 使元素成为圆形 */
}

.red-box {
  background-color: red;
}

.blue-box {
  background-color: blue;
}

.green-box {
  background-color: green;
}

.orange-box {
  background-color: orange;
}

.white-box {
  background-color: white;
}
</style>
