<script setup>
import { reactive,onMounted } from 'vue'
import { getProcessInstancePage,addProcessInstance,updateProcessInstance,deleteProcessInstance,getProcessInstanceDetail,start } from './api'
import { baseModelOptions,baseFilterOptions } from './options'
import { useRoute } from 'vue-router'

const { proxy } = getCurrentInstance();
const route = useRoute()

const state = reactive({
  baseModelOptions: baseModelOptions(),
  baseFilterOptions: baseFilterOptions(),
  title: "ProcessInstance管理",
  baseModelName: 'ProcessInstance信息',
  addBtnName: '添加ProcessInstance',
  editBtnName: '',
  delBtnName: '',
  primaryKey: 'id',
  getTableFn: getProcessInstancePage,
  addFn: addProcessInstance,
  editFn: updateProcessInstance,
  deleteFn: deleteProcessInstance,
  detailFn: getProcessInstanceDetail,
  showAddBtn: false,
  showEditBtn: false,
  showDeleteBtn: false,
  baseQuery: {
    processDefinitionKey: route.query.processKey
  },
  rowControl: {
    showEditBtn: false,
    // showDelBtn: false
  },
  permission: {//菜单管理中添加权限
    add: 'system:user:list',
    edit: 'system:user:list',
    delete: 'system:user:list',
    detail: 'system:user:list',
  },
  pageInfo: { total: 0, base:{limit: 8,current: 1} },
  pageKeys: {
    limit: 'maxResults',
    start: 'firstResult'
  },
})
const viewTasks = (row) => {
  proxy.$router.push({
    path: '/workflow/task',
    query: {
      processInstanceId: row.id
    }
  })
}
const formateDate = (datePa) => {
  let date = new Date(datePa)
  let dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
  return dateStr
}
</script>

<template>
  <div class="app-container">
    <BaseTablePage 
      :tableOptions="state" 
    >
      <template v-slot:column>
        <el-table-column align="center" prop="id" label="实例ID" />
        <el-table-column align="center" prop="processDefinitionKey" label="流程Key" />
        <el-table-column align="center" prop="processDefinitionName" label="流程名称" />
        
        <el-table-column align="center" prop="businessKey" label="业务主键" />
        <!-- <el-table-column align="center" prop="suspended" label="是否挂起" /> -->
        <el-table-column align="center" prop="state" label="状态">
          <template #default="{row}">
            <el-tag v-if="row.state == 'ACTIVE'" type="success">活动</el-tag>
            <el-tag v-else-if="row.state == 'EXTERNALLY_TERMINATED'" type="danger">外部终止</el-tag>
            <el-tag v-else-if="row.state == 'COMPLETED'" type="info">完成</el-tag>
            <!-- <el-tag v-else-if="row.state == 'deleted'" type="warning">删除</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column align="center" prop="startTime" label="启动时间">
          <template #default="{row}">
            {{formateDate(row.startTime)}}
          </template>
        </el-table-column>
      </template>
      <template #before="scope">
        <el-button type="text" icon="View" @click="viewTasks(scope.row)">查看历史任务(已启动)</el-button>
        <!-- <el-button type="primary" @click="startProcessInstance(scope.row)">启动新实例</el-button> -->
      </template>
    </BaseTablePage>
    <BaseModel
      v-if="state.formOptions"
      :title="'启动新流程'"
      :modelType="'edit'"
      :columnCount="1"
      :showModel="state.viewForm"
      :width="'35%'"
      :modelOptions="state.formOptions"
      @dialogClose="state.viewForm=false"
      @dialogSubmit="doStartProcessInstance"
    >
    </BaseModel>
  </div>
</template>

<style scoped>

</style>
