<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="filter-container">
        <el-input
          v-model="listQuery.processDefinitionName"
          placeholder="流程定义名称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="btnQuery"
        />

        <el-dropdown
          split-button
          type="primary"
          @click="btnQuery"
          class="filter-item"
        >
          <i class="el-icon-search el-icon--left"></i>查询
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset"
              >重置</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <el-row :gutter="15">
        <el-col :span="12" v-for="row in records" :key="row.name">
          <div
            class="filter-container"
            style="margin-right: 3px; margin-bottom: 3px"
          >
            <el-card>
              <div slot="header" class="clearfix">
                <span>{{ row.name }}-v{{ row.version }}</span>
                <div style="position: relative; text-align: right">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="btnImage(row.id)"
                    >流程图</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="btnStartInstance(row)"
                    >发起流程
                  </el-button>
                </div>
              </div>
              <div class="text item">
                {{ row.description ? row.description : '无描述' }}
              </div>
              <div class="text item">
                {{ row.category ? row.category : '无命名空间' }}
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        :total="total"
        :background="true"
        @size-change="(d) => (page.limit = d) && query()"
        @current-change="(d) => (page.page = d) && query()"
        layout="total, prev, pager, next, jumper"
        :pager-count="5"
        class="ele-pagination-circle"
      />
    </el-card>

    <el-dialog title="流程图" :visible.sync="dialogImageVisible" width="60%">
      <img ref="img" alt="流程图" />
    </el-dialog>

    <start-process
      v-if="dialogStartInstanceVisible"
      :visible.sync="dialogStartInstanceVisible"
      :processDefinition="processDefinition"
    ></start-process>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import {
    deleteAction,
    getAction,
    postAction,
    putAction
  } from '@/api/flowable/manage';
  import { Message } from 'element-ui';
  import { getToken } from '@/utils/token-util';
  import StartProcess from '../components/StartProcess';

  export default {
    name: 'FlowableStartMyProcess',
    components: { StartProcess, Pagination },
    data() {
      return {
        dicts: [],
        records: null,
        selectedRecords: [],
        total: 0,
        listQuery: {
          current: 1,
          size: 10,
          processDefinitionId: undefined,
          processDefinitionName: undefined,
          processDefinitionKey: undefined,
          latestVersion: true,
          suspended: undefined
        },
        dialogFormVisible: false,
        dialogImportVisible: false,
        dialogImageVisible: false,
        imagePath: '',
        dialogStartInstanceVisible: false,
        formJson: undefined,
        dialogProcessDefinitionIdentityLinkVisible: false,
        selectedProcessDefinitionId: '',
        selectedProcessDefinitionName: '',
        processDefinition: undefined
      };
    },
    created() {
      this.list();
    },
    methods: {
      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
            ) {
              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);
        });
      },
      list() {
        getAction(
          '/flowable/processDefinition/listMyself',
          this.listQuery
        ).then((res) => {
          const { data } = res.data;
          this.records = data.records;
          this.total = data.total;
          if (data.total == 0) {
            Message.info('暂无可发起的流程');
          }
        });
      },
      btnQuery() {
        this.listQuery.current = 1;
        this.list();
      },
      btnReset() {
        this.listQuery = {
          current: 1,
          size: 10,
          processDefinitionId: undefined,
          processDefinitionName: undefined,
          processDefinitionKey: undefined,
          latestVersion: true,
          suspended: undefined
        };
        this.list();
      },
      btnImage(processDefinitionId) {
        this.imagePath =
          `${process.env.VUE_APP_API_BASE_URL}` +
          '/flowable/processDefinition/image?processDefinitionId=' +
          processDefinitionId +
          '&access_token=' +
          getToken() +
          '&time=' +
          new Date();
        this.dialogImageVisible = true;
        this.getImage(this.imagePath);
      },
      btnStartInstance(row) {
        this.processDefinition = row;
        this.dialogStartInstanceVisible = true;
      }
    }
  };
</script>
<style scoped>
  .filter-container .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 4px;
  }
  .filter-container {
    padding-bottom: 5px;
  }
</style>
