<script setup lang="ts">
import {useI18n} from "vue-i18n";
import type {IStackerRunningInfo} from "@/interface/page/stacker/IStackerRunningInfo.ts";
import {ref} from "vue";
import StackerApi from "@/api/stacker.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import MessageUtils from "@/utils/MessageUtils.ts";

const modelValue = defineModel('modelValue', {required: true, default: false});
const close = () => { modelValue.value = false; };
const tableData = ref<IStackerRunningInfo[]>([]);
const { t } = useI18n();

// 查询堆垛机状态
const query = () => {
  tableData.value = [];
  const loadingInstance = MessageUtils.loading();
  StackerApi.getStackerRunningInfo().then((res) => {
    const response = JSON.parse(JSON.stringify(res.data)) as AppServeDataResponse<IStackerRunningInfo[]>;
    if(response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      tableData.value = response.data ?? [];
      MessageUtils.successMessage("查询成功");
      return;
    }
    MessageUtils.warningMessageBox(response.msg, '警告');
  }).catch(() => {}).finally(() => {
    loadingInstance.close();
  })
}

</script>

<template>
  <el-dialog :model-value="modelValue" :title="t('tabPage.stackerManage.stackerRunningInfo')" @close="close"
             :close-on-click-modal="false" width="60vw">
    <el-row style="height: 100%">
      <el-table :data="tableData" stripe border style="width: 100%" height="35vh">
        <el-table-column prop="stackerId" label="堆垛机编号" width="100" align="center" show-overflow-tooltip/>
        <el-table-column prop="controlModel" label="控制方式" align="center" width="100" show-overflow-tooltip/>
        <el-table-column prop="deviceStatus" label="当前状态" align="center" width="100" show-overflow-tooltip/>
        <el-table-column prop="location" label="当前位置" align="center" width="100" show-overflow-tooltip/>
        <el-table-column prop="plcTaskId" label="当前任务号" align="center" width="100" show-overflow-tooltip/>
        <el-table-column prop="errorCode" label="当前报警编号" align="center" width="120" show-overflow-tooltip/>
        <el-table-column prop="vehicleNo" label="当前载具号" align="center" min-width="120" show-overflow-tooltip/>
      </el-table>
    </el-row>
    <template #footer>
      <el-button-group>
        <el-button type="primary" @click="query">{{t('baseButton.refresh')}}</el-button>
        <el-button type="danger" @click="close">{{t('baseButton.close')}}</el-button>
      </el-button-group>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>