<template>
  <div
    class="nw_btn_main"
    :style="isHover ? stylesHover : stylesNormal"
    @mouseover="hoverHandle"
    @mouseout="noHoverHandle"
  >
    <div class="nw_btn_text">{{text}}</div>
  </div>
</template>

<script>
  export default {
    props: {
      text: String,
      stylesNormal: { type: Object, default: () => ({}) },
      stylesHover: { type: Object, default: () => ({}) }
    },
    data() {
      return {
        styles: this.$props.stylesNormal,
        isHover: false
      }
    },
    methods: {
      hoverHandle() {
        console.log(`!!-!!-!! -> :::::::::::::: hoverHandle() {200915120041}:${Date.now()}`) // del+
        this.isHover = true
      },
      noHoverHandle() {
        this.isHover = false
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/scss/main";

  .nw_btn_main {
    display: flex;
    width: 205px;
    height: 50px;
    outline: 1px solid blue;
  }

</style>