<template>
  <div>
    <div class="tab-header">
      <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="名称"><el-input v-model="queryParams.params.name" clearable placeholder="请输入名称" /></el-form-item>
            <el-button @click="handleQuery">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table v-loading="tableLoading" :data="processList" border>
      <el-table-column label="序号" width="50px" type="index" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleFlowRecord(scope.row)">详情</el-button>
          <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleStop(scope.row)">取消申请</el-button>
        </template>
      </el-table-column>
      <el-table-column label="流程编号" width="300" align="center" prop="deploymentId" />
      <el-table-column label="流程标识" align="center" prop="key" />
      <el-table-column label="流程分类" align="center" prop="category" />
      <el-table-column label="流程名称(流程图)" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
            <span>{{ scope.row.name }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="挂载表单" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.formId" type="text" @click="handleForm(scope.row.formId)">
            <span>{{ scope.row.formName }}</span>
          </el-button>
          <label v-else>暂无表单</label>
        </template>
      </el-table-column>
      <el-table-column label="流程版本" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">v{{ scope.row.version }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
          <el-tag v-if="scope.row.suspensionState === 2" type="warning">挂起</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180" />
    </el-table>
    <pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
  </div>
</template>
<script>
import reqFlow from '@/api/workflow/flow'
export default {
  data() {
    return {
      queryParams: {
        current: 1,
        size: 10,
        total: 0,
        params: {
          name: '',
          deployTime: '',
          userSid: window.sessionStorage.getItem('userSid')
        }
      },
      tableLoading: false,
      processList: [],
      form: {
        zd: '',
        days: '',
        initiator: '',
        outcome: ''
      }
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['queryForm'].resetFields()
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.loadList()
    },
    loadList() {
      this.tableLoading = true
      reqFlow
        .myProcessList(this.queryParams)
        .then(response => {
          this.processList = response.data.records
          this.queryParams.total = response.data.total
          this.tableLoading = false
        })
        .catch(e => {
          this.tableLoading = false
        })
    },
    // 分页
    pagination(val) {
      this.queryParams.current = val.pageNum
      this.queryParams.size = val.pageSize
      this.loadList()
    }
  }
}
</script>

<style></style>
