<template>
  <div class="dashboard-container">
    <p>选择节点</p>
    <div class="antvBox">
      <div class="menu-list">
        <div v-for="item in moduleList"
             :key="item.id"
             draggable="true"
             @dragend="handleDragEnd($event, item)">
          <img :src="item.image" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="canvas-card">
        <div id="container" />
      </div>
    </div>
    <el-button @click="save()">提交</el-button>







    <!--    添加任务详情设计-->
    <el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
        <formData v-if="this.formData" :group="graph" :node-id="nodeId" :formData="taskInputForm" @taskInputAdd="taskInputAdd"></formData>
    </el-dialog>

<!--      <el-form  label-width="80px" :model="tableInfo" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">-->
<!--        <el-form-item label="任务id">-->
<!--          <el-input v-model="tableInfo.taskId"></el-input>-->
<!--        </el-form-item>-->

<!--                <el-form-item label="数据库id">-->
<!--                  <el-input v-model="tableInfo.basicId"></el-input>-->
<!--                </el-form-item>-->
<!--&lt;!&ndash;        <el-form-item label="数据表">&ndash;&gt;-->

<!--&lt;!&ndash;          <div class="block">&ndash;&gt;-->
<!--&lt;!&ndash;            <span class="demonstration">选择数据表</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-cascader&ndash;&gt;-->
<!--&lt;!&ndash;              v-model="value"&ndash;&gt;-->
<!--&lt;!&ndash;              :options="tableList"&ndash;&gt;-->
<!--&lt;!&ndash;              @change="handleChange(value)"></el-cascader>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->

<!--&lt;!&ndash;    <el-aside width="30%">-->
<!--        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
<!--      </el-aside>&ndash;&gt;-->
<!--        <el-form-item>-->
<!--          <el-select  v-model="tableInfo.tableName" placeholder="请选择等级">-->
<!--            <el-option style="height: 100%" :value="tableInfo.tableName">-->
<!--              <el-aside width="100%">-->
<!--                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
<!--              </el-aside>-->
<!--            </el-option>-->

<!--&lt;!&ndash;            <el-option label="请选择" value="0"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            <span v-for="table in tableList">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option  :label=table.tableName :value=table.id :key=table.id></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            </span>&ndash;&gt;-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="表别名">-->
<!--          <el-input v-model="tableInfo.tableAsName"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="taskInputAdd = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="addTaskInput()">下一步</el-button>-->
<!--      </div>-->

<!--    </el-dialog>-->


<!--    &lt;!&ndash;    字段选择列表&ndash;&gt;-->
<!--    <el-dialog title="添加表" :visible.sync="taskInputFieldAdd">-->

<!--      <el-table-->
<!--        :data="tableInfo.structureList"-->
<!--        style="width: 100%"-->

<!--        @selection-change="handleSelectionChange">-->


<!--        <el-table-column-->
<!--          type="selection"-->
<!--          width="100%">-->
<!--        </el-table-column>-->


<!--        <el-table-column-->
<!--          label="字段"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="注释"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="是否主键"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="字段类型"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="字段长度"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="小数"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="非空"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="默认值"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          label="是否字典"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <i class="el-icon-time"></i>-->
<!--            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->



<!--        <el-table-column-->
<!--          label="处理规则"-->
<!--          width="100">-->
<!--          <template slot-scope="scope">-->

<!--            <el-select v-model="tableInfo.fieldAsEngineId" multiple placeholder="请选择">-->
<!--              <el-option value="">请选择</el-option>-->
<!--              <el-option-->
<!--                v-for="engine in engineList"-->
<!--                :key="engine.id"-->
<!--                :label="engine.name"-->
<!--                :value="engine.id">-->
<!--              </el-option>-->
<!--            </el-select>-->




<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>&ndash;&gt;-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--                <el-table-column-->
<!--                  label="表别名"-->
<!--                  width="100">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-input v-model="scope.row.fieldAsEngineId"></el-input>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--      </el-table>-->

<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="cancelColumn()">取 消</el-button>-->
<!--        <el-button type="primary" @click="columnAddGood()">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--    <formData>-->

<!--    </formData>-->


  </div>
</template>

<script>

import { Graph } from "@antv/x6";
import { addTaskInput, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
import { selectEngineList } from '@/api/engine/engine'
import  formData from '/src/views/components/task/formData.vue'

export default {
  name: "antvX6",
  components:{
    formData
  },
  data() {
    return {
      dialogFormVisible:false,
      //任务设计添加表弹窗
      taskInputAdd:false,
      formData:null,
      //选择字段弹窗
      taskInputFieldAdd:false,
      taskReq:{

      },
      taskAddReq:{},
      taskInputReq:{},
      engineReq:{
        pageNum: 1,
        pageSize: 100
    },
      taskList:[],
      //级联选择器
      value:[],

      engineList:[],

      //树状图
      data:[],
      defaultProps:{
        children:"children",
        label:'tableName'
      },

      tableList:[],
      columnList:[],
      structureList:[],
      tableInfo:{
        taskId:this.$route.params.taskId,
      },
      itemId:0,
      moduleList: [
        {
          id: 1,
          name: "开始",
          image: require("@/assets/img/1.png"),
          data:{}
        },
        {
          id: 2,
          name: "表",
          image: require("@/assets/img/2.png"),
          data:{
            databaseId:null,
            tableName:null,
            zd:null,
          }
        },
        {
          id: 3,
          name: "联查",
          image: require("@/assets/img/3.png"),
          data:{}
        },
        {
          id: 4,
          name: "结束",
          image: require("@/assets/img/4.png"),
          data:{}
        },
      ],
      graph:null,
      nodeId:null,
      nodeName:null,
      taskInputForm:false,
    };
  },
  //初始化
  created() {
    alert(this.$route.params.taskId);
  },
  mounted() {
    this.initGraph();
  },
  methods: {
    taskInputForm(data){
      this.formData=data;
      this.taskInputForm=data;
    },


    // //规则引擎下拉框
    // selectEngineList(){
    //   selectEngineList(this.engineReq).then(res=>{
    //     this.engineList = res.data.list;
    //     console.log(this.engineList);
    //   })
    // },
    //
    // //根据树状下拉的选择赋值字段信息
    // handleNodeClick(data) {
    //   this.tableInfo = data;
    //   findStructureByTableId(data.id).then((res)=>{
    //     this.tableInfo.structureList=res.data;
    //   })
    //   const cellById = this.graph.getCellById(this.nodeId)
    //   cellById.setData(this.tableInfo);
    // },
    //
    // //弹出选择表界面给树状下拉框赋值
    // findTAbleInfoList(){
    //   findTableInfoList().then(res=>{
    //     this.data=res.data;
    //   })
    // },
    //
    // //确定选择的字段
    // columnAddGood(){
    //   this.taskInputFieldAdd = false;
    //   const cellById = this.graph.getCellById(this.nodeId);
    //   this.tableInfo.tableField = JSON.stringify(this.tableInfo.columnList);
    //   console.log(this.tableInfo.tableField);
    //   this.tableInfo.fieldAsEngineId = "1,2,3";
    //   this.tableInfo.nodeId = this.nodeId;
    //   cellById.setData(this.tableInfo);
    //   addTaskInput(this.tableInfo).then(res=>{
    //     alert("11")
    //     alert(res.msg);
    //     // console.log(this.tableInfo.fieldAsEngineId)
    //   });
    // },
    //
    // //关闭字段信息
    // cancelColumn(){
    //   this.taskInputFieldAdd = false;
    // },
    //
    // //选中字段
    // handleSelectionChange(val) {
    //   if(val.length<=0){
    //     val = this.tableInfo.columnList;
    //     return;
    //   }
    //   this.tableInfo.columnList = val;
    //   console.log(this.tableInfo.columnList );
    // },
    //
    // //跳转到任务设计界面
    // toDesign(row){
    //   this.$router.push({path:'/easyFlow'});
    // },
    //
    //
    // //打开选择数据表弹窗
    // executeTask(){
    //   this.findTAbleInfoList();
    //   this.taskInputAdd = true;
    // },
    //
    // //选择完下拉框的表后的下一步
    // addTaskInput(){
    //   this.taskInputAdd = false;
    //   this.selectEngineList();
    //   this.taskInputFieldAdd = true;
    // },

    //保存画布，并提交
    save() {
      console.log(this.graph.toJSON(), "graph");
      console.log(this.graph.getNodes(), "node");
    },


    // 拖动后松开鼠标触发事件
    handleDragEnd(e, item) {
      // console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
      this.addHandleNode(
        e.pageX - 500,
        e.pageY - 200,
        new Date().getTime(),
        item.image,
        item.name,
        item.data
      );
    },

    nodeAddEvent() {
      const { graph } = this;
      const container = document.getElementById("container");
      const changePortsVisible = (visible) => {
        const ports = container.querySelectorAll(".x6-port-body");
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = visible ? "visible" : "hidden";
        }
      };
      this.graph.on("node:mouseenter", () => {
        changePortsVisible(true);
      });
      this.graph.on("node:mouseleave", () => {
        changePortsVisible(false);
      });

      // 节点绑定右键点击事件
      this.graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
        console.log("点击！！！", node);
        // 判断是否有选中过节点
        if (this.curSelectNode) {
          // 移除选中状态
          this.curSelectNode.removeTools();
          // 判断两次选中节点是否相同
          if (this.curSelectNode !== node) {
            node.addTools([
              {
                name: "boundary",
                args: {
                  attrs: {
                    fill: "#16B8AA",
                    stroke: "#2F80EB",
                    strokeWidth: 1,
                    fillOpacity: 0.1,
                  },
                },
              },
              {
                name: "button-remove",
                args: {
                  x: "100%",
                  y: 0,
                  offset: {
                    x: 0,
                    y: 0,
                  },
                },
              },
            ]);
            this.curSelectNode = node;
          } else {
            this.curSelectNode = null;
          }
        } else {
          this.curSelectNode = node;
          node.addTools([
            {
              name: "boundary",
              args: {
                attrs: {
                  fill: "#16B8AA",
                  stroke: "#2F80EB",
                  strokeWidth: 1,
                  fillOpacity: 0.1,
                },
              },
            },
            {
              name: "button-remove",
              args: {
                x: "100%",
                y: 0,
                offset: {
                  x: 0,
                  y: 0,
                },
              },
            },
          ]);
        }
      });

      //左键单击事件
      this.graph.on("node:click",(evt)=>{
        const data = evt.node.store.data;
        const thisData = data.attrs.label.textWrap.text;
        if(thisData == "表"){
          this.nodeId = data.id;
          const node = this.graph.getCellById(this.nodeId);
          var data1 = node.getData();
          this.tableInfo = data1;
          console.log(this.tableInfo);
          this.taskInputForm = true;
          this.executeTask();
        }
      });

      //双击事件
      this.graph.on('node:dblclick', (evt) => {
        const data = evt.node.store.data;
        console.log(data);
        // this.showNodeForm(data);
      });

      // 连线绑定悬浮事件
      this.graph.on("cell:mouseenter", ({ cell }) => {
        if (cell.shape == "edge") {
          cell.addTools([
            {
              name: "button-remove",
              args: {
                x: "100%",
                y: 0,
                offset: {
                  x: 0,
                  y: 0,
                },
              },
            },
          ]);
          cell.setAttrs({
            line: {
              stroke: "#409EFF",
            },
          });
          cell.zIndex = 99; // 保证当前悬停的线在最上层，不会被遮挡
        }
      });
      this.graph.on("cell:mouseleave", ({ cell }) => {
        if (cell.shape === "edge") {
          cell.removeTools();
          cell.setAttrs({
            line: {
              stroke: "black",
            },
          });
          cell.zIndex = 1; // 保证未悬停的线在下层，不会遮挡悬停的线
        }
      });
    },

    //添加节点到画布
    addHandleNode(x, y, id, image, name ,data) {
      this.graph.addNode({
        id: id,
        shape: "image", // 指定使用何种图形，默认值为 'rect'
        x: x,
        y: y,
        width: 60,
        height: 60,
        imageUrl: image,
        attrs: {
          body: {
            stroke: "#ffa940",
            fill: "#ffd591",
          },
          label: {
            textWrap: {
              width: 90,
              text: name,
            },
            fill: "black",
            fontSize: 12,
            refX: 0.5,
            refY: "100%",
            refY2: 4,
            textAnchor: "middle",
            textVerticalAnchor: "top",
          },
        },
        ports: {
          groups: {
            group1: {
              position: [30, 30],
            },
          },
          items: [
            {
              group: "group1",
              id: "port1",
              attrs: {
                circle: {
                  r: 6,
                  magnet: true,
                  stroke: "#ffffff",
                  strokeWidth: 2,
                  fill: "#5F95FF",
                },
              },
            },
          ],
        },
        zIndex: 10,
        data:data,
      });
    },

    //初始化
    initGraph() {
      const container = document.getElementById("container");
      this.graph = new Graph({
        container: container, // 画布容器
        width: container.offsetWidth, // 画布宽
        height: container.offsetHeight, // 画布高
        background: false, // 背景（透明）
        snapline: true, // 对齐线
        // 配置连线规则
        connecting: {
          snap: true, // 自动吸附
          allowBlank: false, // 是否允许连接到画布空白位置的点
          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
          allowLoop: true, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
          highlight: true, // 拖动边时，是否高亮显示所有可用的节点
          highlighting: {
            magnetAdsorbed: {
              name: "stroke",
              args: {
                attrs: {
                  fill: "#5F95FF",
                  stroke: "#5F95FF",
                },
              },
            },
          },
          router: {
            // 对路径添加额外的点
            name: "orth",
          },
          connector: {
            // 边渲染到画布后的样式
            name: "rounded",
            args: {
              radius: 8,
            },
          },
        },
        panning: {
          enabled: false,
        },
        mousewheel: {
          enabled: true, // 支持滚动放大缩小
          zoomAtMousePosition: true,
          modifiers: "ctrl",
          minScale: 0.5,
          maxScale: 3,
        },
        grid: {
          type: "dot",
          size: 20, // 网格大小 10px
          visible: true, // 渲染网格背景
          args: {
            color: "#a0a0a0", // 网格线/点颜色
            thickness: 2, // 网格线宽度/网格点大小
          },
        },
      });
      this.nodeAddEvent();
    },
  },

};
</script>
<style lang="scss" scoped>
.dashboard-container {
  .antvBox {
    display: flex;
    width: 100%;
    height: 100%;
    color: black;
    padding-top: 20px;
    .menu-list {
      height: 100%;
      width: 300px;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-content: flex-start;
      flex-wrap: wrap;
      > div {
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
        color: black;
        width: 105px;
        display: flex;
        flex-wrap: wrap;

        justify-content: center;
        img {
          height: 50px;
          width: 50px;
        }
        P {
          width: 90px;
          text-align: center;
        }
      }
    }
    .canvas-card {
      width: 1700px;
      height: 750px;
      box-sizing: border-box;
      > div {
        width: 1400px;
        height: 750px;
        border: 2px dashed #2149ce;
      }
    }
  }
}
</style>
