<template>
  <div>
    <ul class="form-group">
      <dividerTitle :title="$t('approval.resume')"></dividerTitle>
      <li>
        <el-row>
          <div>
            <img :src="spUrl" style="max-width:500px;">
          </div>
        </el-row>
      </li>
    </ul>
    <ul class="form-group">
      <dividerTitle :title="$t('approval.flowChart')"></dividerTitle>
      <li>
        <el-row>
          <div>
            <img :src="lcUrl" style="max-width:100%;">
          </div>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
import approvalApi from '@/api/assetpkgmgr/approvalApi'
import dividerTitle from '@/components/element/assetpkgmgr/dividerTitle'

export default {
  components: {
    dividerTitle
  },
  props: {
    instanceid: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      spUrl: '',
      lcUrl: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getlcUrl()
      this.getspUrl()
    },
    getlcUrl () {
      let $this = this
      approvalApi.todoTask.getlcPic({ 'processId': $this.instanceid }).then(res => {
        let lcblob = new Blob([res.data, { type: 'image/png' }])
        $this.lcUrl = URL.createObjectURL(lcblob)
      })
    },
    getspUrl () {
      let $this = this
      approvalApi.todoTask.getspPic({ 'processId': $this.instanceid }).then(res => {
        let spblob = new Blob([res.data, { type: 'image/png' }])
        $this.spUrl = URL.createObjectURL(spblob)
      })
    }
  }
}
</script>
