<script setup lang="ts">

import {computed, type CSSProperties, ref} from "vue";
import type IStackerLocationInfo from "@/interface/custom/IStackerLocationInfo.ts";

const props = defineProps<{
  locationList: IStackerLocationInfo[]
}>();
const locationList = computed(() => props.locationList);
const locationMap = computed<Map<string, IStackerLocationInfo>>(() => {
  let locationMap = new Map<string, IStackerLocationInfo>();
  locationList.value.forEach(item => {
    const key = `${item.row}-${item.line}-${item.layer}-${item.depth}`;
    if(!locationMap.has(key)) {
      locationMap.set(key, item);
    }
  });
  return locationMap;
})
// 最大列数
const lineMax = computed(() => {
  if(!locationList.value || locationList.value.length === 0) {
    return 0;
  }
  const validLines = locationList.value
      .map(item => item.line)
      .filter(line => line !== undefined) as number[];
  return validLines.length > 0 ? Math.max(...validLines) : 0;
});
// 最大层数
const layerMax = computed(() => {
  if(!locationList.value || locationList.value.length === 0) {
    return 0;
  }
  const validLayers = locationList.value
      .map(item => item.layer)
      .filter(layer => layer !== undefined) as number[];
      return validLayers.length > 0 ? Math.max(...validLayers) : 0;
});
// 最大深度
const depthMax = computed(() => {
  if(!locationList.value || locationList.value.length === 0) {
    return 0;
  }
  const validDepths = locationList.value
      .map(item => item.depth)
      .filter(depth => depth !== undefined) as number[];
      return validDepths.length > 0 ? Math.max(...validDepths) : 0;
})
// 方块样式
const blockStyle = (status: number): CSSProperties => {
  const style: CSSProperties = {
    width: '15px',
    height: '15px',
    border: '1px solid #ccc',
    display: 'inline-block',
    marginRight: '1px',
    textAlign: 'center',
    marginBottom: '0',
    padding: '0',
    fontSize: '0',
  };
  switch (status) {
    case 0:
      style.backgroundColor = '#88db6d';
      break;
    case 1:
      style.backgroundColor = '#facdb8';
      break;
    case 2:
      style.backgroundColor = '#f1dbaa';
      break;
    case 3:
      style.backgroundColor = '#eed212';
      break;
    case 9:
      style.backgroundColor = '#ff9797';
      break;
    default:
      style.backgroundColor = '#fff';
      style.borderColor = '#cfcfcf60';
      break;
  }
  return style;
};
// 筛选数据2
const filterData = (row: number, line: number, layer: number, depth: number) : IStackerLocationInfo => {
  const key: string = `${row}-${line}-${layer}-${depth}`;
  if(locationMap.value.has(key)) {
    return locationMap.value.get(key) as IStackerLocationInfo;
  }
  return {
    locationId: '无货位',
    status: -2
  };
}

const test = () => {
  console.log(layerMax, depthMax);
  console.log(locationList.value);
};

</script>

<template>
  <el-row>
    <el-row style="width: 100%; margin-bottom: 10px">
      <el-col :span="4">
        <span :style="blockStyle(-2)"/>
        <span style="margin-left: 2px;font-size: .7rem">无货位或未知状态</span>
      </el-col>
      <el-col :span="4">
        <span :style="blockStyle(0)"/>
        <span style="margin-left: 2px;font-size: .7rem">空闲</span>
      </el-col>
      <el-col :span="4">
        <span :style="blockStyle(1)"/>
        <span style="margin-left: 2px;font-size: .7rem">入库中</span>
      </el-col>
      <el-col :span="4">
        <span :style="blockStyle(2)"/>
        <span style="margin-left: 2px;font-size: .7rem">出库中</span>
      </el-col>
      <el-col :span="4">
        <span :style="blockStyle(3)"/>
        <span style="margin-left: 2px;font-size: .7rem">占用</span>
      </el-col>
      <el-col :span="4">
        <span :style="blockStyle(9)"/>
        <span style="margin-left: 2px;font-size: .7rem">禁用</span>
      </el-col>
    </el-row>
    <el-scrollbar height="50vh" style="width: 100%">
      <el-row>
        <el-row v-for="(layer, layerIndex) in layerMax" :key="layerIndex">
          <el-divider v-if="layer != 1"></el-divider>
          <el-scrollbar>
            <el-col :span="24" :style="{width: 16*lineMax + 'px', minWidth: '51vw'}">
              <!--      2排-->
              <el-row v-for="(line, lineIndex) in lineMax" :key="lineIndex" style="display: inline">
                <span style="width: 15px;height: 15px;background-color: white;border: 1px solid #ccc;margin-right: 1px;text-align: center;font-size: .6rem; display: inline-block">{{line}}</span>
              </el-row>
              <el-row v-for="(depth, depthIndex) in depthMax" :key="depthIndex">
                <el-row v-for="(line, lineIndex) in lineMax" :key="lineIndex" style="display: inline;height: 16px;width: 16px">
                  <el-tooltip effect="dark" :content="filterData(1, line, layerMax - layer + 1, depthMax - depth + 1).locationId" placement="top-start" style="margin: 0">
                    <span :style="blockStyle(filterData(1, line, layerMax - layer + 1, depthMax - depth + 1).status ?? -2)">
                    </span>
                  </el-tooltip>
                </el-row>
              </el-row>
              <el-row>
                <div style="width: 100%; height: 20px;background-color: #b1b1fd;text-align: center;font-size: .8rem;font-weight: bolder;margin-top: 4px">{{layerMax - layer + 1}} 层 --- 堆垛机  ----->  </div>
              </el-row>
              <!--      1排-->
              <el-row v-for="(depth, depthIndex) in depthMax" :key="depthIndex">
                <el-row v-for="(line, lineIndex) in lineMax" :key="lineIndex" style="display: inline;height: 16px;width: 16px">
                  <el-tooltip effect="dark" :content="filterData(2, line, layerMax - layer + 1, depth).locationId" placement="top-start">
                    <span :style="blockStyle(filterData(2, line, layerMax - layer + 1, depth).status ?? -2)"></span>
                  </el-tooltip>
                </el-row>
              </el-row>
            </el-col>
          </el-scrollbar>
        </el-row>
      </el-row>
      <el-divider></el-divider>
    </el-scrollbar>
  </el-row>
</template>

<style scoped>

</style>