import Vue from 'vue'
Vue.component("screen-select", {
    template: `
        <div class="select-max" @mouseleave="hideSelectOption">
            <div class="select-input">
                <input type="text" :value="value"  @click="clickSelectInput" placeholder="请选择" readonly>
            </div>
            <el-collapse-transition>
                <ul class="select-option" v-show="show">
                    <li v-for="item in data" @click="clickSelectOption(item)">{{item.text}}</li>
                </ul>
            </el-collapse-transition>
        </div>
    `,
    props: {
        data:{
            type:Array
        },
        val:{
            type:[String,Number]
        }
    },
    data() {
        return {
            show:false,
            value:''
        }
    },
    mounted(){
        
    },
    methods: {
        clickSelectInput(){
            this.show = true
        },
        clickSelectOption(item){
            this.value = item.text
            this.$emit('option',item);
            this.show = false
        },
        hideSelectOption(){
            this.show = false
        }
    },
    watch:{
        val:{
            hander(){
                this.value=this.val||'';
            }
        }
    }

})