<script setup lang="ts">

import {nextTick, ref} from "vue";
import type IStackerStandTableData from "@/model/table/IStackerStandTableData.ts";
import TrueFalseTagStyleFormatter from "@/plugin/formatter/TrueFalseTagStyleFormatter.ts";
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";
import StackerInTypeFormatter from "@/plugin/formatter/StackerInTypeFormatter.ts";
import type {AppServeResponse} from "@/interface/api/AppServeResponse.ts";
import StringUtils from "@/utils/StringUtils.ts";

const trueFalseTagStyleFormatter = new TrueFalseTagStyleFormatter(); // 是否枚举格式化
const stackerInTypeFormatter = new StackerInTypeFormatter(); // 入库方式
const modelValue = defineModel('modelValue', {required: true, default: false});
const props = defineProps(['stackerData']); //
const emit = defineEmits(['reLoadingTableData']);
const standIdDisable = ref<boolean>(false); // 站台号不允许编辑
const tableData = ref<IStackerStandTableData[]>([]); // 站台表格数据
const formData = ref<IStackerStandTableData>({
  standId: '',
  plcId: 0,
  stackerId: props.stackerData.stackerId,
  standName: '',
  standStatus: 1,
  laneId: 1,
  standLocation: '',
  standXyz: '',
  areaId: '',
  allowIn: 1,
  inType: 0,
  allowOut: 1,
  outType: 0,
  readStatusAddress: '',
  writeTaskAddress: '',
 });
// 查询
const query = () => {
  resetInput();
  const loadingInstance = MessageUtils.loading();
  StackerApi.queryStandInfo(props.stackerData.stackerId).then((res) => {
    const responseString = JSON.stringify(res.data);
    const response = JSON.parse(responseString) as AppServeDataResponse<IStackerStandTableData[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      tableData.value = response.data;
      MessageUtils.successMessage('查询成功');
      return;
    }
    MessageUtils.warningMessageBox(response.msg, '警告');
  }).catch(() => {}).finally( () => {
     loadingInstance.close();
  })
};
// 重置查询参数
const resetInput = () => {
  standIdDisable.value = false;
  formData.value = {
    standId: '',
    plcId: 0,
    stackerId: props.stackerData.stackerId,
    standName: '',
    standStatus: 1,
    laneId: 1,
    standLocation: '',
    standXyz: '',
    areaId: '',
    allowIn: 1,
    inType: 0,
    allowOut: 1,
    outType: 0,
    readStatusAddress: '',
    writeTaskAddress: '',
  };
};
// 添加/更新 站台信息
const addAndSave = () => {
  if(StringUtils.isNullOrEmpty(formData.value.standId)) {
    MessageUtils.warningMessageBox('请输入站台编号');
    return;
  }
  MessageUtils.confirmMessageBox('确定要保存吗？', '请确认').then(() => {
    const loadingInstance = MessageUtils.loading();
    StackerApi.addOrUpdateStandInfo(formData.value).then((res) => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if(response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("添加成功");
        query();
        return;
      }
      MessageUtils.warningMessageBox(response.msg, '警告');
    }).catch(() => {}).finally(() => {
      loadingInstance.close();
    });
  }).catch(() => {});
};
// 编辑站台
const edit = (index: number, row: any) => {
  standIdDisable.value = true;
  formData.value = {
    standId: row.standId,
    plcId: row.plcId,
    stackerId: props.stackerData.stackerId,
    standName: row.standName,
    standStatus: row.standStatus,
    laneId: row.laneId,
    standLocation: row.standLocation,
    standXyz: row.standXyz,
    areaId: row.areaId,
    allowIn: row.allowIn,
    inType: row.inType,
    allowOut: row.allowOut,
    outType: row.outType,
    readStatusAddress: row.readStatusAddress,
    writeTaskAddress: row.writeTaskAddress,
  };
};
// 删除站台
const  deleteRow = (index: number, row: any) => {
  MessageUtils.confirmMessageBox(`确定要删除站台：${row.standId} 吗？删除后不可恢复`, '请确认').then(() => {
    const loadingInstance = MessageUtils.loading();
    StackerApi.deleteStandInfo(row.standId).then((res) => {
      const response = JSON.parse(JSON.stringify(res.data)) as AppServeResponse;
      if(response.code == AppServeResponseCodeEnum.SUCCESS) {
        MessageUtils.successMessage("删除成功");
        query();
        return;
      }
      MessageUtils.warningMessageBox(response.msg, '警告');
    }).catch(() => {}).finally(() => {
      loadingInstance.close();
    });
  }).catch(() => {});
};
// 查看站台状态
const queryStandStatus = () => {

};

</script>

<template>
  <el-drawer v-model="modelValue" direction="ltr" :close-on-click-modal="false" size="80%">
    <template #header="{ close, titleId, titleClass }">
      <div :id="titleId" :class="titleClass" style="font-weight: bolder">堆垛机站台配置</div>
    </template>
    <el-text type="warning">当前配置的堆垛机是：【{{props.stackerData.stackerId}}】 ---- {{props.stackerData.stackerName}}</el-text>
    <el-row class="dataEditCard">
      <el-row>
        <el-text type="success" style="margin: 10px;">【站台配置】添加/编辑窗口</el-text>
      </el-row>
      <el-row style="width: 100%;">
        <el-form class="dataForm" :model="formData" label-position="top" label-width="150px" inline>
          <el-form-item label="站台编号：" style="width: 250px;" required>
            <el-input v-model="formData.standId" placeholder="请输入站台编号" clearable :disabled="standIdDisable"></el-input>
          </el-form-item>
          <el-form-item label="站台名称：" style="width: 250px;" required>
            <el-input  v-model="formData.standName" placeholder="请输入站台名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="管辖的PLC：" style="width: 250px;" required>
            <el-input-number v-model="formData.plcId" :min="1" :max="999" clearable></el-input-number>
          </el-form-item>
          <el-form-item label="站台状态：" style="width: 250px;" required>
            <el-select v-model="formData.standStatus" placeholder="请选择用户组状态">
              <el-option v-for="item in trueFalseTagStyleFormatter.canUseTagStyle" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巷道编号：" style="width: 250px;" required>
            <el-input-number v-model="formData.laneId" :min="1" :max="999" clearable></el-input-number>
          </el-form-item>
          <el-form-item label="站台位置：" style="width: 250px;" required>
            <el-input v-model="formData.standLocation" placeholder="请输入站台位置" clearable></el-input>
          </el-form-item>
          <el-form-item label="站台坐标：" style="width: 250px;">
            <el-input v-model="formData.standXyz" placeholder="请输入站台坐标" clearable></el-input>
          </el-form-item>
          <el-form-item label="区域号：" style="width: 250px;" required>
            <el-input v-model="formData.areaId" placeholder="请输入区域号" clearable></el-input>
          </el-form-item>
          <el-form-item label="是否允许入库：" style="width: 250px;" required>
            <el-select v-model="formData.allowIn" placeholder="请选择是否允许入库">
              <el-option v-for="item in trueFalseTagStyleFormatter.trueFalseTagStyle" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入库方式：" style="width: 250px;" required>
            <el-select v-model="formData.inType" placeholder="请选择是否允许入库">
              <el-option v-for="item in stackerInTypeFormatter.inTypeTagStyle" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否允许出库：" style="width: 250px;" required>
            <el-select v-model="formData.allowOut" placeholder="请选择是否允许出库">
              <el-option  v-model="formData.allowOut" v-for="item in trueFalseTagStyleFormatter.trueFalseTagStyle" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出库方式：" style="width: 250px;">
            <el-input  v-model="formData.outType" placeholder="请输入出库方式" disabled clearable></el-input>
          </el-form-item>
          <el-form-item label="获取状态地址：" style="width: 250px;">
            <el-input v-model="formData.readStatusAddress" placeholder="请输入获取状态地址" clearable></el-input>
          </el-form-item>
          <el-form-item label="写入任务地址：" style="width: 250px;">
            <el-input  v-model="formData.writeTaskAddress" placeholder="请输入写入任务地址" clearable></el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-button-group style="width: 100%;margin-left: 10px; margin-bottom: 10px">
          <el-button type="warning" @click="resetInput">重置输入框</el-button>
          <el-button type="success" @click="addAndSave">添加/保存</el-button>
        </el-button-group>
      </el-row>
    </el-row>
    <el-row>
      <el-button-group>
        <el-button type="primary" @click="query">查看/刷新站台</el-button>
        <el-button type="info" @click="queryStandStatus" v-if="tableData.length > 0">查看站台状态</el-button>
      </el-button-group>
    </el-row>
    <el-row class="dataTable">
      <el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100vh - 270px)">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="standId" label="站台编号" width="100" align="center" show-overflow-tooltip fixed="left"/>
        <el-table-column prop="standName" label="站台名称" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="plcId" label="管辖的PLC" align="center" min-width="120" show-overflow-tooltip/>
        <el-table-column prop="standStatus" label="站台状态" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="dark" size="small" round :type="trueFalseTagStyleFormatter.canUseTagStyleFormatter(scope.row.standStatus).type">
              {{trueFalseTagStyleFormatter.canUseTagStyleFormatter(scope.row.standStatus).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="laneId" label="巷道编号" align="center" min-width="120" show-overflow-tooltip/>
        <el-table-column prop="standLocation" label="站台位置" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="standXyz" label="站台坐标" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="areaId" label="区域号" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="allowIn" label="是否允许入库" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="plain" size="small" round :type="trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.allowIn).type">
              {{trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.allowIn).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="inType" label="入库方式" align="center" width="150" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="plain" size="small" :type="stackerInTypeFormatter.inTypeFormatter(scope.row.inType).type">
              {{stackerInTypeFormatter.inTypeFormatter(scope.row.inType).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="allowOut" label="是否允许出库" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="plain" size="small" round :type="trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.allowOut).type">
              {{trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.allowOut).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="outType" label="出库方式" align="center" width="250" show-overflow-tooltip/>
        <el-table-column prop="readStatusAddress" label="获取状态地址" align="center" width="150" show-overflow-tooltip/>
        <el-table-column prop="writeTaskAddress" label="写入任务地址" align="center" width="150" show-overflow-tooltip/>
        <el-table-column prop="remark" label="备注" align="center" min-width="120" show-overflow-tooltip/>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-drawer>
</template>

<style scoped>
.dataEditCard {
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
  margin-bottom: 5px;
}
.dataTable {
  margin: 10px 10px 0 auto;
  width: 100%;
  border: #ccc solid 1px;
  border-radius: 4px;
  background-color: #fff;
}
.dataForm {
  margin: 5px 10px 0 10px;
  width: 100%;
}
.dataForm :deep(.el-form-item__label){
  font-size: 13px;
}

</style>