<template>
  <CascadeSelect :model-value="valueArr" @update:model-value="onChanged" :options="options" v-bind="attrs"
  label-key="name" value-key="id"></CascadeSelect>
</template>
<script setup>
import CascadeSelect from './CascadeSelect.vue'
import { reactive, useAttrs,ref,watch } from 'vue';
import {api} from 'boot/axios'
const options = ref([])
const attrs = useAttrs()
const props = defineProps(['provinceId','cityId','modelValue'])
const emits = defineEmits(['update:cityId','update:provinceId'])
const valueArr = reactive([props.provinceId,props.cityId])
watch(()=>{
  return props.provinceId
},(v)=>{
  valueArr[0] = v
})
watch(()=>{
  return props.cityId
},(v)=>{
  valueArr[1] = v
})
api.getCityTree().then(res=>{
  options.value = res
})
function onChanged(v){
  emits("update:provinceId",v[0])
  emits("update:cityId",v[1])
}

</script>
