<template>
  <div class="vf-block" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" @click="handleClick">
    <div class="vf-block__block" :style="{ height: blockHeight + 'px' }" v-el:block></div>
    <div class="vf-block__content">
      <div class="vf-block__path">{{ path }}</div>
      <div class="vf-block__value"><span v-if="highlighting">{{ highlightValue | fixedValue }} / </span>{{ value | fixedValue }}</div>
    </div>

    <context-menu
      v-if="showContextMenu"
      :position="contextMenuPosition"
      @mouseleave="onMenuMouseleave"
      @click.stop="showContextMenu = false">
      <div v-if="!highlighting" class="vf-context-menu__item" @click="highlightStream()">突出显示途径此处的流量</div>
      <div v-else class="vf-context-menu__item" @click="highlightStream()">取消突出显示</div>
    </context-menu>

    <tooltip
      class="tooltip-block"
      v-if="showTooltip"
      :visible="showTooltip"
      @mouseleave="handleMouseleave"
      v-ref:tooltip
      :header="path">
      <div>{{ validValue | fixedValue }} 浏览流量率 {{ (validValue / value) | fixedPercent }}%</div>
      <div class="ml">{{ value | fixedValue }}</div>
      <div>{{ outflow | fixedValue }} 流失率 {{ (outflow / value) | fixedPercent }}%</div>
    </tooltip>
  </div>
</template>

<style scoped>
  .vf-block {
    position: relative;
    width: 230px;
    margin-bottom: 35px;
    box-sizing: border-box;
    font-family: Arial;
    cursor: pointer;
  }
  .vf-block__block {
    border-radius: 5px;
    border: 1px solid rgb(209, 223, 224);
    background-image: linear-gradient(to bottom, rgb(217, 238, 201), rgb(133, 202, 84));
    box-shadow: 0px 2px 2px #ccc;
  }
  .vf-origin-section .vf-block__block {
    background: #fff;
  }
  .vf-block__content {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px 10px 0;
  }
  .vf-block__path,
  .vf-block__value {
    font-size: 12px;
    color: #555;
  }
  .vf-block__value {
    font-weight: bolder;
  }
</style>

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

  export default {
    props: {
      path: String,
      value: Number,
      outflow: {
        type: Number,
        default: 0
      },
      sectionIndex: Number,
      blockHeight: Number,
      highlightValue: {
        type: Number,
        default: 0
      }
    },

    components: [ Tooltip, ContextMenu ],

    data() {
      return {
        showTooltip: false,
        showContextMenu: false,
        highlighting: false,
        contextMenuPosition: {
          top: 0,
          left: 0
        }
      };
    },

    filters: {
      fixedValue,
      fixedPercent
    },

    methods: {
      handleMouseenter(ev) {
        this.showTooltip = true;
      },
      handleMouseleave(ev) {
        if (!this.$refs.tooltip || ev.relatedTarget === this.$refs.tooltip.$el) { return; }
        this.showTooltip = false;
      },
      onMenuMouseleave() {
        this.showContextMenu = false;
      },
      handleClick(ev) {
        this.showTooltip = false;
        this.contextMenuPosition.top = ev.clientY - 15;
        this.contextMenuPosition.left = ev.clientX - 15;
        this.showContextMenu = true;
      },
      highlightStream() {
        if (this.highlighting) {
          this.$dispatch('reset');
        } else {
          this.$dispatch('select', {
            fromIndex: this.sectionIndex,
            from: this.path,
            type: 'block'
          });
        }
      },
      setHighlightValue(value) {
        this.highlightValue = value;
      },
      removeHighlightValue() {
        this.highlightValue = 0;
      }
    },

    computed: {
      validValue() {
        return this.value - this.outflow;
      }
    },

    ready() {
      this.$parent.blocks.push(this);
      if (this.blockHeight < 2) {
        this.blockHeight = 2;
      }
    },

    events: {
      'blur-path': function() {
        this.highlighting = true;
      },
      'reset-path': function() {
        this.highlighting = false;
        this.highlightValue = 0;
      }
    }
  };
</script>
