<template>
<a @click="back" @mouseenter="mouseenter" @mouseleave="mouseleave" class="corner-button">
  <svg width="120" height="60" viewBox="0 0 400 200" aria-hidden="true">
    <title>返回上页</title>
    <path class="nw-corner" fill="rgb(40, 176, 110)" stroke="none" :d="path"></path>
    <path class="icon" fill="#ffffff" d="M24,80 L44,55 L50,60 L35,80 L50,95 L44,100 Z"></path>
    <text class="label" x="120" y="92">返回上页</text>
  </svg>
</a>
</template>
<script>
const CORNER_INIT = 'M10,0 C5,0,0,5,0,10 L0,200 C100,100,100,100,200,0 L200,0 Z'
const CORNER_ENTER = 'M80,50 C-10,50,-10,160,80,170 L330,170 C410,170,410,50,330,50 L100,50 Z'
const BROWSER_IS_FIREFOX = navigator.userAgent.toLowerCase().includes('firefox')
export default {
  data() {
    return {
      path: BROWSER_IS_FIREFOX ? CORNER_INIT : ''
    }
  },
  mounted () {
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    mouseenter () {
      if (BROWSER_IS_FIREFOX) {
        this.path = CORNER_ENTER
      }
    },
    mouseleave () {
      if (BROWSER_IS_FIREFOX) {
        this.path = CORNER_INIT
      }
    }
  }
}
</script>
<style scoped>
.corner-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
}
.corner-button .nw-corner {
  d: path('M10,0 C5,0,0,5,0,10 L0,200 C100,100,100,100,200,0 L200,0 Z');
  fill: rgb(40, 176, 110);
  color: rgb(255, 255, 255);
  transition:all 0.2s linear 0.1s ;
}
.corner-button .icon {
  fill: rgb(255, 255, 255);
  transition:all 0.2s linear 0.1s ;
}
.corner-button .label {
  font-size: 48px;
  font-weight: normal;
  fill: rgb(255, 255, 255);
  opacity: 0;
  transition:all 0.2s linear 0.2s;
}
.corner-button:hover .nw-corner {
  d: path('M80,50 C-10,50,-10,160,80,170 L330,170 C410,170,410,50,330,50 L100,50 Z');
  fill: rgb(83,192,139);
}
.corner-button:hover .icon {
  transform: translate(40px, 30px);
}
.corner-button:hover .label {
  opacity: 1;
  transform: translate(0px, 30px);
}
</style>
