<!--待办事项列表-->
<template>
    <div>
        <TableHeader date-picker theCurrentTime showTimeAll showExport :showReset="false" showCustomColumn>
            <template v-slot:select>
                <el-form-item label="任务名称">
                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入任务名称" clearable
                        maxlength="32" show-word-limit></el-input>
                </el-form-item>
            </template>
        </TableHeader>
        <!--表格-->
        <Table ref="tableRef"></Table>
    </div>
</template>

<script setup lang="ts">
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref, watch } from 'vue'
import { formatDate, formatPast2 } from '@/utils/formatTime'
import { useRouter } from 'vue-router'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const categoryOptionList = dictData.getBasicData('flow_category')
const props = defineProps({
    height: [String, Number],

})
defineOptions({
    name: 'businessUser'
})

const { push, options, currentRoute } = useRouter()
const flag = ref(false)

const tableStore = new TableStore({
    url: '/bpm-boot/bpm/processInstance/myPage',
    method: 'POST',
    publicHeight: 65,
    filename:'我发起的',
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '任务名称', field: 'name', minWidth: 130 },
        { title: '任务内容', field: 'instanceSign', minWidth: 300 },
        {
            title: '流程分类',
            field: 'category',
            minWidth: 130,
            formatter: (row: any) => {
                return categoryOptionList.filter(item => item.id === row.cellValue)[0]?.name
            }
        },
        {
            field: 'status',
            title: '流程状态',
            render: 'tag',
            minWidth: 130,
            custom: {
                1: 'primary',
                2: 'success',
                3: 'danger',
                4: 'warning'
            },
            replaceValue: {
                1: '审批中',
                2: '审批通过',
                3: '审批不通过',
                4: '已取消'
            }
        },
        { title: '发起时间', field: 'startTime', minWidth: 140 },
        { title: '结束时间', field: 'endTime', minWidth: 140 },
        {
            title: '耗时',
            field: 'durationInMillis',
            minWidth: 130,
            formatter: (obj: any) => {
                const millis = obj.row.durationInMillis
                return millis > 0 ? formatPast2(millis) : ''
            }
        },
        {
            title: '当前审批任务',
            field: 'tasks',
            minWidth: 140,
            formatter: (obj: any) => {
                const tasks = obj.row.tasks
                if (tasks) {
                    return tasks[0].name
                } else {
                    return ''
                }

                // return millis > 0 ? formatPast2(millis) : '--'
            }
        },
        {
             title: '操作',fixed: 'right',
            align: 'center',
            minWidth: '180',
          
            render: 'buttons',
            buttons: [
                {
                    name: 'productSetting',
                    title: '流程详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        flag.value = true
                        handleAudit(row.id, row.historyInstanceId)
                    }
                }
            ]
        }
    ],
    beforeSearchFun: () => {
        // for (let key in tableStore.table.params) {
        //     if (tableStore.table.params[key] === '') {
        //         delete tableStore.table.params[key]
        //     }
        // }
    },
    exportProcessingData: () => {
        tableStore.table.allData = tableStore.table.allData.filter(item => {
            item.status =
                item.status == 0
                    ? '待提交审批'
                    : item.status == 1
                    ? '审批中'
                    : item.status == 2
                    ? '审批通过'
                    : item.status == 3
                    ? '审批不通过'
                    : '已取消'
            return item
        })
    }
})

onMounted(() => {
    // 加载数据
    tableStore.index()
    setTimeout(() => {
        if (props.height) {
            tableStore.table.height = props.height
        }
    }, 0)
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)

/** 处理审批按钮 */
const handleAudit = (instanceId: string, historyInstanceId: string) => {
    push({
        name: 'BpmProcessInstanceDetail',
        state: {
            id: instanceId,
            historyInstanceId
        }
    })
}

watch(
    () => currentRoute.value.path,
    () => {
        if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
            tableStore.index()
            flag.value = false
        }
    },
    {
        deep: true
    }
)
</script>
