<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="70%" max-height="30%">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row>
        <!-- 輸入箱號(hào) -->
        <el-col :span="4">
          <el-form-item label="集裝箱箱號(hào)" prop="containerNumber">
            <el-input v-model="formData.containerNumber" placeholder="請(qǐng)輸入箱號(hào)" clearable />
          </el-form-item>
        </el-col>
        <!-- 輸入箱屬 -->
        <el-col :span="4">
          <el-form-item label="箱屬" prop="containerOwner">
            <el-input v-model="formData.containerOwner" placeholder="箱屬" clearable />
          </el-form-item>
        </el-col>
        <!-- 查詢按鈕 -->
        <el-col :span="4">
          <el-button type="primary" @click="searchBoxData">查詢箱號(hào)</el-button>
        </el-col>
      </el-row>
      <!-- 其他表單項(xiàng) -->
    </el-form>
  </Dialog>
</template>
<script setup>
import { ref } from 'vue'
import GoodsLogApi from '@/api/GoodsLogApi'
const formData = ref({
  containerNumber: '',
  containerOwner: '',
  // 其他字段
})
const formRules = ref({
  // 表單驗(yàn)證規(guī)則
})
const formLoading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
// 打開(kāi)彈窗方法
const open = async (type, id = null) => {
  dialogVisible.value = true
  dialogTitle.value = type === 'create' ? '創(chuàng)建' : '編輯'
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      formData.value = await GoodsLogApi.getGoodsLog(id)
    } finally {
      formLoading.value = false
    }
  }
}
// 重置表單數(shù)據(jù)
const resetForm = () => {
  formData.value = {
    containerNumber: '',
    containerOwner: '',
    // 其他字段
  }
}
// 查詢箱號(hào)數(shù)據(jù)
const searchBoxData = async () => {
  if (!formData.value.containerNumber) {
    return this.$message.warning('請(qǐng)輸入箱號(hào)')
  }
  formLoading.value = true
  try {
    // 向后端請(qǐng)求箱號(hào)數(shù)據(jù)
    const boxData = await GoodsLogApi.queryBoxData(formData.value.containerNumber)
    if (boxData) {
      // 將查詢結(jié)果填充到表單
      formData.value.containerOwner = boxData.containerOwner || ''  // 例如填充箱屬
      // 根據(jù)返回的其他字段繼續(xù)填充表單數(shù)據(jù)
      formData.value.containerNumber = boxData.cntr || ''  // 例如填充箱號(hào)
    } else {
      this.$message.warning('未找到相關(guān)箱號(hào)數(shù)據(jù)')
    }
  } catch (error) {
    this.$message.error('查詢失敗')
  } finally {
    formLoading.value = false
  }
}
</script>

// api/GoodsLogApi.js
import request from '@/utils/request'
export default {
  // 根據(jù)箱號(hào)查詢數(shù)據(jù)
  queryBoxData(containerNumber) {
    return request({
      url: `/api/goods-log/query-box`,
      method: 'get',
      params: { containerNumber }
    })
  }
}

@RestController
@RequestMapping("/api/goods-log")
public class GoodsLogController {
    @Autowired
    private GoodsLogService goodsLogService;
    // 查詢箱號(hào)數(shù)據(jù)
    @GetMapping("/query-box")
    public ResponseEntity<Map<String, Object>> queryBoxData(@RequestParam String containerNumber) {
        Map<String, Object> boxData = goodsLogService.queryBoxData(containerNumber);
        if (boxData == null) {
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);  // 如果未找到數(shù)據(jù)
        }
        return ResponseEntity.ok(boxData);  // 返回查詢結(jié)果
    }
}

@Service
public class GoodsLogService {
    @Autowired
    private JdbcTemplate jdbcTemplate;  // 使用 JdbcTemplate 執(zhí)行 SQL 查詢
    public Map<String, Object> queryBoxData(String containerNumber) {
        String sql = "SELECT * " +
                     "FROM xxx WHERE CNTR = ?";
        // 執(zhí)行查詢并返回結(jié)果
        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql, containerNumber);
        // 如果找到數(shù)據(jù)，返回第一個(gè)結(jié)果
        if (result != null && !result.isEmpty()) {
            return result.get(0);
        }
        return null;  // 如果沒(méi)有找到數(shù)據(jù)，返回 null
    }
}