<template>
    <AdminLayout title="工单日志" info="查看工单流程处理记录">
        <template #action>
            <el-button type="primary" @click="exportLogs">
                <el-icon><Download /></el-icon>
                导出日志
            </el-button>
        </template>

        <div class="log-container">
            <!-- 筛选区域 -->
            <el-card class="filter-card">
                <div class="ticket-filters">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 280px;" @change="handleSearch" />

                    <div class="filter-right">
                        <el-select v-model="filter.action" placeholder="操作类型" clearable style="width: 140px;" @change="handleSearch">
                            <el-option v-for="item in actionOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <el-input v-model="filter.workcaseId" placeholder="搜索工单ID" style="width: 200px;" :prefix-icon="Search" clearable @keyup.enter="handleSearch" @clear="handleSearch" />
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                    </div>
                </div>
            </el-card>

            <!-- 日志列表 -->
            <el-card>
                <el-table :data="processLogs" style="width: 100%" v-loading="loading">
                    <el-table-column prop="processId" label="流程ID" width="180">
                        <template #default="{ row }">
                            <span style="color: #409eff; font-weight: 500;">{{ row.processId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="workcaseId" label="工单ID" width="180" />
                    <el-table-column prop="action" label="操作类型" width="100">
                        <template #default="{ row }">
                            <el-tag :type="getActionTagType(row.action)" size="small">
                                {{ getActionLabel(row.action) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="操作内容" min-width="200" show-overflow-tooltip />
                    <el-table-column prop="processorName" label="处理人" width="120">
                        <template #default="{ row }">
                            {{ row.processorName || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="files" label="附件" width="80">
                        <template #default="{ row }">
                            <el-tag v-if="row.files?.length" size="small" type="info">{{ row.files.length }}个</el-tag>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="creatorName" label="操作人" width="120">
                        <template #default="{ row }">
                            {{ row.creatorName || row.creator || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="170" />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link size="small" @click="viewDetail(row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination">
                    <el-pagination 
                        v-model:current-page="pagination.current" 
                        v-model:page-size="pagination.size"
                        :total="pagination.total" 
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next" 
                        @size-change="handleSearch"
                        @current-change="handleSearch"
                    />
                </div>
            </el-card>
        </div>

        <!-- 日志详情弹窗 -->
        <el-dialog v-model="showDetailDialog" title="流程详情" width="600px">
            <el-descriptions v-if="selectedLog" :column="1" border>
                <el-descriptions-item label="流程ID">{{ selectedLog.processId }}</el-descriptions-item>
                <el-descriptions-item label="工单ID">{{ selectedLog.workcaseId }}</el-descriptions-item>
                <el-descriptions-item label="操作类型">
                    <el-tag :type="getActionTagType(selectedLog.action)">{{ getActionLabel(selectedLog.action) }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="操作内容">{{ selectedLog.message || '-' }}</el-descriptions-item>
                <el-descriptions-item label="处理人">{{ selectedLog.processorName || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作人">{{ selectedLog.creatorName || selectedLog.creator || '-' }}</el-descriptions-item>
                <el-descriptions-item label="操作时间">{{ selectedLog.createTime }}</el-descriptions-item>
                <el-descriptions-item v-if="selectedLog.files?.length" label="附件">
                    <div class="file-list">
                        <el-tag v-for="(file, index) in selectedLog.files" :key="index" size="small" style="margin-right: 8px; margin-bottom: 4px;">
                            {{ file }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { Download, Search } from 'lucide-vue-next'
import { ElMessage } from 'element-plus'
import { workcaseAPI } from '@/api/workcase'
import type { TbWorkcaseProcessDTO, WorkcaseProcessVO } from '@/types/workcase'
import type { PageRequest, PageParam } from 'shared/types'

// 操作类型选项
const actionOptions = [
    { value: 'info', label: '记录' },
    { value: 'assign', label: '指派' },
    { value: 'redeploy', label: '转派' },
    { value: 'repeal', label: '撤销' },
    { value: 'finish', label: '完成' }
]

// 状态
const loading = ref(false)
const dateRange = ref<[string, string] | null>(null)
const showDetailDialog = ref(false)
const selectedLog = ref<WorkcaseProcessVO | null>(null)
const processLogs = ref<WorkcaseProcessVO[]>([])

// 筛选条件
const filter = reactive<TbWorkcaseProcessDTO>({
    workcaseId: '',
    action: undefined
})

// 分页
const pagination = reactive({
    current: 1,
    size: 10,
    total: 0
})

// 获取操作类型标签
const getActionLabel = (action?: string) => {
    const map: Record<string, string> = {
        info: '记录',
        assign: '指派',
        redeploy: '转派',
        repeal: '撤销',
        finish: '完成'
    }
    return map[action || ''] || action || '-'
}

// 获取操作类型标签样式
const getActionTagType = (action?: string) => {
    const map: Record<string, string> = {
        info: 'info',
        assign: 'warning',
        redeploy: '',
        repeal: 'danger',
        finish: 'success'
    }
    return map[action || ''] || 'info'
}

// 查询数据
const handleSearch = async () => {
    loading.value = true
    try {
        const filterData: TbWorkcaseProcessDTO = { ...filter }
        
        // 日期范围
        if (dateRange.value) {
            filterData.startTime = dateRange.value[0]
            filterData.endTime = dateRange.value[1]
        }

        const pageParam: PageParam = {
            pageNumber: pagination.current,
            pageSize: pagination.size
        }

        const pageRequest: PageRequest<TbWorkcaseProcessDTO> = {
            filter: filterData,
            pageParam
        }

        const res = await workcaseAPI.getWorkcaseProcessPage(pageRequest)
        if (res.success) {
            processLogs.value = res.dataList || res.pageDomain?.dataList || []
            pagination.total = res.pageDomain?.pageParam?.totalElements || 0
        }
    } catch (error) {
        console.error('查询工单流程失败:', error)
        ElMessage.error('查询失败')
    } finally {
        loading.value = false
    }
}

// 查看详情
const viewDetail = (row: WorkcaseProcessVO) => {
    selectedLog.value = row
    showDetailDialog.value = true
}

// 导出日志
const exportLogs = () => {
    ElMessage.success('日志导出功能开发中')
}

onMounted(() => {
    handleSearch()
})
</script>

<style lang="scss" scoped>
@import "./WorkcaseLogView.scss";

.log-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.file-list {
    display: flex;
    flex-wrap: wrap;
}
</style>
