<template>
  <div>
    <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getList">
      <el-form-item label="部署名称" prop="deploymentName">
        <el-input v-model="queryParams.deploymentName" placeholder="请输入部署名称" clearable></el-input>
      </el-form-item>
      <!--    <el-form-item label="状态" prop="enable">-->
      <!--      <el-select v-model="queryParams.enable" placeholder="请选择状态" clearable filterable>-->
      <!--        <el-option-->
      <!--            v-for="dict in cacheStore.getDict('regular_enable')"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--        />-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
        <el-button type="primary" @click="handleReset" :icon="Refresh" plain>重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table
          :data="list"
          row-key="id"
          :lazy="true"
          ref="singleTable"
          @cell-click="showDetails"
          v-loading="loading"
          v-tabh
      >
        <el-table-column type="selection" width="30"/>
        <el-table-column label="序号" type="index" width="60" align="center"/>
        <el-table-column prop="processName" label="审批类型" align="center"/>
        <el-table-column prop="initiatorName" label="发起人" align="center"/>
        <el-table-column prop="createdDate" label="提交时间" align="center"/>
        <el-table-column prop="taskName" label="当前节点" align="center"/>
        <el-table-column prop="arriveDate" label="到达时间" align="center"/>
        <el-table-column prop="state" label="状态" align="center">
          <template #default="scope">
            <point-tag dict-type="process_state" :value="scope.row.state"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
            :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
    <task-details ref="taskDetails" :task="selectTask" @refresh="getList"/>
  </div>
</template>
<script setup>
import {getTaskList} from "@/api/workflow/process-task.js";
import {Search, Refresh, Delete, Edit} from '@element-plus/icons-vue'
import TaskDetails from '@/views/workflow/common/TaskDetails.vue'
import {useProcessStore} from '@/stores/processStore.js'
import Paging from "@/components/pagination/index.vue";
import {useCacheStore} from '@/stores/cache.js'
import PointTag from "@/components/PointTag.vue";
import {ElMessage} from "element-plus";

const processStore = useProcessStore()
const dictStore = useCacheStore()
dictStore.setCacheKey(['process_state'])
//查询参数
const queryParams = reactive({
  deploymentName: '',
  state: 1
})

//页面信息
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})
const list = ref([])
const selectTask = ref()
const total = ref()
const loading = ref()
const taskDetails = ref()
const queryForm = ref()

const showDetails = (row, column) => {
  if (column.label !== '操作') {
    selectTask.value = row
    nextTick(() => {
      taskDetails.value.init()
    })
  }
}

//重置搜索
const handleReset = () => {
  queryForm.value.resetFields()
  getList()
}
const getList = async () => {
  let params = {
    ...queryParams,
    ...pageInfo
  }
  loading.value = true
  getTaskList(params).then(res => {
    if (res.code === 1000) {
      list.value = res.data.rows
      total.value = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
    loading.value = false
  }).catch(err => {
    loading.value = false;
  })
}

//切换每页显示条数
const handleSizeChange = async (val) => {
  pageInfo.pageSize = val
  await getList()
}

//点击页码进行分页功能
const handleCurrentChange = async (val) => {
  pageInfo.pageNum = val
  await getList()
}

const getTimeConsuming = async (instance) => {
  if (instance.state != 1) {
    //dateFormat(开始时间,结束时间)
    // return timeLength(instance.submitTime, instance.endTime);
  }
}

getList()

</script>

<style scoped>

</style>
