<template>
  <ele-modal
    width="980px"
    height="60%"
    :visible="dialogProcessDetailVisibleInChild"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="查看详情"
    maxable
    @update:visible="updateVisible"
  >
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="过程意见" name="comments">
        <el-table
          :data="comments"
          border
          fit
          highlight-current-row
          :cell-style="{ padding: '3px' }"
        >
          <el-table-column label="任务节点" prop="taskName" align="center">
            <template slot-scope="scope"
              ><span>{{ scope.row.taskName }}</span></template
            >
          </el-table-column>
          <el-table-column label="操作类型" prop="typeDesc" align="center">
            <template slot-scope="scope"
              ><span>{{ scope.row.typeDesc }}</span></template
            >
          </el-table-column>
          <el-table-column label="参与人" prop="userName" align="center">
            <template slot-scope="scope"
              ><span>{{ scope.row.userName }}</span></template
            >
          </el-table-column>
          <el-table-column label="时间" prop="time" align="center">
            <template slot-scope="scope"
              ><span>{{ scope.row.time }}</span></template
            >
          </el-table-column>
          <el-table-column label="意见" prop="fullMessage" align="left">
            <template slot-scope="scope"
              ><span>{{ scope.row.fullMessage }}</span></template
            >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="流程表单" name="processIntanceForm">
        <div v-if="generateStartFormVisible">
          <form-parser
            :data="startFormJson"
            :value="variables"
            ref="generateStartForm"
          >
          </form-parser>
        </div>
        <el-form label-width="100px" v-if="showBusinessKey">
          <el-form-item label="业务主键Key:">
            <el-input v-model="businessKey" disabled />
          </el-form-item>
        </el-form>
        <div v-if="!generateStartFormVisible && !showBusinessKey"> 无 </div>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="processIntanceImage">
        <el-scrollbar> <img ref="img" alt="流程图" /></el-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <template v-slot:footer>
      <el-button icon="el-icon-close" @click="updateVisible(false)"
        >关闭</el-button
      >
    </template>
  </ele-modal>
</template>

<script>
  import { getAction } from '@/api/flowable/manage';
  import { getToken } from '@/utils/token-util';

  import FormParser from '@/views/flowable/form/FormParser';

  export default {
    name: 'ProcessDetail',
    components: { FormParser },
    props: {
      visible: {
        type: Boolean,
        default: function () {
          return false;
        }
      },
      processInstanceId: {
        type: String,
        default: function () {
          return '';
        }
      }
    },
    computed: {
      dialogProcessDetailVisibleInChild: {
        get() {
          return this.visible;
        },
        set(val) {
          this.$emit('update:visible', val);
        }
      }
    },
    data() {
      return {
        activeName: 'comments',
        comments: [],
        imagePath: '',
        isShowProcessInstanceForm: false,
        generateStartFormVisible: false,
        startFormJson: undefined,
        variables: undefined,
        showBusinessKey: false,
        businessKey: undefined
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.listComments();
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      getImage(url) {
        let that = this;
        that.$nextTick(() => {
          let request = new XMLHttpRequest();
          request.responseType = 'blob';
          request.open('get', url, true);
          // 添加自定义请求头
          request.setRequestHeader(
            'Authorization',
            localStorage.getItem('access_token')
          );
          request.onreadystatechange = (e) => {
            if (
              request.readyState == XMLHttpRequest.DONE &&
              request.status == 200
            ) {
              console.log(request);
              that.$refs.img.src = URL.createObjectURL(request.response);
              URL.createObjectURL(request.response);

              that.$refs.img.onload = () => {
                that.$refs.img && URL.revokeObjectURL(that.$refs.img.src);
              };
            }
          };
          request.send(null);
        });
      },
      handleClick(tab, event) {
        if (tab.name == 'processIntanceForm') {
          this.showProcessInstanceForm();
        } else if (tab.name == 'processIntanceImage') {
          this.showImage();
        }
      },
      showProcessInstanceForm() {
        if (!this.isShowProcessInstanceForm) {
          getAction('/flowable/processInstance/formData', {
            processInstanceId: this.processInstanceId
          }).then((res) => {
            const { data } = res.data;
            this.showBusinessKey = data.showBusinessKey;
            this.businessKey = data.businessKey;
            if (data && data.renderedStartForm) {
              this.startFormJson = JSON.parse(data.renderedStartForm);
              this.variables = JSON.parse(
                data.variables.processInstanceFormData
              );
              this.generateStartFormVisible = true;
            }
            this.isShowProcessInstanceForm = true;
          });
        }
      },
      listComments() {
        getAction('/flowable/processInstance/comments', {
          processInstanceId: this.processInstanceId
        }).then((res) => {
          const { data } = res.data;

          this.comments = data;
        });
      },
      showImage() {
        if (!this.imagePath) {
          this.imagePath =
            `${process.env.VUE_APP_API_BASE_URL}` +
            '/flowable/processInstanceImage?processInstanceId=' +
            this.processInstanceId +
            '&access_token=' +
            getToken() +
            '&time=' +
            new Date();
          console.log(this.imagePath);
          this.getImage(this.imagePath);
        }
      }
    }
  };
</script>
