<template>
  <div>
    <el-dialog
      :visible.sync="showModal"
      title="流程详情"
      fullscreen
      top="0"
    >
      <div id="iframe" v-loading="loading" style="width: 100%;" :style="{height:height+'px'}" />
    </el-dialog>
  </div>
</template>
<script>
import global from '../../../api/config'
import { flowProcess } from '../../../api'
export default {
  data() {
    return {
      showModal: false,
      loading: false
    }
  },
  computed: {
    height: function() {
      return this.$tableHeight('', 120)
    }
  },
  methods: {
    _cancel() {
      this.showModal = false
    },
    _open(taskId) {
      this.showModal = true
      this.loading = true
      this.$nextTick(() => {
        this._fromKeyByTid(taskId)
      })
    },
    _fromKeyByTid: async function(taskId) {
      const resultTemp = await flowProcess.fromKeyByTid(taskId)
      // 截取 /#
      const result = resultTemp.slice(2)
      $('#iframe').html(
        '<iframe id="flowFrame" style="padding: 0px;width:100%;height:100%" frameborder="0" src="' +
          global.webURL +
          result +
          '" data-tid="' +
          taskId +
          '"></>'
      )
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>
