
<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
    </LayoutTable>
  </div>
</template>

<script>
import {
  todoList,
  complete,
  returnList,
  returnTask,
  rejectTask,
  getDeployment,
  delDeployment,
  exportDeployment,
} from "@/api/flowable/todo";
import table from "@/assets/mixins/table";

import SockJS from "sockjs-client";
import Stomp from "stompjs";

export default {
  name: "Deploy",
  components: {},
  mixins: [table],
  async created() {
    // 接收消息
 const getsocketData = e => {  // 创建接收消息函数
  const data = e && e.detail.data
  console.log(data)
}

this.getsocketData=getsocketData;
// 注册监听事件
window.addEventListener('onmessageWS', getsocketData)
  },
  mounted() {
    
  },
  beforeDestroy: function () {
    // 页面离开时断开连接,清除定时器

    window.removeEventListener('onmessageWS', this.getsocketData)

  },
  methods: {
    // 跳转到处理页面
    handleProcess(row) {
      this.$router.push({
        path: "/flowable/task/record/index",
        query: {
          procInsId: row.procInsId,
          deployId: row.deployId,
          taskId: row.taskId,
          businessKey:row.businessKey,
          finished: true,
        },
      });
    },

    /** 新增按钮操作 */
    handleAdd() {
      console.log("新增按钮操作");
      this.reset();
      this.open = true;
      this.title = "添加流程定义";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      console.log("修改按钮操作!");
      // this.reset();
      // const id = row.id || this.ids
      // getDeployment(id).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改流程定义";
      // });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.deploymentId || this.ids;
      const params = {
        deployId: row.deploymentId,
      };
      this.$confirm(
        '是否确认删除流程定义编号为"' + params.deployId + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delDeployment(params);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      // const queryParams = this.queryParams;
      // this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(function() {
      //   return exportDeployment(queryParams);
      // }).then(response => {
      //   this.download(response.msg);
      // })
    },

    initWebSocket() {
        console.log("00000000000");
      this.connection();
      let that = this;
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          that.stompClient.send("test");
        } catch (err) {
          console.log("断线了: " + err);
          that.connection();
        }
      }, 5000);
    },
    connection() {
      let url=""+this.$cookie.getItem("pin"); 
      // 建立连接对象
      let socket = new SockJS("http://plm.testnew.com:8081/");
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket);
      // 定义客户端的认证信息,按需求配置
      let headers = {
        Authorization: "",
      };
      // 向服务器发起websocket连接
      this.stompClient.connect(
        headers,
        () => {
          this.stompClient.subscribe(
            "/topic/public",
            (msg) => {
              // 订阅服务端提供的某个topic
              console.log("广播成功");
              console.log(msg); // msg.body存放的是服务端发送给我们的信息
            },
            headers
          );
          this.stompClient.send(
            "/app/chat.addUser",
            headers,
            JSON.stringify({ sender: "", chatType: "JOIN" })
          ); //用户加入接口
        },
        (err) => {
          // 连接发生错误时的处理函数
          console.log("失败");
          console.log(err);
        }
      );
    }, //连接 后台
    disconnect() {
      if (this.stompClient) {
        this.stompClient.disconnect();
      }
    }, // 断开连接
  },
  data() {
    return {
      getsocketData:null,
      stompClient: "",
      timer: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 流程定义表格数据
      definitionList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      formConfOpen: false,
      formTitle: "",
      formDeployOpen: false,
      formDeployTitle: "",
      formList: [],
      formConf: {}, // 默认表单数据
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      config: {
        search: [
          {
            name: "name",
            type: "text",
            label: "名称",
          },
        ],
        columns: [

          {
            prop: "taskId",
            label: "任务编号",
          },

          {
            prop: "procDefName",
            label: "流程名称",
          },

          {
            prop: "taskName",
            label: "任务节点",
          },

          {
            prop: "startUserName",
            label: "流程发起人",
            formatter: this.formatter,
          },

          {
            prop: "createTime",
            label: "接收时间",
            width: 140,
            formatter: this.formatterDate,
          },

          {
            label: "操作",
            width: 180,
            formatter: (row) => {
              return (
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit-outline"
                  onClick={() => {
                    this.handleProcess(row);
                  }}
                >
                  处理
                </el-button>
              );
            },
          },
        ],
      },
    };
  },
};
</script>
