<template>
    <div>
        <el-cascader v-model="inner" :options="area" filterable clearable :placeholder="placeholder" @change="change" :disabled="disabled"/>
    </div>
</template>

<script>
// 民政局区域划分: http://www.mca.gov.cn/article/sj/xzqh/2020/
import area from "./area";

export default {
    props: {
        value: {
            type: String, default: ''
        },
        placeholder: {
            type: String, default: ''
        },
        disabled: {
            type: Boolean, default: false
        },
    },
    components: {},
    data: () => ({
        area,
        inner: [],
    }),
    watch: {
        value(nv) {
            this.inner = nv.split(',');
        },
    },
    mounted() {
        this.inner = this.value.split(',');
    },
    methods: {
        change(v) {
            this.$emit('input', v.toString());
            this.$emit('change', v.toString());
        }
    }
}
</script>

<style scoped>

</style>