<script setup lang="ts">

import {ref} from "vue";
import type IStackerLocationInfo from "@/interface/custom/IStackerLocationInfo.ts";
import StackerLocationView from "@/components/custom/StackerLocationView.vue";
import StackerLocationApi from "@/api/stackerLocation.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import type IStackerLocationTableData from "@/model/table/IStackerLocationTableData.ts";

const modelValue = defineModel('modelValue', {required: true, default: false});
const close = () => {
  laneData.value = [];
  modelValue.value = false;
};
const stackerIdList = ref<number[]>([]); // 堆垛机号列表
const stackerId = ref<number>(1); // 堆垛机号
const laneList = ref<number[]>([]); // 巷道列表
const laneId = ref<number>(1); // 巷道号
const laneData = ref<IStackerLocationInfo[]>([]);

// 查询
const query = () => {
  laneData.value = [];
  const newData: IStackerLocationInfo[] = [];
  const loadingInstance = MessageUtils.loading('正在查询...');
  StackerLocationApi.queryStackerLocationByStackerIdAndLaneId(stackerId.value, laneId.value).then(res => {
    const stringify = JSON.stringify(res.data);
    const response = JSON.parse(stringify) as AppServeDataResponse<IStackerLocationTableData[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      response.data.forEach(item => {
        newData.push({
          locationId: item.locationId,
          row: item.lRow,
          line: item.lLine,
          layer: item.lLayer,
          depth: item.lDepth,
          status: item.locationStatus
        });
      });
      laneData.value = newData;
      return;
    }
  }).catch(() => {}).finally(() => {
    loadingInstance.close();
  });
};
// 打开
const open = () => {
  laneData.value = [];
  getStackerIdList(); // 获取堆垛机号列表
  getLaneIdList(); // 获取巷道列表
};
// 获取堆垛机号列表
const getStackerIdList = () => {
  StackerLocationApi.getStackerIdList().then(res => {
    const stringify = JSON.stringify(res.data);
    const response = JSON.parse(stringify) as AppServeDataResponse<number[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      stackerIdList.value = response.data;
      if(stackerIdList.value.length > 0) {
        stackerId.value = stackerIdList.value[0];
      } else {
        stackerId.value = 0;
      }
      return;
    }
  }).catch(() => {});
}
// 获取巷道列表
const getLaneIdList = () => {
  laneList.value = [];
  StackerLocationApi.getLaneIdList(stackerId.value).then(res => {
    const stringify = JSON.stringify(res.data);
    const response = JSON.parse(stringify) as AppServeDataResponse<number[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      laneList.value = response.data;
      if(laneList.value.length > 0) {
        laneId.value = laneList.value[0];
      } else {
        laneId.value = 0;
      }
      return;
    }
  }).catch(() => {});
}

</script>

<template>
  <el-drawer v-model="modelValue" title="仓库货位图" direction="btt" size="80vh" @close="close" :close-on-click-modal="false" @opened="open">
    <el-row>
      <el-form class="searchForm" label-position="left" label-width="100px" inline>
        <el-form-item label="堆垛机号：" style="width: 250px;">
          <el-select v-model="stackerId" placeholder="请选择巷道号" @change="getLaneIdList">
            <el-option v-for="item in stackerIdList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巷道号：" style="width: 250px;">
          <el-select v-model="laneId" placeholder="请选择巷道号">
            <el-option v-for="item in laneList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 250px;">
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <StackerLocationView style="margin-top: 10px;width: 100%" :location-list="laneData"></StackerLocationView>
    </el-row>
    <template #footer>
      <div style="flex: auto">
        <el-button type="danger" @click="close">关闭窗口</el-button>
      </div>
    </template>
  </el-drawer>

</template>

<style scoped>

</style>