<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="addFlow"
        >流程模型</el-button
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="handleImport"
        >导入</el-button
      >
    </LayoutTable>

    <!-- bpmn20.xml导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xml"
        :headers="upload.headers"
        :action="
          upload.url + '?id=' + this.$route.query.id
        "
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
   
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“bpmn20.xml”格式文件！
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 流程图 -->
    <el-dialog
      :title="readImage.title"
      :visible.sync="readImage.open"
      width="70%"
      append-to-body
    >
      <!-- <el-image :src="readImage.src"></el-image> -->
      <flow :xmlData="xmlData" />
    </el-dialog>
  </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
  components: {},
  mixins: [table],
  created() {
    const { platformSn,id } = this.$route.query;
    this.config.addQuery = { platformSn: platformSn };
    this.query = { "query.platformSn": platformSn };
  },
  methods: {
    addFlow(row) {
      this.$router.push({
        path: "/flowable/definition/model",
        query: { platformSn: this.$route.query.platformSn, id: row.id },
      });
    },

    toEditFlow(row) {
      this.$router.push({
        path: "/flowable/definition/model",
        query: { id: row.id },
      });
    },

    toDeploy(row) {
      this.$post("/platform/modelinfo/deployFlowByXml", { id: row.id })
        .then((res) => {
          console.log(res);
          this.getData();
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    /** 导入bpmn.xml文件 */
    handleImport() {
      this.upload.title = "bpmn20.xml文件导入";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$message.success(response.msg);
      this.getData();
    },
    // 提交上传文件
    submitFileForm() {
      console.log("上传附件");
      this.$refs.upload.submit();
    },
  },
  data() {
    return {
      readImage: {
        title: "流程图查看",
        open: false,
        src: "",
      },
      open: false,
      upload: {
        // 是否显示弹出层（xml导入）
        open: false,
        // 弹出层标题（xml导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        name: null,
        category: null,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: "/m/platform/modelinfo/upload",
      },
      config: {
        search: [],
        columns: [
          { label: "模型id", prop: "modelId" },
{ label: "流程流程定义key", prop: "processDefinitionKey" },

          { label: "流程部署Id", prop: "deployId" },
          { label: "模型名称", prop: "name" },
          { label: "业务系统标识", prop: "platformSn" },
          { label: "状态", prop: "status", formatter: this.formatter },

          { label: "创建用户名称", prop: "createUserName" },

           { label: "创建时间", prop: "createTime", formatter: this.formatterDate },
          {
            label: "操作",
            width: 280,
            formatter: (row) => {
              return (
                <div>
                  <el-button
                    size="mini"
                     type="text"
                    onClick={() => {
                      this.toEditFlow(row);
                    }}
                  >
                    编辑模型
                  </el-button>
                  <span> </span>

                  <el-button
                    size="mini"
                     type="text"
                    onClick={() => {
                      this.toDeploy(row);
                    }}
                  >
                    部署模型
                  </el-button>

                   <span> </span>

                  <el-button
                    size="mini"
                     type="text"
                    onClick={() => {
                      this.toStop(row);
                    }}
                  >
                    停止
                  </el-button>
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>