<template>
  <a-form>
    <a-row class="form-row">
      <div class="custom-cascader">
        <!-- 执法处 -->
        <a-select v-model:value="pca.lawDept" placeholder="请选择执法处" style="width: 180px; margin-right: 8px" @change="handleLawDeptChange">
          <a-select-option v-for="item in props.lawDeptOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <a-select
          v-model:value="pca.area"
          placeholder="请选择区域"
          style="width: 180px; margin-right: 8px"
          @change="handleAreaChange"
          :disabled="!pca.lawDept"
        >
          <a-select-option v-for="item in areaOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <!-- 选择煤矿 -->
        <a-select v-model:value="pca.position" placeholder="请选择煤矿" style="width: 180px" :disabled="!pca.area">
          <a-select-option v-for="item in positionOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
// 替换为你的实际接口请求函数
import { getEnfMineTreeData } from './mineData.api';
const props = defineProps({
  lawDeptOptions: {
    type: Array,
    default: <Array<{ label: string; value: string | number }>>[],
  },
});
const emit = defineEmits(['change', 'update:value', 'update:lawDept', 'update:area', 'update:position']);
const pca = reactive({
  lawDept: '', // 执法处
  area: '', // 区域
  position: '', // 具体位置
});

// 下拉选项列表
// const lawDeptOptions = ref<Array<{ label: string; value: string | number }>>([]);
const areaOptions = ref<Array<{ label: string; value: string | number }>>([]);
const positionOptions = ref<Array<{ label: string; value: string | number }>>([]);
const rawLawDeptData = ref<any[]>([]); // 保存原始执法处数据以备后续查找
// // 初始化加载执法处列表
// const initLawDeptList = async () => {
//   // 调用获取执法处列表的接口
//   try {
//     const res = await getEnfMineTreeData();
//     rawLawDeptData.value = res; // 保存原始数据以备后续查找
//     lawDeptOptions.value = res.map((item) => ({
//       label: item.departName, // 显示执法处名称
//       value: item.id, // 绑定执法处ID
//     }));
//   } catch (error) {
//     console.error('加载执法处列表失败:', error);
//   }
// };
const handleLawDeptChange = async (depId: string | number) => {
  pca.area = '';
  pca.position = '';
  areaOptions.value = [];
  positionOptions.value = [];
  rawLawDeptData.value = props.lawDeptOptions;
  console.log(rawLawDeptData.value, '222222');
  const currentDept = rawLawDeptData.value.find((item) => item.id === depId);
  if (!currentDept) {
    console.warn('未找到该执法处数据');
    return;
  }
  console.log(currentDept, '1111111');
  areaOptions.value = currentDept.childDepart.map((child) => ({
    label: child.departName, // 显示区域名称
    value: child.id, // 绑定区域ID
  }));
};
// const handleAreaChange = async (areaId: string | number) => {
//   pca.position = '';
//   positionOptions.value = [];
//   // 1. 找到选中的执法处原始数据
//   const currentDept = rawLawDeptData.value.find((item) => item.id === pca.lawDept);
//   if (!currentDept) {
//     console.warn('未找到该执法处数据');
//     return;
//   }
//   // 2. 在执法处的childDepart中找到选中的区域数据
//   const currentArea = currentDept.childDepart.find((area) => area.id === areaId);
//   if (!currentArea) {
//     console.warn('未找到该区域数据');
//     return;
//   }
// };

// 页面初始化时加载执法处列表
onMounted(() => {
  console.log('接收的执法部门选项：', props.lawDeptOptions);
});
</script>

<style scoped>
.custom-cascader {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 可选：调整选择框样式，和原JAreaSelect保持一致 */
.custom-cascader :deep(.ant-select) {
  border-radius: 4px;
}
</style>