/**
 * 顶部header
 */
Vue.component("screen-select", {
    template: `
        <div class="select-max" @mouseleave="hideSelectOption">
            <div class="select-input" v-if="type==0">
                <input type="text" :value="value"  @click="clickSelectInput" placeholder="请选择" readonly>
            </div>
              <div class="select-input-two"  v-if="type==1">
                <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
        },
        def:{
            type:Object
        },
        type:{
            type:Number,
            default:0
        }
    },
    data() {
        return {
            show:false,
            value:''
        }
    },
    mounted(){
        if(this.def){
            this.value = this.def.text
        }
    },
    methods: {
        clickSelectInput(){
            this.show = true
        },
        clickSelectOption(item){
            this.value = item.text
            this.$emit('option',item);
            this.show = false
        },
        hideSelectOption(){
            this.show = false
        }
    },
    watch:{
        def:function (n,o) {
            this.value = n.text
        }
    }

})