<template>
  <el-dialog title="货架可视化" v-model="dialogVisible" fullscreen append-to-body>
    <div class="location-visual-container">
      <!-- 第一列：库存基础信息 -->
      <div class="visual-column location-info">
        <h3>库存基础信息</h3>
        <el-form :model="inventoryInfo" label-width="80px" label-position="top" class="three-col-form">
          <div class="form-row">
            <el-form-item label="物资名称">
              <span>{{ inventoryInfo.materialName || '-' }}</span>
            </el-form-item>
            <el-form-item label="物资编号">
              <span>{{ inventoryInfo.materialCode || '-' }}</span>
            </el-form-item>
            <el-form-item label="规格型号">
              <span>{{ inventoryInfo.specification || '-' }}</span>
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="计量单位">
              <span>{{ inventoryInfo.unit || '-' }}</span>
            </el-form-item>
            <el-form-item label="批次号">
              <span>{{ inventoryInfo.batchNo || '-' }}</span>
            </el-form-item>
            <el-form-item label="生产日期">
              <span>{{ parseTime(inventoryInfo.productionDate, '{y}-{m}-{d}') || '-' }}</span>
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="有效日期">
              <span>{{ parseTime(inventoryInfo.expirationDate, '{y}-{m}-{d}') || '-' }}</span>
            </el-form-item>
            <el-form-item label="库存数量">
              <span>{{ inventoryInfo.quantity || 0 }}</span>
            </el-form-item>
            <el-form-item label="可用数量">
              <span>{{ inventoryInfo.availableQuantity || 0 }}</span>
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="锁定数量">
              <span>{{ inventoryInfo.lockedQuantity || 0 }}</span>
            </el-form-item>
            <el-form-item label="入库单价(元)">
              <span>{{ inventoryInfo.unitCost || 0 }}</span>
            </el-form-item>
            <el-form-item label="成本(元)">
              <span>{{ inventoryInfo.totalCost || 0 }}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 第二列：可视化展示 -->
      <div class="visual-column">
        <h3>可视化展示</h3>
        <div class="visualization-container">
          <div class="warehouse-layout">
            <!-- 遍历所有货架 -->
            <div class="shelf-container">
              <!-- 货架单元格 -->
              <div class="shelf-cell" v-for="location in locations" :key="location.locationId" :class="{'selected': location.locationId === selectedLocation.locationId}">
                <div class="shelf-header">
                  <h4>{{ location.locationName }}</h4>
                  <div class="shelf-code">{{ location.locationCode }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="LocationVisualDialog">
import { computed } from 'vue'
import { parseTime } from '@/utils/ruoyi'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  inventoryInfo: {
    type: Object,
    default: () => ({})
  },
  selectedLocation: {
    type: Object,
    default: () => ({})
  },
  locations: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'close'])

const dialogVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emit('update:visible', value)
  }
})

const closeDialog = () => {
  emit('close')
  emit('update:visible', false)
}
</script>

<style scoped>
.location-visual-container {
  display: flex;
  height: calc(100vh - 120px);
  gap: 20px;
  padding: 20px;
}

.visual-column {
  flex: 1;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  overflow-y: auto;
}

.location-info {
  flex: 0 0 600px;
}

.visual-column h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
  font-size: 18px;
  font-weight: bold;
}

.three-col-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-row .el-form-item {
  margin-bottom: 0;
  flex: 1;
  min-width: 100px;
}

.visualization-container {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
}

.warehouse-layout {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.shelf-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.shelf-cell {
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.shelf-cell:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.shelf-cell.selected {
  border-color: #409eff;
  background-color: #ecf5ff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.shelf-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.shelf-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}

.shelf-code {
  color: #909399;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding: 20px;
}
</style>