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

<script>
export default {
    name: "plCommonCascader",
    props: {
        formData: {required: true, type: Object, default: () => ({})},
        fields: {required: true, 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: [],
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            // this.dataObj = this.value;
            // console.log('this.fields', this.fields);
            this.fields.split(',').forEach((prop, index) => {
                if (prop && this.formData[prop]) {
                    this.dataValue.push(this.formData[prop] || "");
                }
            });
            // console.log('this.dataValue', this.dataValue, this.fields);
            this.axios.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(val) {
            // this.$emit('input', {});
            this.fields.split(',').forEach((prop, index) => {
                if (prop) {
                    this.$set(this.formData, prop, val[index] || "");
                }
            });
            // console.log('val', val);
        }
    }
}
</script>

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