<template>
    <el-cascader
        ref="CascaderRegionRef"
        :options="data.options"
        :props="cascaderProps"
        :show-all-levels="true"
        clearable
        collapse-tags
        placeholder="请选择"
        style="width: 200px"
    />
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import regionList from '~/api/region.js';
import { handleTree } from '~/utils/aiotagro.js';

const CascaderRegionRef = ref(null);

const data = reactive({
    options: [],
});

const cascaderProps = {
    multiple: false,
    label: 'name',
    value: 'name',
};

const handlers = reactive({
    getRegionList() {
        regionList().then((ret) => {
            const list = ret.data.map((item) => {
                return {
                    id: item.id,
                    pid: item.pid,
                    name: item.name,
                };
            });
            data.options = handleTree(list);
            // // });
    },
});

onMounted(() => {
    handlers.getRegionList();
});
</script>
