<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="结束日期" style="width: 280px;" />

                    <div class="filter-right">
                        <el-select v-model="operationFilter" placeholder="操作类型" clearable style="width: 140px;">
                            <el-option label="创建" value="create" />
                            <el-option label="更新" value="update" />
                            <el-option label="指派" value="assign" />
                            <el-option label="完成" value="complete" />
                            <el-option label="关闭" value="close" />
                        </el-select>
                        <el-select v-model="operatorFilter" placeholder="操作人" clearable style="width: 120px;">
                            <el-option label="王五" value="wangwu" />
                            <el-option label="赵六" value="zhaoliu" />
                            <el-option label="孙七" value="sunqi" />
                        </el-select>
                        <el-input v-model="searchKeyword" placeholder="搜索工单号/内容" style="width: 200px;" :prefix-icon="Search" clearable />
                    </div>
                </div>
            </el-card>

            <!-- 日志列表 -->
            <el-card>
                <el-table :data="filteredLogs" style="width: 100%">
                    <el-table-column prop="logId" label="日志ID" width="120">
                        <template #default="{ row }">
                            <span style="color: #409eff; font-weight: 500;">{{ row.logId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ticketNo" label="工单号" width="120" />
                    <el-table-column prop="operation" label="操作类型" width="100">
                        <template #default="{ row }">
                            <el-tag :type="getOperationType(row.operation)" size="small">
                                {{ row.operationName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operator" label="操作人" width="100" />
                    <el-table-column prop="content" label="操作内容" min-width="200" />
                    <el-table-column prop="operationTime" label="操作时间" width="160" />
                    <el-table-column prop="ipAddress" label="IP地址" width="130" />
                    <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="currentPage" :page-size="10" :total="logs.length" layout="total, prev, pager, next" />
                </div>
            </el-card>
        </div>

        <!-- 日志详情弹窗 -->
        <el-dialog v-model="showDetailDialog" title="日志详情" width="600px">
            <el-form v-if="selectedLog" label-width="100px">
                <el-form-item label="日志ID">
                    <span>{{ selectedLog.logId }}</span>
                </el-form-item>
                <el-form-item label="工单号">
                    <span>{{ selectedLog.ticketNo }}</span>
                </el-form-item>
                <el-form-item label="操作类型">
                    <el-tag :type="getOperationType(selectedLog.operation)">{{ selectedLog.operationName }}</el-tag>
                </el-form-item>
                <el-form-item label="操作人">
                    <span>{{ selectedLog.operator }}</span>
                </el-form-item>
                <el-form-item label="操作内容">
                    <span>{{ selectedLog.content }}</span>
                </el-form-item>
                <el-form-item label="操作时间">
                    <span>{{ selectedLog.operationTime }}</span>
                </el-form-item>
                <el-form-item label="IP地址">
                    <span>{{ selectedLog.ipAddress }}</span>
                </el-form-item>
            </el-form>
        </el-dialog>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { Download, Search } from 'lucide-vue-next'
import { ElMessage } from 'element-plus'

const dateRange = ref<[Date, Date] | null>(null)
const operationFilter = ref('')
const operatorFilter = ref('')
const searchKeyword = ref('')
const currentPage = ref(1)
const showDetailDialog = ref(false)
const selectedLog = ref<any>(null)

const logs = ref([
    { logId: 'LOG001', ticketNo: 'TK001', operation: 'create', operationName: '创建', operator: '王五', content: '创建工单，客户反映设备显示屏不亮', operationTime: '2024-12-13 10:30', ipAddress: '192.168.1.100' },
    { logId: 'LOG002', ticketNo: 'TK001', operation: 'assign', operationName: '指派', operator: '赵六', content: '将工单指派给技术人员处理', operationTime: '2024-12-13 10:35', ipAddress: '192.168.1.101' },
    { logId: 'LOG003', ticketNo: 'TK002', operation: 'create', operationName: '创建', operator: '孙七', content: '创建工单，客户反映机械故障', operationTime: '2024-12-13 09:15', ipAddress: '192.168.1.102' },
    { logId: 'LOG004', ticketNo: 'TK002', operation: 'update', operationName: '更新', operator: '王五', content: '更新工单状态为处理中', operationTime: '2024-12-13 09:45', ipAddress: '192.168.1.100' },
    { logId: 'LOG005', ticketNo: 'TK003', operation: 'complete', operationName: '完成', operator: '赵六', content: '工单处理完成，客户已确认', operationTime: '2024-12-12 14:20', ipAddress: '192.168.1.101' }
])

const filteredLogs = computed(() => {
    let result = logs.value
    if (operationFilter.value) {
        result = result.filter(l => l.operation === operationFilter.value)
    }
    if (operatorFilter.value) {
        result = result.filter(l => l.operator === operatorFilter.value)
    }
    if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        result = result.filter(l =>
            l.ticketNo.toLowerCase().includes(keyword) ||
            l.content.toLowerCase().includes(keyword)
        )
    }
    return result.slice((currentPage.value - 1) * 10, currentPage.value * 10)
})

const getOperationType = (operation: string) => {
    const map: Record<string, string> = {
        create: 'success',
        update: 'info',
        assign: 'warning',
        complete: 'success',
        close: 'danger'
    }
    return map[operation] || 'info'
}

const viewDetail = (row: any) => {
    selectedLog.value = row
    showDetailDialog.value = true
}

const exportLogs = () => {
    ElMessage.success('日志导出成功')
}
</script>

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

.log-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
</style>