<script setup>
import { reactive,onMounted } from 'vue'
import { getprocessInstanceTaskPage,addprocessInstanceTask,updateprocessInstanceTask,deleteprocessInstanceTask,getprocessInstanceTaskDetail,start } from './api'
import { baseModelOptions,baseFilterOptions } from './options'
import { useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'

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

const state = reactive({
  baseModelOptions: baseModelOptions(),
  baseFilterOptions: baseFilterOptions(),
  title: "processInstanceTask管理",
  baseModelName: 'processInstanceTask信息',
  addBtnName: '添加processInstanceTask',
  editBtnName: '',
  delBtnName: '',
  primaryKey: 'id',
  getTableFn: getprocessInstanceTaskPage,
  addFn: addprocessInstanceTask,
  editFn: updateprocessInstanceTask,
  deleteFn: deleteprocessInstanceTask,
  detailFn: getprocessInstanceTaskDetail,
  showAddBtn: false,
  showEditBtn: false,
  showDeleteBtn: false,
  baseQuery: {
    processInstanceId: route.query.processInstanceId
  },
  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 viewTasksUsers = (row) => {
  getprocessInstanceTaskDetail({taskId: row.id}).then(res => {
    ElMessageBox.alert({
      title: '节点候选人/组',
      message: res.data,
      type: 'success'
    })
  })
}
const addTasksUsers = (row) => {
  addprocessInstanceTask({
    taskId: row.id,
    "type": "candidate",
    // "userId": "user3",        //二选1
    // "groupId": "groupId1"   //二选1
  }).then(res => {
    ElMessageBox.alert({
      title: '添加成功',
      message: res.message,
      type: 'success'
    })
  })
}
const removeTasksUsers = (row) => {
  deleteprocessInstanceTask({
    taskId: row.id,
    "type": "candidate",
    "userId": "user3",        //二选1
    // "groupId": "groupId1"   //二选1
  }).then(res => {
    ElMessageBox.alert({
      title: '移除成功',
      message: res.message,
      type: 'success'
    })
  })
}
const formateComment = (comment) => {
  let commentArr = []
  comment.map(item => {
    try {
      item.message = JSON.parse(item.message)
    } catch (error) {
      item.message = item.message
    }
    commentArr.push(item.message)
  })
  return commentArr;
}
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="name" label="任务名称" />
        <el-table-column align="center" prop="startTime" label="启动时间">
          <template #default="{row}">
            {{formateDate(row.startTime)}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="taskState" label="任务状态" />
        <el-table-column align="center" prop="taskState" label="任务完成变量">
          <template #default="{row}">
            <span>{{ formateComment(row.comment) }}</span>
          </template>
        </el-table-column>
        
      </template>
      <template #before="scope">
        <el-button type="text" icon="View" v-if="scope.row.taskState != 'Completed'" @click="viewTasksUsers(scope.row)">查看节点候选人/组</el-button>
        <el-button type="text" icon="Plus" v-if="scope.row.taskState != 'Completed'" @click="addTasksUsers(scope.row)">添加节点候选人/组</el-button>
        <el-button type="text" icon="Delete" v-if="scope.row.taskState != 'Completed'" @click="removeTasksUsers(scope.row)">移除节点候选人/组</el-button>
        <!-- <el-button type="primary" @click="startprocessInstanceTask(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="doStartprocessInstanceTask"
    >
    </BaseModel>
  </div>
</template>

<style scoped>

</style>
