<template>
  <tooltip
    v-if="showTooltip"
    :visible="showTooltip"
    @mouseleave="handleMouseleave">
    <div class="content ml">{{ path.data.outflow | fixedValue }} 流失</div>
    <div class="content ml">占总流量 {{ (path.data.outflow / path.data.value) | fixedPercent }}%</div>
  </tooltip>

  <svg>
    <path
      class="outflow"
      @click="handleClick"
      @mouseenter="handleMouseenter"
      @mouseleave="handleMouseleave"
      v-if="!path.hidden"
      :d="splinePath"
      :fill="fill">
    </path>
  </svg>
</template>

<style scoped>
  .content {
    color: red;
    text-align: center;
  }

  .outflow:hover {
    cursor: pointer;
    fill: url(#outflow-gradient-hover);
  }
</style>

<script type="text/ecmascript-6">
  import Tooltip from './tooltip.vue';
  import { fixedValue, fixedPercent } from 'src/util';

  export default {
    props: ['path'],

    filters: {
      fixedValue,
      fixedPercent
    },

    data() {
      return {
        showTooltip: false,
        fill: 'url(#outflow-gradient)'
      };
    },

    events: {
      'blur-path'() {
        this.fill = 'url(#outflow-gradient-blur)';
      },
      'reset-path'() {
        this.fill = 'url(#outflow-gradient)';
      }
    },

    methods: {
      handleMouseleave() {
        this.showTooltip = false;
      },

      handleMouseenter() {
        this.showTooltip = true;
      },

      handleClick() {
        const data = this.path.data;

        if (this.path.data.highlight) {
          this.$dispatch('reset');
        } else {
          this.$dispatch('select', {
            from: data.path,
            fromIndex: data.sectionIndex,
            type: 'outflow'
          });
        }
      }
    },

    components: [ Tooltip ],

    computed: {
      splinePath() {
        const x1 = this.path.x1;
        const y1 = this.path.y1;
        const LENGTHEN_Y = 10;
        const BORDER_WIDTH = this.path.width;
        const MAX_WIDTH = 35;
        const START_WDITH = BORDER_WIDTH <= MAX_WIDTH ? 2 : 10;

        if (this.path.data.highlight) {
          this.fill = 'url(#outflow-gradient-hover)';
          this.false = true;
        }

        return `M ${x1} ${y1} A ${START_WDITH / 2} ${START_WDITH / 2}, 0, 1, 1, ${x1} ${y1 + START_WDITH * 2} L ${x1 + START_WDITH} ${y1 + START_WDITH}, ${x1 + START_WDITH} ${y1 + BORDER_WIDTH + LENGTHEN_Y}, ${x1} ${y1 + BORDER_WIDTH + LENGTHEN_Y}`;
      }
    }
  };
</script>
