<template>
  <el-dialog :title="processDiagramTitle" v-if="processDiagramDialogVisible" :visible.sync="processDiagramDialogVisible">
    <img class="img-responsive" :src="processDiagramSrc" />
    <img />
    <div slot="footer" class="dialog-footer">
      <el-button @click="processDiagramDialogVisible = false">关 闭</el-button>
      <!-- <el-button type="primary" @click="processDiagramDialogVisible = false">确 定</el-button> -->
    </div>
  </el-dialog>
</template>
<style>
.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
</style>
<script>
export default {
    data() {
        return {
            processDiagramDialogVisible: false
        }
    },
    watch: {
    	   screenWidth (val) {
             if(val < 990){
             	this.testspan = 24;
             }else{
             	this.testspan = 12;
             }
          }
    },
    mounted () {
        const that = this
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }
    },
    methods: {
        showProcessDiagram(row) {
            if (row.processInstanceId) {
                this.processDiagramDialogVisible = true;
                this.processDiagramSrc = this.$url.processinst.showDiagramByTask + "/" + row.taskid;
                this.processDiagramTitle = "流程轨迹-" + row.title;
            }else if(row.procinstid){
                this.processDiagramDialogVisible = true;
                this.processDiagramSrc = this.$url.processinst.showDiagramByTask + "/" + row.taskid;
                this.processDiagramTitle = "流程轨迹-" + row.programmecode;
            }
        }
    }
};
</script>
