<template>
<a @click="close" @mouseenter="mouseenter" @mouseleave="mouseleave" class="corner-button">
  <svg width="90" height="60" viewBox="0 0 300 200" aria-hidden="true">
    <title>关闭</title>
    <path class="ne-corner" fill="rgb(40, 176, 110)" stroke="none" :d="path"></path>
    <path class="icon" fill="#ffffff" d="M230,73 L244,55 L250,60 L235,80 L250,95 L244,100 L230,85 L215,100 L210,95 L225,80 L210,60 L215,55 Z"></path>
    <text class="label" x="100" y="92">关闭</text>
  </svg>
</a>
</template>
<script>
const CORNER_INIT = 'M230,73 L244,55 L250,60 L235,80 L250,95 L244,100 L230,85 L215,100 L210,95 L225,80 L210,60 L215,55 Z'
const CORNER_ENTER = 'M80,50 C-10,50,-10,160,80,170 L230,170 C310,170,310,50,230,50 L100,50 Z'
const BROWSER_IS_FIREFOX = navigator.userAgent.toLowerCase().includes && navigator.userAgent.toLowerCase().includes('firefox')
const IE11_ENTERPATH = 'M 230 98 L 244 80 L 250 85 L 235 105 L 250 120 L 244 125 L 230 110 L 215 125 L 210 120 L 225 105 L 210 85 L 215 80 Z'
const IE_LEAVEPATH = 'M230,73 L244,55 L250,60 L235,80 L250,95 L244,100 L230,85 L215,100 L210,95 L225,80 L210,60 L215,55 Z'
export default {
  data() {
    return {
      path: BROWSER_IS_FIREFOX ? CORNER_INIT : 'M290,0 C295,0,300,5,300,10 L300,200 C200,100,200,100,100,0 L100,0 Z'
    }
  },
  mounted () {
  },
  methods: {
    close () {
      window.close()
    },
    mouseenter () {
      if (BROWSER_IS_FIREFOX) {
        if (!navigator.userAgent.toLowerCase().includes) {
          this.path = IE11_ENTERPATH
        } else {
          this.path = CORNER_ENTER
        }
      }
    },
    mouseleave () {
      if (BROWSER_IS_FIREFOX) {
        if (!navigator.userAgent.toLowerCase().includes) {
          this.path = IE_LEAVEPATH
        } else {
          this.path = CORNER_INIT
        }
      }
    }
  }
}
</script>
<style scoped>
.corner-button {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 999;
}
.corner-button .ne-corner {
  d: path('M290,0 C295,0,300,5,300,10 L300,200 C200,100,200,100,100,0 L100,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 .ne-corner {
  d: path('M80,50 C-10,50,-10,160,80,170 L230,170 C310,170,310,50,230,50 L100,50 Z');
  fill: rgb(83,192,139);
}
.corner-button:hover .icon {
  transform: translate(-20px, 30px);
}
.corner-button:hover .label {
  opacity: 1;
  transform: translate(-20px, 30px);
}
</style>
