<template>
    <div class="layout-padding pending-items-page">
        <div class="layout-padding-auto layout-padding-view">
            <div class="pending-toolbar">
                <div class="pending-search-row">
                    <div class="pending-search">
                        <el-input v-model="keyword" :placeholder="t('workbenchPage.pending.searchPlaceholder')"
                            clearable @keyup.enter="handleSearch">
                            <template #append>
                                <el-button type="primary" @click="handleSearch">
                                    {{ t('workbenchPage.pending.searchButton') }}
                                </el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
                <div class="pending-filters-row">
                    <el-radio-group v-model="selectedCategory" class="pending-radio-group"
                        @change="handleCategoryChange">
                        <el-radio label="全部">
                            {{ t('workbenchPage.pending.filters.all') }}
                        </el-radio>
                        <el-radio v-for="option in flowNameOptions" :key="option.value" :label="option.value">
                            {{ t(`flowTypes.${option.label}`) }}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>

            <el-card class="pending-card" shadow="never">
                <el-table
                    ref="dataTableRef"
                    v-loading="loading"
                    :data="state.dataList"
                    border
                    :cell-style="tableStyle.cellStyle"
                    :header-cell-style="tableStyle.headerCellStyle"
                >
                    <el-table-column type="index" :label="t('workbenchPage.pending.table.index')" width="80" />
                    <el-table-column prop="title" :label="t('workbenchPage.pending.table.title')" min-width="260">
                        <template #default="{ row }">
                            <el-link type="primary" :underline="false" @click="handleReview(row, true)">
                                {{ row.title }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rootUserName" :label="t('workbenchPage.pending.table.initiator')"
                        min-width="140" />
                    <el-table-column prop="startTime" :label="t('workbenchPage.pending.table.startTime')"
                        min-width="180" />
                    <!-- <el-table-column prop="processTime" :label="t('workbenchPage.pending.table.processTime')"
                        min-width="180" /> -->
                    <el-table-column prop="status" :label="t('workbenchPage.pending.table.status')" min-width="140">
                        <template #default>
                            <el-tag type="primary">
															待审批
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('workbenchPage.pending.table.actions')" width="160" fixed="right">
                        <template #default="{ row }">
                            <el-button link type="primary" @click="handleReview(row, true)">
                                {{ t('workbenchPage.pending.actions.view') }}
                            </el-button>
                            <el-button link type="primary" @click="handleReview(row, false)">
                                {{ t('workbenchPage.pending.actions.review') }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
			    <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"></pagination>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { queryMineTask } from '/@/api/flow/task';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { examineDict, flowNameOptions } from '/@/hooks/enums';

const { t } = useI18n();
const router = useRouter()
const message = useMessage();
const loading = ref(false);

const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: queryMineTask,
	dataListLoading:true,
	queryForm: {
        title: '',
		processName: '',
		taskTime: undefined,
        flowType: ''
	},
});
const { tableStyle, getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);

const selectedCategory = ref('全部');
const keyword = ref('');

const handleCategoryChange = () => {
    state.queryForm.flowType = selectedCategory.value === '全部' ? '' : selectedCategory.value
    getDataList(true)
};

const handleSearch = () => {
    state.queryForm.title = keyword.value
    getDataList(true)
};

const handleReview = (row: any, isPreview: boolean) => {
    type FlowType = keyof typeof examineDict;
    const flowType = row.flowType as FlowType;

    // 检查 flowType 是否存在于 examineDict 中
    if (!(flowType in examineDict)) {
        message.error('不支持的流程类型');
        return;
    }

    const routePath = examineDict[flowType] as string;
    if (routePath) {
        router.push(`${routePath}?processInstanceId=${row.processInstanceId}&taskId=${row.taskId}&isPreview=${isPreview}`)
    } else {
        message.error('未配置的路由路径');
    }
};
</script>

<style scoped>
.pending-items-page .pending-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.pending-search-row {
    display: flex;
    justify-content: flex-end;
}

.pending-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pending-radio-group :deep(.el-radio) {
    margin-right: 0;
}

.pending-search {
    width: 320px;
    min-width: 240px;
}

.pending-filters-row {
    width: 100%;
}

.pending-card {
    padding: 0 0 12px;
}

.pending-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 0;
}

.total-text {
    color: var(--el-text-color-regular);
}
</style>
