<template>
  <div style="width: 1000px">
    <div class="btnWrap">
      <button id="js_getEdgeData">获取数据</button>
      <button id="js_setEdgeData">设置数据</button>
      <button id="js_changeEdgeType">切换连线风格</button>
      <button id="js_renderData">渲染数据</button>
      <button id="js_add-field">添加字段</button>
    </div>

    <div class="container" ref="container"></div>
  </div>
</template>

<script>
import LogicFlow from '@logicflow/core'
import { DndPanel, SelectionSelect } from '@logicflow/extension'

import '@logicflow/core/dist/style/index.css'
import CustomEdge from './js/CustomEdge'
import CustomEdge2 from './js/CustomEdge2'
import renderData from './js/data'
// import UserTask from './js/userTask'
import generalNode from './js/nodeButton/generalNode' // 普通节点
import jumpNode from './js/nodeButton/jumpNode' // 跳转节点
import estimateNode from './js/nodeButton/estimateNode' //判断节点
import KeypadNode from './js/nodeButton/KeypadNode' //按键节点
import { useThrottledRefHistory } from '@vueuse/core'
import variables from '@/assets/styles/variables.module.scss'
export default {
  data() {
    return {
      nodeId: ''
    }
  },
  mounted() {
    this.lf = new LogicFlow({
      container: document.querySelector('.container'),
      grid: true,
      background: {
        backgroundColor: variables.dragPanelBgColor,
      },
      plugins: [DndPanel, SelectionSelect]
    })
    const { eventCenter } = this.lf.graphModel

    eventCenter.on('node:dbclick', (args) => {
      console.log('node:dbclick', args.data)
      this.nodeId = args.data.id
    })
    // this.lf.register(UserTask)
    this.lf.register(generalNode)
    this.lf.register(CustomEdge)
    this.lf.register(CustomEdge2)
    // this.lf.register(jumpNode)
    // this.lf.register(estimateNode)
    // this.lf.register(KeypadNode)
    this.lf.setDefaultEdgeType('custom-edge')
    this.lf.render()
    this.lf.extension.dndPanel.setPatternItems([
      {
        type: 'generalNode',
        label: '普通节点',
        icon: ''
      },
      {
        type: 'jumpNode',
        label: '跳转节点',
        icon: ''
      },
      {
        type: 'estimateNode',
        label: '判断节点',
        icon: ''
      },
      {
        type: 'KeypadNode',
        label: '按键节点',
        icon: ''
      }
    ])

    // nodes: [
    //     {
    //       type: 'UserTask',
    //       x: 200,
    //       y: 100,
    //       properties: {
    //         disabled: true
    //       }
    //     }
    //   ]

    // this.lf.on('custom:button-click', (model) => {
    //   console.log(model.properties)
    //   console.log(model.id)
    // })
    // this.lf.register(customNode)
    document.querySelector('#js_getEdgeData').addEventListener('click', () => {
      const data = this.lf.getGraphData()
      console.log(data)
    })
    document.querySelector('#js_renderData').addEventListener('click', () => {
      this.lf.render(renderData)
    })

    document.querySelector('#js_add-field').addEventListener('click', () => {
      console.log(this.nodeId)
      const nodeData = {
        title: '普通节点',
        content: '测试',
        answers: [
          { id: '1', text: '装好了' },
          { id: '2', text: '肯定' },
          { id: '3', text: '拒绝' },
          { id: '4', text: '否定' },
          { id: '5', text: '默认' }
        ]
      }
      // this.lf.getNodeModelById(this.nodeId).addField(nodeData)
      // this.lf.getNodeModelById(this.nodeId).deleteProperty('title')
      // this.lf.getNodeModelById(this.nodeId).deleteProperty('content')
      // this.lf.getNodeModelById(this.nodeId).updateText(nodeData)

      // this.lf.getNodeModelById(this.nodeId).setProperties(nodeData)
      this.lf.setProperties(this.nodeId, nodeData)
    })
    this.lf.on('custom:button-click', (model) => {
      this.lf.setProperties(model.id, {
        body: 'LogicFlow'
      })
    })
    // document.querySelector('#js_setEdgeData').addEventListener('click', () => {
    //   // const data = this.lf.getGraphData()
    //   // console.log(data)
    //   alert('设置数据')
    // })

    document
      .querySelector('#js_changeEdgeType')
      .addEventListener('click', () => {
        const { edges } = this.lf.getGraphData()
        const type =
          edges[0].type === 'custom-edge' ? 'custom-edge2' : 'custom-edge'
        edges.forEach((edge) => {
          this.lf.changeEdgeType(edge.id, type)
        })
      })
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 1000px;
  height: 700px;
  :deep(.lf-dndpanel) {
    display: flex !important;
    margin-top: 30px;
    margin-left: 30px;
    .lf-dnd-item {
      margin-left: 30px;
    }
    .custom-selection {
      display: inline-block;
    }
  }
}
.btnWrap button {
  margin: 15px 0px 15px 20px;
}
</style>
