<template>
    <div class="switch">
        <img :src="isOpen ? openImg : closeImg" @click="switchClick">
    </div>
</template>

<script>
    export default{
        props:{
            open:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                closeImg:require('../assets/switch-close.png'),
                openImg:require('../assets/switch-open.png'),
                isOpen:this.open
            }
        },
        methods:{
            switchClick(){
                this.isOpen = !this.isOpen;
                this.$emit('click',this.isOpen);
            }
        }
    }
</script>

<style scoped>
    .switch img{
        height:32px;
        cursor:pointer;
    }
</style>
