<template>
  <el-config-provider :locale="zhCn">
    <el-container class="content">
      <fieldset class="input-area">
        <legend style="font-size: 30px;">PDA拣货系统</legend>
        <el-form :model="bindingData" :label-position="labelPosition"
                 label-width="100px" style="max-width: 100%" :rules="rules" status-icon size="large">
          <div class="table-container">
            <el-row>
              <el-col :span="22" :offset="1">
                <el-form-item label="箱号：" required>
                  <el-input class="form-input large-center-input" v-model="bindingData.sourceBox" @keyup.enter="handleSourceBoxEnter" clearable ref="sourceBoxInput"/>
                </el-form-item>
              </el-col>
              <el-col :span="22" :offset="1">
                <el-form-item label="物料号：" required>
                  <el-input class="form-input large-center-input" v-model="bindingData.goodsId"  clearable readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="22" :offset="1">
                <el-form-item label="本次实际拣选：" required>
                  <el-input class="form-input large-center-input" v-model="bindingData.planPickQty"  clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="22" :offset="1">
                <el-form-item label="实际剩余数量：" required>
                  <el-input class="form-input large-center-input" v-model="bindingData.realRemainQty"  clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="22" :offset="1">
                <el-form-item label="目标箱号：" required>
                  <el-input class="form-input large-center-input" v-model="bindingData.containerNo" clearable ref="destinationBoxInput"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>


          <br>
          <br>

          <el-row :gutter="15" class="btn-area">
            <el-col :span="8">
              <el-form-item>
                <el-button type="warning" round @click="resetInput" class="action-button">重置数据</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" round @click="queryInventory" class="action-button">查询</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button
                    type="success"
                    round
                    @click="transferBox"
                    class="action-button">
                  确认放行
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </fieldset>
      <div ref="btnArea"></div>

      <!-- 添加全局加载指示器 -->
      <div v-if="showLoading" class="loading-overlay">
        <div class="loading-spinner">
          <i class="el-icon-loading"></i>
          <p>处理中...</p>
        </div>
      </div>
    </el-container>
  </el-config-provider>
</template>

<script>
import store from '@/store'
import {ElMessage, ElMessageBox} from 'element-plus'
import {confirmCurrentTask, confirmCurrentTaskByPDA, getPdaData} from '@/api/task.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {queryStocks} from '@/api/stock.js'
import {errorBox, warningBox} from "@/utils/myMessageBox";
import {ref} from "vue";
const USER_NAME = store.getters.getUserName
let pauseGetPickFlag = ref(false)
export default {
  name: 'BoxTransfer',
  data() {
    return {
      showLoading: false, // 用于控制全局加载动画的显示
      userName: store.getters.getUserName,
      bindingData: {
        taskId: '',
        outType: null,
        goodsId: '',
        totalNeed: null,
        remainNeed: null,
        planPickQty: null,
        realPickQty: null,
        stockId: '',
        vehicleId: '',
        planRemainQty: null,
        realRemainQty: null,
        isOut: null,
        putArea: '',
        warningQty: null,
        containerNo: '',
        standId: ''
      },
      transferList: [],
      inventoryList: [],
      labelPosition: "top",
      rules: {
        sourceBox: [
          { required: true, message: '请输入原始料箱编号' }
        ],
        destinationBox: [
          { required: true, message: '请输入目的料箱编号' }
        ]
      }
    }
  },
  computed: {
    zhCn() {
      return zhCn;
    }
  },
  mounted() {
    this.$refs.sourceBoxInput.focus();
  },
  methods: {
    handleSourceBoxEnter() {
      if (this.bindingData.sourceBox) {
        this.queryInventory();
        // 延迟聚焦到目标箱号输入框，确保查询完成
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.destinationBoxInput.focus();
          }, 100);
        });
      }
    },
    focusDestinationBox() {
      this.$refs.destinationBoxInput.focus();
    },

    focusSourceBox() {
      this.$refs.sourceBoxInput.focus();
    },

    transferBox() {
      // 如果正在加载中，防止二次点击
      if (this.showLoading) {
        return;
      }

      if (this.bindingData.sourceBox === '' || this.bindingData.containerNo === '') {
        ElMessage({
          message: '料箱和目的料箱都不能为空',
          type: 'error',
        });
        return;
      }

      if (this.bindingData.sourceBox === this.bindingData.containerNo) {
        ElMessage({
          message: '原始料箱和目的料箱不能相同',
          type: 'error',
        });
        return;
      }

      const request = {
        taskConfirm: {
          taskId: this.bindingData.taskId,
          outType: this.bindingData.outType,
          goodsId: this.bindingData.goodsId,
          totalNeed: this.bindingData.totalNeed,
          remainNeed: this.bindingData.remainNeed,
          planPickQty: this.bindingData.planPickQty,
          realPickQty: this.bindingData.realPickQty,
          containerNo: this.bindingData.containerNo,
        },
        stockConfirm: {
          stockId: this.bindingData.stockId,
          vehicleId: this.bindingData.vehicleId,
          goodsId: this.bindingData.goodsId,
          planRemainQty: this.bindingData.planRemainQty,
          realRemainQty: this.bindingData.realRemainQty,
          isOut: this.bindingData.isOut,
          putArea: this.bindingData.putArea,
        },
        standId: this.bindingData.standId,
        userName: USER_NAME
      }

      ElMessageBox.confirm(
          `确认将料箱 ${this.bindingData.sourceBox} 转移到 ${this.bindingData.containerNo} 吗？`,
          '转移确认'
      ).then(() => {
        // 显示全局加载动画
        this.showLoading = true;

        confirmCurrentTask(request, { timeout: 15000 }).then(res => {
          const responseData = res.data;
          if (responseData.code === 0) {
            ElMessage({
              message: '转移成功',
              type: 'success',
            });
            //this.transferList.push(responseData.data());
            this.resetInput();
            this.focusSourceBox();
          } else {
            ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '转移失败', {
              type: 'warning',
              confirmButtonText: '确定',
              showClose: false
            })
          }
        }).catch(err => {
          ElMessageBox.alert(`请求服务器失败：${err}`, '转移失败', {
            type: 'warning',
            confirmButtonText: '确定'
          })
        }).finally(() => {
          // 无论成功或失败都关闭加载动画
          this.showLoading = false;
        })
      }).catch(() => {
        // 用户取消操作
      })
    },

    resetInput() {
      this.bindingData.sourceBox = '';
      this.bindingData.goodsId = '';
      this.bindingData.planPickQty = '';
      this.bindingData.realRemainQty = '';
      this.bindingData.containerNo = '';

      // 重置完成后聚焦到箱号输入框
      this.$nextTick(() => {
        this.$refs.sourceBoxInput.focus();
      });
    },

    // 查询
    queryInventory() {
      if (!this.bindingData.sourceBox) {
        ElMessage({
          message: '请输入箱号进行查询',
          type: 'error',
        });
        return;
      }
      // 查询
      const params = {
        containerNo: this.bindingData.sourceBox
      }

      getPdaData(params).then(res => {
        const response = res.data
        if (response.code === 0) {
          // 检查 data 是否存在且为数组
          if (response.data && Array.isArray(response.data) && response.data.length > 0) {
            // 取数组中的第一个元素
            const result = response.data[0];
            this.bindingData.standId = result.childStandId || ''
            // 从 taskConfirm 对象中获取数据
            if (result.taskConfirm) {
              this.bindingData.taskId = result.taskConfirm.taskId || ''
              this.bindingData.outType = result.taskConfirm.outType
              this.bindingData.goodsId = result.taskConfirm.goodsId || ''
              this.bindingData.totalNeed = result.taskConfirm.totalNeed
              this.bindingData.remainNeed = result.taskConfirm.remainNeed
              this.bindingData.planPickQty = result.taskConfirm.planPickQty
              this.bindingData.realPickQty = result.taskConfirm.realPickQty
              this.bindingData.containerNo = result.taskConfirm.containerNo || '' // 添加 containerNo
            }

            // 从 stockConfirm 对象中获取数据
            if (result.stockConfirm) {
              this.bindingData.stockId = result.stockConfirm.stockId || ''
              this.bindingData.vehicleId = result.stockConfirm.vehicleId || ''
              this.bindingData.planRemainQty = result.stockConfirm.planRemainQty
              this.bindingData.realRemainQty = result.stockConfirm.realRemainQty
              this.bindingData.isOut = result.stockConfirm.isOut
              this.bindingData.putArea = result.stockConfirm.putArea || ''
              this.bindingData.warningQty = result.stockConfirm.warningQty
            }
            console.log(this.bindingData)
          } else {
            ElMessage({
              message: '未查询到相关数据',
              type: 'warning',
            });
          }
        } else if (response.code === 999) {
          // 警告，弹框
          pauseGetPickFlag.value = true
          warningBox(response.message)
        }
      }).catch(err => {
        console.log(err)
        pauseGetPickFlag.value = true
        errorBox('请求错误，请检查完原因后刷新界面。')
      })
    },
  }
}
</script>

<style scoped>
.content {
  display: flex;
  width: 100%;
}

.el-row {
  margin: 0 0;
}

:deep(.el-form-item__label) {
  font-size: 10px;
  padding: -5px 0;
}

:deep(.el-select-v2--large .el-select-v2__placeholder) {
  font-size: 25px;
}

.el-row .el-form-item {
  justify-content: center;
  margin-bottom: 10px; /* 减小表单项底部间距 */
}

/* 使用深度选择器更改字体大小 */
:deep(.el-table__body .cell) {
  font-size: 10px !important;
}

.el-row .el-form-item .el-select {
  width: 100% !important;
}

.el-row .el-form-item .el-select-v2 {
  width: 100% !important;
}

.el-row .el-form-item .el-input-number {
  width: 100% !important;
}

.small-label .cell {
  font-size: 12px;
}

.input-area {
  margin: 0;
  width: 800px;
  border: solid 1px;
  border-radius: 10px;
  box-shadow: 0 15px 10px -15px #000;
  padding: 20px;
}

/* 新增样式：居中大字体输入框 */
.large-center-input {
  text-align: center;
  font-size: 24px !important;
}

:deep(.large-center-input .el-input__inner) {
  text-align: center;
  font-size: 18px !important; /* 减小字体 */
  height: 35px; /* 减小高度 */
  padding: 0 8px;
}

/* 增加表单标签字体大小 */
:deep(.el-form-item__label) {
  font-size: 22px !important;
}

/* 按钮样式 */
.action-button {
  width: 100px;
  height: 40px;
  font-size: 16px;
  margin: auto;
}

.el-row .el-form-item .el-button {
  width: 100px;
  height: 40px;
  font-size: 16px;
  margin: auto;
}

/* 按钮区域样式 */
.btn-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.btn-area .el-col) {
  display: flex;
  justify-content: center;
}

/* 全局加载动画样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  text-align: center;
  color: white;
}

.loading-spinner i {
  font-size: 48px;
  animation: rotating 1s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner p {
  margin-top: 10px;
  font-size: 18px;
}
</style>
