<template>
  <el-cascader
    :model-value="modelValue"
    :options="regionOptions"
    :placeholder="placeholder"
    :style="cascaderStyle"
    :clearable="clearable"
    v-bind="$attrs"
    @update:model-value="$emit('update:modelValue', $event)"
    @change="$emit('change', $event)"
  />
</template>

<script setup lang="ts">
/**
 * 地区级联选择器公共组件 - 使用后端接口数据替代 element-china-area-data
 * @Author: Antigravity
 */
import { onMounted } from 'vue'
import { useRegionData } from '@/hooks/useRegionData'

defineOptions({ name: 'RegionCascader', inheritAttrs: false })

defineProps({
  modelValue: { type: Array, default: () => [] },
  placeholder: { type: String, default: '请选择省/市/区' },
  cascaderStyle: { type: String, default: 'width: 100%' },
  clearable: { type: Boolean, default: true }
})

defineEmits(['update:modelValue', 'change'])

const { regionOptions, loadRegionData } = useRegionData()

onMounted(() => {
  loadRegionData()
})
</script>
