<template>
    <el-select v-model="value" clearable :placeholder="placeholder" @change="selectChange">
        <el-option
                v-for="item in options"
                :key="item[id]"
                :label="item[label]"
                :value="item[id]">
        </el-option>
    </el-select>
</template>

<script>
    export default {
        name: 'Select',

        props: {
            placeholder: {
                type: String,
                default: '请选择'
            },
            id: {
                type: String,
                default: 'id'
            },
            label: {
                type: String,
                default: 'name'
            },
            codeOptions: {
                type: String,
                default: 'options'
            }
        },

        inject: {
            selectServiceData: {
                type:    Object,
                default: () => {
                },
            },
        },

        computed: {
            options() {
                return this.selectServiceData[this.codeOptions];
            },
            value:   {
                get() {
                    return this.selectServiceData[this.id];
                },
                set(val) {
                    console.log(val)
                    this.selectServiceData[this.id] = val;
                },
            },
        },

        methods: {
            selectChange(val) {
                this.$emit('select-change', val)
            }
        },
    };
</script>

<style scoped>

</style>