<template>
  <div id="app">
    <test />
<!--    <div>-->
<!--    <VueAmazingSelector-->
<!--        :selectData="selectData"-->
<!--        :selectedValue="selectedValue"-->
<!--        name="name"-->
<!--        value="value"-->
<!--        placeholder="请选择城市"-->
<!--        :disabled="false"-->
<!--        :width="160"-->
<!--        :height="36"-->
<!--        :num="6"-->
<!--        @getValue="getValue" />-->
<!--    </div>-->
    <div class="container-box">
      <button @click="test">测试</button>
      <X6Editor ref="x6" round @deleteNode="deleteNode" multiParent @connectedEdge="connectedEdge">
        <template slot="tooltip">
          <el-tooltip content="测试">
            <button class="x6-toolbar-item">
            <span class="x6-toolbar-item-icon"
            ><span
                role="img"
                aria-label="play-square"
                class="anticon anticon-play-square"
            >
                <svg-icon icon-class="test" /></span
            ></span>
            </button>
          </el-tooltip>
          <el-tooltip content="调度">
            <button class="x6-toolbar-item">
            <span class="x6-toolbar-item-icon"
            ><span
                role="img"
                aria-label="gateway"
                class="anticon anticon-gateway"
            >
                <svg-icon icon-class="dispatch" /> </span
            ></span>
            </button>
          </el-tooltip>
        </template>
      </X6Editor>
    </div>
  </div>
</template>

<script>
import test from '@/compontents/test'
export default {
  name: 'App',
  components:{
    test
  },
  data(){
    return{
      selectData: [
        {
          name: '北京市',
          value: 1
        },
        {
          name: '上海市上海市上海市上海市',
          value: 2,
          disabled: true
        },
        {
          name: '郑州市',
          value: 3
        },
        {
          name: '纽约市纽约市纽约市纽约市',
          value: 4
        },
        {
          name: '旧金山',
          value: 5
        },
        {
          name: '悉尼市',
          value: 6
        },
        {
          name: '伦敦市',
          value: 7
        },
        {
          name: '巴黎市',
          value: 8
        }
      ],
      selectedValue: '',
      groups: [
        {
          name: "group1",
          title: "数据集成",
        },
        {
          name: "group2",
          title: "数据开发",
        },
        {
          name: "group3",
          title: "控制",
        },
      ],
      groups1: [
        {
          name: "group1",
          title: "数据集成",
        },
        {
          name: "group2",
          title: "数据开发",
        },
        {
          name: "group3",
          title: "控制",
        },
      ],
      nodes: [
        {
          icon: "shujutongbu",
          text: "数据同步数据同步",
          group: "group1",
          color: "#409EFF",
        },
        { icon: "odps", text: "ODPS SQL", group: "group2", color: "#67C23A" },
        { icon: "odps", text: "ODPS MR", group: "group2" },
        { icon: "vi", text: "虚拟节点", group: "group2" },
        { icon: "py", text: "PyODPS", group: "group2" },
        { icon: "shell", text: "Shell", group: "group2" },
        { icon: "sql", text: "SQL组件节点", group: "group2" },
        { icon: "kuayonghu", text: "跨用户节点", group: "group3" },
        { icon: "ch", text: "oss对象检查", group: "group3" },
      ],
      nodes1: [
        { icon: "shujutongbu", text: "数据同步数据同步", group: "group1" },
        { icon: "odps", text: "ODPS SQL", group: "group2" },
        { icon: "odps", text: "ODPS MR", group: "group2" },
        { icon: "vi", text: "虚拟节点", group: "group2" },
        { icon: "py", text: "PyODPS", group: "group2" },
        { icon: "shell", text: "Shell", group: "group2" },
        { icon: "sql", text: "SQL组件节点", group: "group2" },
        { icon: "kuayonghu", text: "跨用户节点", group: "group3" },
        { icon: "ch", text: "oss对象检查", group: "group3" },
      ],
    }
  },
  created () {
    this.selectedValue = 1
  },
  mounted() {
    this.$refs.x6.init(this.groups, this.nodes);
  },
  methods: {
    getValue (name, value, index) {
      console.log('item:', name, value, index)
    },
    connectedEdge(args){
      console.log(args)
    },
    test() {
      this.$refs.x6.setCurrentSelected()
    },
    deleteNode(node){
      console.log(node)
    }
  }
}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
  #app{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    .container-box{
      flex: 1;
    }
  }
}
#app {
}
</style>
