<template>
  <div class="location-cascader">
    <el-form :model="form" label-width="50px">
      <el-form-item label="仓库">
        <el-select v-model="form.warehouseId" placeholder="请选择仓库" @change="handleWarehouseChange" size="small">
          <el-option
            v-for="warehouse in warehouseList"
            :key="warehouse.warehouseId"
            :label="warehouse.warehouseName"
            :value="warehouse.warehouseId"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="库区">
        <el-select v-model="form.areaId" placeholder="请选择库区" @change="handleAreaChange" :disabled="!form.warehouseId" size="small">
          <el-option
            v-for="area in areaList"
            :key="area.areaId"
            :label="area.areaName"
            :value="area.areaId"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="货架">
        <el-select v-model="form.locationId" placeholder="请选择货架" :disabled="!form.areaId" size="small">
          <el-option
            v-for="location in locationList"
            :key="location.locationId"
            :label="location.locationCode"
            :value="location.locationId"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="LocationCascaderSelect">
import { ref, reactive, watch } from 'vue'
import { listWmsWarehouse } from "@/api/ware/wmsWarehouse"
import { listWmsArea } from "@/api/ware/wmsArea"
import { listWmsLocation } from "@/api/ware/wmsLocation"

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      warehouseId: null,
      areaId: null,
      locationId: null
    })
  }
})

const emit = defineEmits(['update:modelValue'])

// 表单数据
const form = reactive({
  warehouseId: props.modelValue.warehouseId,
  areaId: props.modelValue.areaId,
  locationId: props.modelValue.locationId
})

// 监听props变化，同步本地状态
watch(() => props.modelValue, (newVal) => {
  form.warehouseId = newVal.warehouseId
  form.areaId = newVal.areaId
  form.locationId = newVal.locationId
}, { deep: true })

// 仓库列表
const warehouseList = ref([])
// 库区列表
const areaList = ref([])
// 货架列表
const locationList = ref([])
// 加载状态
const loading = ref(false)

// 初始化获取仓库列表
const initWarehouseList = () => {
  loading.value = true
  listWmsWarehouse({ pageNum: 1, pageSize: 100 }).then(response => {
    warehouseList.value = response.rows
    loading.value = false
  }).catch(error => {
    console.error('获取仓库列表失败:', error)
    loading.value = false
  })
}

// 获取库区列表
const getAreaList = (warehouseId) => {
  if (!warehouseId) {
    areaList.value = []
    form.areaId = null
    form.locationId = null
    locationList.value = []
    return
  }
  
  loading.value = true
  listWmsArea({ pageNum: 1, pageSize: 100, warehouseId: warehouseId }).then(response => {
    areaList.value = response.rows
    loading.value = false
  }).catch(error => {
    console.error('获取库区列表失败:', error)
    loading.value = false
  })
}

// 获取货架列表
const getLocationList = (areaId) => {
  if (!areaId) {
    locationList.value = []
    form.locationId = null
    return
  }
  
  loading.value = true
  listWmsLocation({ pageNum: 1, pageSize: 100, areaId: areaId }).then(response => {
    locationList.value = response.rows
    loading.value = false
  }).catch(error => {
    console.error('获取货架列表失败:', error)
    loading.value = false
  })
}

// 仓库选择变化
const handleWarehouseChange = (warehouseId) => {
  getAreaList(warehouseId)
  updateModelValue()
}

// 库区选择变化
const handleAreaChange = (areaId) => {
  getLocationList(areaId)
  updateModelValue()
}

// 监听表单变化，更新modelValue
watch(
  () => [form.warehouseId, form.areaId, form.locationId],
  () => {
    updateModelValue()
  },
  { deep: true }
)

// 更新modelValue
const updateModelValue = () => {
  emit('update:modelValue', {
    warehouseId: form.warehouseId,
    areaId: form.areaId,
    locationId: form.locationId
  })
}

// 初始化
initWarehouseList()

// 如果初始有仓库ID，获取对应库区和货架
if (props.modelValue.warehouseId) {
  getAreaList(props.modelValue.warehouseId)
  if (props.modelValue.areaId) {
    getLocationList(props.modelValue.areaId)
  }
}
</script>

<style scoped>
.location-cascader {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
:deep(.el-form-item) {
  margin-bottom: 10px;
}
</style>