<template>
    <div>
      <v-tabs v-model="tab" align-tabs="start" color="primary" @update:model-value="tabClick">
        <v-tab :value="1">城市和区域</v-tab>
      </v-tabs>
      <v-window v-model="tab" class="mt-3">
        <v-window-item :value="1">
          <areaTree :defaultOpen="1" @checkedInput="checkedInputChange"></areaTree>
        </v-window-item>
      </v-window>
    </div>
</template>
<script setup>
import areaTree from './areaCascader'
import { ref } from 'vue'

defineOptions({name: 'retrieval-components-cityFilter'})
const emits = defineEmits(['change'])
const checkedInputChange = (idChecked) => {
  let city = ''
  if (idChecked?.length) {
    idChecked.forEach((_e, index) => {
      if (_e?.length) {
        city += `${index ? '__' : ''}${_e.join('_')}` // 双下划线区分层级单下划线为该层级的区域是数组_分隔
      }
    })
  }
  emits('change', 'city', city)
}

const tab = ref(1)
const tabClick = () => {
}
</script>