<template>
    <div>
        <el-icon class="printIcon" v-if="type=='info'" size="18" @click="open"><component :is="'sc-icon-scan'" /></el-icon>
        <el-button v-else type="primary" @click="open" style="margin-left: 10px;">扫码添加</el-button>
        <el-dialog
            title="扫描二维码"
            v-model="visible"
            destroy-on-close
        >
            <el-input 
                ref="codeInput"
                v-model="codeText"
                clearable
                @change="codeTextChange"
            ></el-input>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props:{
        type:{
            type:String,
            default:''
        }
    },
	data(){
        return{
            visible:false,
            codeText:''
        }
    },
    methods:{
        open(){
            this.codeText = '';
            this.visible = true;
            setTimeout(() => {
                this.$refs.codeInput.focus();
            }, 200);
            return this;
        },
        codeTextChange(){
            console.log('this.codeText',this.codeText);
            this.$emit('closed',this.codeText);
            this.closed();
        },
        closed(){
            this.visible = false;
        }
    }
}
</script>
<style scoped>
.printIcon{
    width: 38px;
    height: 58px;
    padding: 0 10px;
    font-size: 19px;
    color: rgb(145,149,162);
    &:hover{
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}
</style>