<template>
    <div>
        <img
            :src="buttonStatus" alt="Line Login"
            @mouseover="hoverEvent()"
            @mousedown="pressEvent()"
            @mouseup="hoverEvent()"
            @mouseleave="initEvent()"
            @click="$emit('login')"
        >
    </div>
</template>

<script>
export default {
    data(){
        return {
            buttonStatus: require('../assets/btn_login_base.png'),
        }
    },
    methods: {
        hoverEvent() {
            this.buttonStatus = require('../assets/btn_login_hover.png');
        },
        pressEvent() {
            this.buttonStatus = require('../assets/btn_login_press.png');
        },
        initEvent() {
            this.buttonStatus = require('../assets/btn_login_base.png');
        }
    }
}
</script>