<template>
    <div ref="selectRef">
        <el-select :popper-append-to-body="false" multiple v-bind="$attrs" v-on="$listeners" v-model="currentVal">
            <slot />
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'HtmlSelect',
    inheritAttrs: false,
    props: {
        value: [String, Number, Array],
        keyname: String,
        trindex: String,
        tdindex: String,
        placeholder: String,
        multiple: Boolean,    
    },
    computed: {
        currentVal: {
            get() { return this.value; },
            set(val) { this.$emit('input', val); }
        }
    },
    mounted() {
        // 捕获阶段监听，比 el-select 内部更早
        this.$refs.selectRef.addEventListener('click', this.onClick, true);
    },
    beforeDestroy() {
        this.$refs.selectRef.removeEventListener('click', this.onClick, true);
    },
    methods: {
        onClick(e) {
            // 抛给父级
            this.$emit('inputLeftClick', { e, params: { name: this.placeholder, keyName: this.keyname, trIndex: this.trindex, tdIndex: this.tdindex } });
        }
    }
}
</script>