<template>
  <div>
    <el-row style="padding-top: 10px;padding-left: 10px;padding-bottom: 30px">
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
        label-suffix=":"
      >
        <el-form-item label="发货区层数">
          <el-select
            v-model="stageParam"
            size="mini"
            placeholder="请选择"
            class="filter-item"
            @change="changeStage"
          >
            <el-option
              v-for="item in layerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="有货点位">
          <el-input
            v-model="numData.haveMoney"
            disabled
            style="width: 80px"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="无货点位">
          <el-input
            v-model="numData.unMoney"
            disabled
            style="width: 80px"
            size="mini"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <div id="container" className="container" />
    </el-row>
    <!--点击设备显示信息-->
    <el-dialog
      id="dialogs"
      title="点位信息"
      class="newDialog"
      :visible.sync="dialogDeviceMsgVisible"
      width="22%"
      :top="tops"
      :show-close="false"
      :modal="false"
    >
      <el-table
        :data="arr"
        style="width: 100%"
        max-height="500px"
      >
        <el-table-column
          prop="name"
          label="监控项"
        />
        <el-table-column
          prop="value"
          label="当前值"
        />
      </el-table>
    </el-dialog>

    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog title="点位操作" :visible.sync="dialogFormVisible1" width="35%">
      <el-form :model="form" size="small">
        <el-form-item label="点位编码:" prop="device_code" label-width="80px">
          <el-input v-model="form.point_code" :disabled="true" />
        </el-form-item>

        <el-form-item label="木箱号:" label-width="80px">
          <el-input v-model="form.vehicle_code" :disabled="true" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="unlock">解 绑</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudStage from '@/api/logicflow/stage'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

import { LogicFlow } from '@logicflow/core'
import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
import { getStructByCodesFs, unLockPoint, queryNum } from '@/views/system/monitor/device/structStage'
let data = {}
let lf = ''
export default {
  // 发货区监控1层
  name: 'Sendout',
  data() {
    return {
      stageParam: 'FS_1', // 舞台参数
      dialogDeviceMsgVisible: false,
      device_code: null,
      tops: '20vh',
      stage_code: '',
      stageSelectList: [],
      arr: [], // 显示数组
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      form: {
        point_code: '',
        vehicle_code: ''
      },
      allStructMsg: [],
      msgTop: '200px',
      msgLeft: '200px',
      layerList: [
        { 'label': '发货1层', 'value': 'FS_1' },
        { 'label': '发货2层', 'value': 'FS_2' }
      ],
      numData: {
        haveMoney: null,
        unMoney: null
      },
      layerNum: '1'
    }
  },
  mounted() {
    this.init()
    this.queryNum()
  },
  beforeDestroy() {
    // js提供的clearInterval方法用来清除定时器
    console.log('定时器销毁')
    clearInterval(this.timer)
  },
  methods: {
    // 流程图初始化
    init() {
      // 初始化配置
      lf = new LogicFlow({
        overlapMode: 1,
        container: document.querySelector('#container'), // 容器
        // 画布配置
        // width: window.innerWidth, // 宽度
        height: window.innerHeight, // 高度
        grid: { // 不用格子直接显示，使用背景
          visible: false,
          type: 'mesh',
          size: 5
        },
        background: {
          // backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
          backgroundRepeat: 'repeat'
        },
        adjustEdge: false,
        adjustEdgeMiddle: false,
        adjustEdgeStartAndEnd: false,
        adjustNodePosition: false,
        hideAnchors: true,
        nodeTextEdit: false,
        edgeTextEdit: false
      })
      lf.setTheme(
        {
          baseEdge: { strokeWidth: 1 },
          baseNode: { strokeWidth: 1 },
          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
        }
      )
      // 注册自定义元素
      registerCustomElement(lf)
      // 删除默认的右键菜单
      lf.extension.menu.setMenuConfig({
        nodeMenu: false
      })
      lf.on('node:click', (data, e) => { // 鼠标点击节点
        // 展开显示设备信息 todo: 1
        if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
          if (data.data.properties.struct_id) {
            this.moveShow(data.data) // 传递节点数据，用来获取id做比对
            this.dialogDeviceMsgVisible = true
            this.struct_id = data.data.properties.struct_id // ?暂时没用
            this.tops = data.e.y + 'px'
            document.getElementsByClassName('el-dialog')[0].style.marginLeft = data.e.x + 'px'
          }
        }
      })
      // 右键单击事件
      lf.on('node:contextmenu', (data, e) => {
        debugger
        let item = ''
        item = this.allStructMsg.find((structMsg) => structMsg.id === data.data.id)

        const data1 = item.data[0]

        this.form.point_code = data1.point_code
        this.form.vehicle_code = data1.vehicle_code
        this.dialogFormVisible1 = true
      })
      // lf.on('node:mouseleave', (data, e) => {
      //   this.dialogDeviceMsgVisible = false
      // })
      // 开始渲染
      lf.render(data)
      this.initStageData()
    },
    initStageData() {
      // 获取舞台编码
      crudStage.getNewStageDataByCode(this.stageParam).then(res => {
        data = JSON.parse(res.stage_data)
        lf.render(data)
        this.initStatus()
      })
      // todo: 定时器
      this.timer = setInterval(() => { // 定时刷新设备的状态信息
        console.log('定时器启动')
        this.initStatus()
        this.queryNum()
      }, 10000)
    },
    initStatus() { // 初始化数据
      let resion = {}
      debugger
      resion = lf.getGraphData().nodes.map(item => ({ id: item.id, struct_id: item.properties.struct_id }))
      getStructByCodesFs(resion).then(res => {
        this.allStructMsg = res
        // 实时设置状态信息
        for (var item of res) { // 循环设置属性
          if (item.struct_status != undefined) {
            lf.setProperties(item.id, {
              struct_status: item.struct_status
            })
          }
        }
        // 设置动态实时显示设备信息
        const { nodes } = lf.getSelectElements() // 获取选中的节点
        if (nodes.length === 1) { // 因为是定时器，没有选中则不用实时更新显示数据
          this.moveShow(nodes[0]) // 监控模式下不可能托选，因此就只有一个数据
        }
      })
    },
    moveShow(nodeData) { // 点击之后显示出来的数据----只需要设备信息
      let item = ''
      // 查找点击节点的id
      item = this.allStructMsg.find((structMsg) => structMsg.id === nodeData.id)
      this.arr = [] // 清空
      if (item.struct_id && item.data) { // item.data是数组
        this.arr = [
          { name: '货位编号', value: item.struct_code }
        ]
        const data1 = item.data[0] // 至少有一条
        const data = item.data // 总的data数据
        // 以下是设置参数显示值
        for (const val in data1) {
          if (val === 'vehicle_code' && data1.vehicle_code) {
            const obj = { name: '木箱号', value: data1[val] }
            this.arr.push(obj)
          }
          if (val === 'quanlity_in_box' && data1.quanlity_in_box) {
            const obj = { name: '子卷数', value: data1[val] }
            this.arr.push(obj)
          }
          if (val === 'sale_order_name' && data1.sale_order_name) {
            const obj = { name: '订单号', value: data1[val] }
            this.arr.push(obj)
          }
          if (val === 'product_description' && data1.product_description) {
            const obj = { name: '物料', value: data1[val] }
            this.arr.push(obj)
          }
          if (val === 'box_weight' && data1.box_weight) {
            const obj = { name: '木箱总重', value: data1[val] }
            this.arr.push(obj)
          }
          if (val === 'container_weight' && data1.container_weight) {
            const obj = { name: '子卷净重', value: data1[val] }
            this.arr.push(obj)
          }
        }
        if (data.length > 1) { // 显示子卷
          for (let i = 0; i < data.length; i++) {
            let container_name
            let net_weight
            for (const val in data[i]) {
              if (val === 'container_name' && data[i].container_name) {
                container_name = data[i][val]
              }
              if (val === 'net_weight' && data[i].net_weight) {
                net_weight = data[i][val]
              }
            }
            if (container_name && net_weight) {
              const obj = { name: container_name, value: net_weight }
              this.arr.push(obj)
            }
          }
        }
      }
    },
    unlock() {
      // 解锁点位
      if (this.form.vehicle_code === '') {
        this.$message({
          message: '此点位已解绑',
          type: 'warning'
        })
        return
      }
      unLockPoint(this.form).then(res => {
        this.dialogFormVisible1 = false
        this.initStageData()
        this.queryNum()
        this.$message({
          message: '解绑成功',
          type: 'success'
        })
      })
    },
    changeStage(value) {
      if (value === 'FS_1') {
        this.layerNum = '1'
      } else if (value === 'FS_2') {
        this.layerNum = '2'
      }
      this.initStageData()
      this.queryNum()
    },
    queryNum() {
      queryNum({ 'layer_num': this.layerNum }).then(res => {
        this.numData.haveMoney = res.haveMoney
        this.numData.unMoney = res.unMoney
      })
    }
  }
}
</script>

<style>
html, body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}
</style>
<style scoped>
.container {
  background-color: #f8f9fa;
  height: 100%;
}
.newDialog /deep/ .el-dialog__header {
  padding: 1vh 1vw 0 1vw;
}
.newDialog /deep/ .el-dialog__body {
  padding: 1vh 1vw;
}
.toolbar-sty {
  position: absolute;
  margin-top: 5px;
  top: 0;
  padding: 5px;
  left: 30px;
  height: 45px;
  /*width: 310px;*/
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  z-index: 10;
  background: #e5e5e5;
}
</style>
