<template>
  <div
    :style="{
      width: Math.round(attributeJson.baseStyle.w * ratio) + 'px',
      height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
      left: Math.round(attributeJson.baseStyle.l * ratio) + 'px',
      top: Math.round(attributeJson.baseStyle.t * ratio) + 'px'
    }"
    class="button-wrap"
  >
      <div class="entrance-con" v-entrance>
        <div 
          :class="['button-cl', animationInObj.type && entranceShow ? enterClass : '']" v-show="entranceShow"
          @click="pageClick"
          :style="{ animationDuration: `${animationInObj.duration}s` }">
          <div
            class="button-content"
            :class="[{ flexCenterBetween: iconImage }, animationHoverObj.type === 4 ? hoverDirection : '']"
            @mouseover.stop="textMouseOver"
            @mouseleave="textMouseLeave"
            :style="[buttonStyle, { '--width': hoverStyleShow ? '100%' : '0', '--height': hoverStyleShow ? '100%' : '0', '--bgColor': animationHoverObj.bgStyle.backgroundColor }]"
            v-hoverAnimate
          >
            <img v-if="iconStyle.type === 1 && iconStyle.position === 1 && iconImage" :src="iconImage" alt="" />
            <div class="label" :style="hoverButtonStyle">{{ attributeJson.label || '按钮' }}</div>
            <img v-if="iconStyle.type === 1 && iconStyle.position === 2 && iconImage" :src="iconImage" alt="" />

            <!-- 换图 -->
            <img class="hover-image" :src="hoverImage" alt="" v-if="animationHoverObj.type === 5 && hoverImage && hoverStyleShow" />
          </div>
          <!-- 边框 -->
          <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, { opacity: hoverStyleShow ? 1 : 0, borderRadius: attributeJson.borderStyle.borderRadius + 'px' }]"></div>
        </div>
      </div>
  </div>
</template>

<script>
import buttonItemJs from './buttonItem.js'
export default buttonItemJs
</script>

<style lang="scss" scoped>
@import 'buttonItem';
@import '../animate.scss';
</style>
