<template>
  <div class="vf-section" :style="{visibility: visible ? 'visible' : 'hidden'}">
    <div class="vf-section__hd" v-if="index > 0">
      <h3 v-if="index === 1">起始网页</h3>
      <h3 v-if="index === 2">首次互动<i class="vf-section__btn-close" @click="$emit('remove')"></i></h3>
      <h3 v-if="index > 2">第{{index - 1}}次互动<i class="vf-section__btn-close" @click="$emit('remove')"></i></h3>
      <div v-if="index !== 0" class="vf-section__hd__tip">在{{ total < 10000 ? total : total / 10000 + '万' }}次会话中，有{{ totalOutflow < 10000 ? totalOutflow : totalOutflow / 10000 + '万' }}次用户中途离开</div>
    </div>
    <block
      v-for="item in data"
      :block-height="calcHeight(item)"
      :path="item.path"
      :value="item.value"
      :outflow="item.outflow"
      :highlight-value="item.highlightValue"
      :section-index="index">
    </block>
    <slot></slot>
  </div>
</template>

<style scoped>
  .vf-section {
    display: inline-block;
    vertical-align: top;
    margin-right: 100px;
    position: relative;
    height: 100%;
  }
  .vf-section__hd {
    color: #333;
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 1.5;
    height: 40px;
    width: 230px;
    position: absolute;
    top: -45px;
    left: 0;
  }
  .vf-section__hd h3 {
    margin: 0;
  }
  .vf-section__hd__tip {
    color: #777;
    width: 280px;
  }
  .vf-section__btn-close {
    font-style: normal;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #ccc;
    text-align: center;
    line-height: 12px;
    vertical-align: middle;
    margin-left: 20px;
    font-size: 12px;
    cursor: pointer;
    display: inline-block;
  }
  .vf-section__btn-close:before {
    content: '×';
    color: #fff;
    font-family: 'Microsofot Yahei';
    display: inline-block;
    transform: scale(.8, .8);
  }
</style>

<script type="text/ecmascript-6">
  import Block from './block.vue';

  export default {
    props: {
      data: {
        default() {
          return [];
        }
      },
      index: Number,
      visible: Boolean,
      totalValue: Number,
      relativeTotalHeight: Number,
      scale: Number
    },

    components: {
      Block
    },

    computed: {
      total() {
        var ret = 0;
        this.blocks.forEach(block => {
          ret += block.value;
        });
        return ret;
      },
      totalOutflow() {
        var ret = 0;
        this.blocks.forEach(block => {
          ret += block.outflow ? block.outflow : 0;
        });
        return ret;
      }
    },

    methods: {
      getBlock(index) {
        if (typeof index === 'number') {
          return this.blocks[index];
        } else if (typeof index === 'string') {
          let result = null;
          this.blocks.forEach(function(block) {
            if (block.path === index) {
              result = block;
            }
          });
          return result;
        }
      },

      getBlockPosition(index) {
        const bounds = this.$el.parentNode.getBoundingClientRect();
        const block = this.getBlock(index);

        if (!block) return null;

        const blockBounds = block.$els.block.getBoundingClientRect();

        return {
          top: blockBounds.top - bounds.top,
          left: blockBounds.left - bounds.left,
          height: blockBounds.height,
          width: blockBounds.width
        };
      },
      calcHeight(item) {
        return item.value / this.totalValue * this.relativeTotalHeight * this.scale;
      }
    },

    data() {
      return {
        blocks: [],
        sectionHeight: ''
      };
    },

    ready() {
      this.sectionHeight = this.$el.clientHeight;
      this.$parent.sections.push(this);
    },

    beforeDestroy() {
      this.$parent.sections.$remove(this);
    }
  };
</script>
