<template>
    <div class="pl-common-region">
        <el-cascader
            v-model="dataValue"
            :props="casProps"
            :size='size'
            filterable clearable
            :options="optionsData"
            @change="handleChange">
        </el-cascader>
    </div>
</template>

<script>
export default {
    name: "plCommonRegion",
    props: {
        value: {required: true, type: Array, default: () => []},
        typeId: {required: false, type: String, default: "e0a79d00260f11ee80683370889cde7d"},
        parentId: {required: false, default: ""},
        sourceKey: {required: false, default: ""},
        size: {required: false, type: String, default: "medium"},
    },
    data() {
        return {
            dataValue: [],
            casProps: {
                value: 'id',
                label: 'dataName',
                children: 'children'
            },
            optionsData: [{
                value: 'firstOption',
                label: '选项1',
                children: [{
                    value: 'firstGroupOne',
                    label: '选项1-1',
                }, {
                    value: 'firstGroupTwo',
                    label: '选项1-2',
                }]
            }, {
                value: 'secondOption',
                label: '选项2',
                children: [{
                    value: 'secondGroupOne',
                    label: '选项2-1'
                }, {
                    value: 'secondGroupTwo',
                    label: '选项2-2'
                }, {
                    value: 'secondGroupThird',
                    label: '选项2-3'
                }]
            }],
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.dataValue = this.value;
            this.spcpFormAxios.post(this.api.mixDataTool.getDataByType, {
                sourceKey: this.sourceKey || window.currentDataSourceKey,
                typeId: this.typeId,
                parentId: this.parentId
            }).then(dataRes => {
                if (dataRes && dataRes.data.length > 0) {
                    this.optionsData = this.COMMON_FUNC.buildElTree(dataRes.data) || [];
                }
            });
        },
        handleChange(value) {
            this.$emit('input', value);
        }
    }
}
</script>

<style scoped>
.pl-common-region {
    display: inline-block;
}
</style>
