<template>
    <el-select ref="select"
               v-model="model"
               @change="handleChange"
               v-bind="$attrs"
               v-on="$listeners"
    >
        <el-option key="" v-if="autoPlease" value="" label="请选择"></el-option>
        <el-option
            v-if="!isArray"
            v-for="(value,key) in data"
            :key="key"
            :label="value"
            :value="key"
        ></el-option>
        <el-option
            v-if="isArray"
            v-for="(item,index) in data"
            :key="index"
            :label="item[nameKey]"
            :value="item[idKey]"
        ></el-option>
    </el-select>
</template>

<script>
import * as ObjUtil from "../../../util/pattern/object";

export default {
    name: "seSelect",
    components: {},
    data() {
        return {
            model: null,
        };
    },
    model: {
        prop: 'value',
        event: 'change1'
    },
    props: {
        data: {
            type: Object | Array,
            default() {
                return [];
            }
        },
        value: null,
        idKey: {
            type: String,
            default: "id"
        },
        nameKey: {
            type: String,
            default: "name"
        },
        autoPlease: {
            //没有请选择/全部选项
            default: true
        },
    },
    computed: {
        isArray() {
            return ObjUtil.isArray(this.data);
        }
    },
    watch: {
        value:{
            handler(newV, oldV) {
                if (newV === oldV) return;
                this.model = newV;
            },
            deep: true,
            immediate: true,
        }
    },
    methods: {
        handleChange(value) {
            this.$emit("change1", value);
            // this.$emit('change', value);
        }
    }
};
</script>

<style scoped>
</style>
