<template>
  <el-select :modelValue="modelValue" @update:modelValue="val => $emit('update:modelValue', val)" filterable :placeholder="placeholder">
    <el-option
      v-for="item in regions"
      :key="item.areaId"
      :label="item.areaName"
      :value="item.areaId">
    </el-option>
  </el-select>
</template>

<script>
import { watch, ref } from '@vue/runtime-core'
import axios from 'axios'
import { getRegionList } from '@/request/config'


export default {
  props: ['modelValue', 'placeholder', 'cityId'],
  setup(props) {
    const regions = ref([])
    const updateRegions = () => {
      if (!props.cityId) {
        regions.value = []
      } else {
        axios.post(
          getRegionList, 
          {
            cityId: props.cityId,
            currentPage: 1,
            pageSize: 9999
          }
        ).then(res => {
          console.log(res)
          regions.value = res.data.records
        })
      }
    }

    watch(
      () => props.cityId,
      updateRegions,
      { immediate: true }
    )
    
    return {
      regions
    }
  }
}
</script>