<template>
  <div>
    <el-dialog
      v-loading="Loading"
      v-if="SuperFlowData.dialogVisible"
      :visible.sync="SuperFlowData.dialogVisible"
      :title="'流程图'"
      width="80%">
      <div style="height:600px;">
        <SeeksRelationGraph ref="seeksRelationGraph" :options="SuperFlowData.graphOptions" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="SuperFlowData.dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
import { requestFN } from '@/utils/request'
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包

export default {
  components: { Pagination, SeeksRelationGraph },
  data() {
    return {
      Loading: false,
      SuperFlowData: {
        dialogVisible: false,
        graphOptions: {
          debug: true,
          disableDragNode: true,
          layouts: [
            {
              label: '中心',
              layoutName: 'tree',
              layoutClassName: 'seeks-layout-center',
              defaultJunctionPoint: 'border',
              defaultNodeShape: 0,
              defaultLineShape: 1,
              from: 'left',
              min_per_width: '200',
              max_per_width: '500',
              min_per_height: '40',
              max_per_height: '60',
              levelDistance: ''
            }
          ],
          defaultNodeShape: 1,
          defaultNodeWidth: '100',
          defaultLineShape: 4,
          defaultJunctionPoint: 'lr',
          defaultNodeBorderWidth: 0
        }
      }
    }
  },
  methods: {
    init(row) {
      this.Loading = true
      console.log(row)
      this.SuperFlowData.dialogVisible = true
      this.getInformation(row)
    },
    getInformation(row) {
      requestFN(
        '/safetyenvironmental/getFlowChart',
        {
          HIDDEN_ID: row.HIDDEN_ID
        }
      ).then((data) => {
        console.log(data.nodes, data.from)
        this.viewFlowChart(data.nodes, data.from)
        this.Loading = false
      }).catch((e) => {
        this.Loading = false
      })
    },
    viewFlowChart(nodes, from) {
      console.log(nodes)
      console.log(from)
      this.$nextTick(() => {
        const __graph_json_data = {
          nodes: nodes,
          links: from
        }
        this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
          this.Loading = false
        })
      })
    }
  }
}
</script>

<style lang="sass">
    .print-approval-img
      width: 2px
      height: 97px
      display: inline-block
      img
        width: 20px
        height: 20px
</style>
