<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="标题">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button type="info" icon="el-icon-refresh-right" size="mini" @click="reList">
          清空
        </el-button>
        <!--        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTi">-->
        <!--          删除-->
        <!--        </el-button>-->
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
      <!--      <el-table-column-->
      <!--        type="selection"-->
      <!--        width="55">-->
      <!--      </el-table-column>-->
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum-1) * queryParams.pageSize + (scope.$index + 1) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="processDefinitionName" width="80px"/>
      <el-table-column label="key" prop="processDefinitionKey" :show-overflow-tooltip="true" width="80px"/>
      <el-table-column label="版本" prop="processDefinitionVersion" width="60px"/>
      <el-table-column label="开始时间" prop="startTime"/>
      <el-table-column label="当前任务" prop="nextTask"/>
      <el-table-column label="是否结束" width="80px">
        <template slot-scope="scope">
          <template v-if="scope.row.ended==false">
            运行中
          </template>
          <template v-else>
            结束
          </template>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.suspended==false">
            激活
          </template>
          <template v-else>
            挂起
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.suspended==false">
            <el-button type="danger" size="mini" @click="suspendProcess(scope.row,1)">挂起</el-button>
          </template>
          <template v-else>
            <el-button type="success" size="mini" @click="suspendProcess(scope.row,0)">激活</el-button>
          </template>
          <template>
            <el-button type="primary" size="mini" @click="TransToOffice(scope.row,1)">转办</el-button>
          </template>
          <template>
            <el-button type="primary" size="mini" @click="TransToOffice(scope.row,0)">委派</el-button>
          </template>
          <template>
            <el-button type="primary" size="mini" @click="deleteProcess(scope.row)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="open" width="700px">
      <el-form>
        <el-form-item label="选择任务">
          <el-select v-model="taskId" placeholder="请选择">
            <el-option
              v-for="item in taskIds"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="userId" placeholder="请选择">
            <el-option
              v-for="item in userIds"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveUser">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<style scoped>

</style>
<script>
  import {
    list,
    suspendProcess,
    delTitle,
    deleteProcess,
    listTask,
    listUser,
    transToOffice,
    entrust
  } from '@/api/activiti/processInstance.js'

  export default {
    data: function() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        // 分页参数
        total: 0,
        pageNum: 1,
        pageSize: 10,
        tableData: [],
        // 表单参数
        form: {},
        //删除id
        multipleSelection: [],
        title: '',
        open: false,
        status: undefined,
        taskId: '',
        taskIds: [],
        userId: '',
        userIds: []
      }
    },

    // 初始化方法
    created() {
      //表格初始化
      this.getList()
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (let i = 0; i < val.length; i++) {
          this.multipleSelection[i] = val[i].id
        }
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true
        list(this.addDateRange(this.queryParams)).then(
          response => {
            if (response.code === 200) {
              this.tableData = response.rows
              this.total = response.total
              this.loading = false
            } else {
              this.msgError(response.msg)
            }
          }
        )
      },
      deleteTi() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定 ',
          cancelButtonText: '取消 ',
          type: 'warning',
          center: true
        }).then(() => {
          let ids = this.multipleSelection
          if (ids.length === 0) {
            this.msgError('你没有选择文章')
            return
          }
          delTitle(ids)
          this.msgSuccess('成功')
          this.reIds()
          this.reList()
        }).catch(() => {
          this.msgSuccess('已取消删除')
        })
      }
      ,
      reIds() {
        this.multipleSelection = []
      }
      ,
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      }
      ,
      reList() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.getList()
      },
      suspendProcess(row, status) {
        let processInstanceId = row.processInstanceId
        suspendProcess(processInstanceId, status).then(
          response => {
            this.reList()
          }
        )
      },
      deleteProcess(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定 ',
          cancelButtonText: '取消 ',
          type: 'warning',
          center: true
        }).then(() => {
          let processInstanceId = row.processInstanceId
          deleteProcess(processInstanceId).then(
            response => {
              if (200 === response.code) {
                this.msgSuccess(response.msg)
              } else {
                this.msgError(response.msg)
              }
            }
          )
          this.reList()
        }).catch(() => {
          this.msgSuccess('已取消删除')
        })

      },
      TransToOffice(row, status) {
        let processInstanceId = row.processInstanceId
        listTask(processInstanceId).then(
          response => {
            this.taskIds = response.data
          }
        )
        listUser().then(
          response => {
            this.userIds = response.data
          }
        )
        this.open = true
        this.status = status
        if (1 === status) {
          this.title = '转办'
        } else if (0 === status) {
          this.title = '委托'
        }

      },
      cancel() {
        this.open = false
        this.value = undefined
      },
      saveUser() {
        let taskId = this.taskId
        let userId = this.userId
        if (1 === this.status) {
          //转办
          transToOffice(taskId, userId).then(
            response => {
              if (200 === response.code) {
                this.msgSuccess(response.msg)
              } else {
                this.msgError(response.msg)
              }
            }
          )
        } else if (0 === this.status) {
          //委托
          entrust(taskId, userId).then(
            response => {
              if (200 === response.code) {
                this.msgSuccess(response.msg)
              } else {
                this.msgError(response.msg)
              }

            }
          )
        }
        this.status = undefined
        this.taskId = undefined
        this.userId = undefined
        this.cancel()
      }

    }

  }
</script>
