<template>
  <flow
    @select="handleSelect"
    :data="sections"
    :highlight-data.sync="highlightData">
    <select class="sources">
      <option value="">来源</option>
      <option value="">操作系统</option>
      <option value="">地区</option>
      <option value="">社交网络</option>
    </select>
  </flow>
</template>

<style>
  .sources {
    position: absolute;
    outline: none;
    background-color: #9db675;
    border-color: #6b7d4b;
    width: 147px;
    text-align: left;
    margin: 0;
    color: white;
    top: 0;
    left: 0;
  }
</style>

<script type="text/ecmascript-6">
  import Flow from '../components/flow.vue';
  import FlowSection from '../components/flow-section.vue';
  import ConnectorCanvas from '../components/connector-canvas.vue';
  import { data } from './data.json';
  import highlight from './highlight.json';

  export default {
    components: {
      Flow,
      FlowSection,
      ConnectorCanvas
    },

    methods: {
      handleSelect(data) {
        this.highlightData = highlight.data;
      }
    },

    data() {
      return {
        sections: data,
        highlightData: []
      };
    }
  };
</script>
