<template>
  <div class="form-item-box" :style="{ width: width }">
    <el-cascader class="el-cascader-zj" :props="{ value: 'label', label: 'label', children: 'children' }"
      :options="arercity" expand-trigger="hover" change-on-select @change="onInChange" :placeholder="placeholder"
      v-bind="$attrs" v-model="value"></el-cascader>
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from '@/constant';
import allAreas from "./provicesData";
import {
  ref,
  defineProps,
  defineEmits,
  defineExpose,
  computed,
  nextTick,
  watch
} from "vue";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择地区位置",
    type: String
  },

  provinces2: {
    default: () => [],
    type: Array
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const value = ref([]);

nextTick(() => {
  if (props.provinces2.length > 0) {
    init(props.provinces2);
  }
});

const init = (data) => { };
const registerAddress = ref([]);

const arercity = ref(allAreas);
const emits = defineEmits(["update:provinces2"]);
const onInChange = (e) => {
  emits("update:provinces2", e);
};
// const onInput = (e) => {
//   emits("update:provinces2", e);
// };
</script>

<style lang="scss" scoped>
.el-cascader-zj {
  width: 100%;
}
</style>
