<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import  {HttpResetClass} from 'vue-client'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import {isEmpty} from '../../Util'
export default {
  title: '测试',
  props:['selectdata'],
  data () {
    return {
      lf: null,
      data: null
    }
  },
  ready () {
    this.installLogicFlow()
    this.initData()
  },
  methods: {
    nodeClick (args) {
      if (!args.data.properties || args.data.properties.length === 0) {
        return
      }
      let act = args.data.properties[0]
      console.log(act)
      console.log("sacasassa",args.data)
      if(act.defname==='收费标准' || act.defname==='报装缴费' || act.defname==='合同签订' ){
        if (this.check(act.actorexpression)) {
          this.$dispatch('apply', Object.assign({}, this.selectdata, act))
          return
        }else {
          this.$showMessage("对不起，您没有查看此节点的权限！")
        }
      }else {
        this.$dispatch('apply', Object.assign({}, this.selectdata, act))
        return
      }
      this.$showMessage("对不起，您没有查看此节点的权限！")
    },
    // 检测是否有权限
    check (actorexpression){
      let str = null

      if (isEmpty(actorexpression)) {
        return true
      }

      if (actorexpression.indexOf('D') === 0) {
        str = actorexpression.substring(2, actorexpression.length-1)
        return this.$login.f.f_department_name.includes(str)
      }
      if (actorexpression.indexOf('RS') === 0) {
        for (str of actorexpression.substring(3, actorexpression.length-1).split(',')) {
          return this.$login.f.rolesnames.includes(str)
        }
      }
      //
      if (actorexpression.indexOf('R') === 0) {
        str = actorexpression.substring(2, actorexpression.length-1)
        return this.$login.f.rolesnames.includes(str)
      }
      //
      if (actorexpression.indexOf('PI') === 0) {
        str = actorexpression.substring(3, actorexpression.length-1)
        return this.$login.f.id.includes(str)
      }
      if (actorexpression.indexOf('P') === 0) {
        str = actorexpression.substring(2, actorexpression.length-1)
        return this.$login.f.name.includes(str)
      }

      return this.$login.f.rolesnames.includes('流程监控')
    },
    async initData () {
      let http = new HttpResetClass()
      let data = {
        f_process_id: this.selectdata.f_process_id,
        width: parseInt(this.lf.width),
        levelHeight: 100,
        nodeType: 'rect',
        edgeType: 'polyline'
      }

      let res = await http.load('POST', 'rs/logic/getAllNode', {data: data}, {
        resolveMsg: null,
        rejectMsg: null
      })

      this.data = res.data
    },
    // 创建LogicFlow实例
    installLogicFlow () {

      this.lf = new LogicFlow({
        container: document.querySelector('#container'),
        grid: false,
        textEdit: false,
        isSilentMode: true // 开启静默模式
      })

      this.lf.render()

      this.lf.on('node:click', this.nodeClick)
    }
  },
  watch: {
    'data' () {
      if (!this.data) {
        return
      }
      // 不采用直接渲染  节点样式无法单独设置  需要在设置节点前设置样式
      // this.lf.setTheme({
      //   rect: {
      //     width: 100,
      //     height: 50,
      //     radius: 6,
      //     fill: '#4a7cae',
      //     stroke: '#c75450',
      //     strokeWidth: 0
      //   }
      // })
      // this.lf.render(this.data)


      console.log('---------------节点样式--------------')

      let style = {
        rect: {
          width: 120,
          height: 50,
          radius: 6,
          fill: '#ffffff',
          stroke: '#000000',
          strokeWidth: 1
        }
      }

      for (const node of this.data.nodes) {
        if (!node.properties || node.properties.length === 0) {
          style.rect.strokeWidth = 1
          style.rect.fill = '#ffffff'
        } else {
          style.rect.strokeWidth = 0

          let act = node.properties[0]

          if (act.state === '开始活动') {
            style.rect.fill = '#c75450'
          } else {
            style.rect.fill = '#4a7cae'
          }

          node.text = `${node.text}\n${act.sendtime}`
        }

        this.lf.setTheme(style)
        this.lf.addNode(node)
      }

      for (const edge of this.data.edges) {
        this.lf.createEdge(edge)
      }
    }
  }
}
</script>

<style scoped>
</style>
