<template>
    <Dialog v-model="visible" bg-color="#fff" width="900">
        <div class="bg-fff round-12 hidden">
            <div class="h-64 px-24 flex-between dialog-header">
                <div class="flex-items-center">
                    <span class="w-6 h-16 round-10 bg-main mr-10"></span>
                    <span class="fs-16 font-bold color-000">成片操作记录</span>
                    <span class="ml-12 px-10 py-4 round-12 color-main fs-12 font-bold record-count">共 {{ total }}
                        条记录</span>
                </div>
            </div>

            <div class="px-24 py-18 flex-between filter-bar">
                <el-input v-model="keyword" class="w-400" placeholder="搜索操作人或关键词..." clearable @input="handleSearch" />
                <div class="flex-items-center">
                    <span class="color-666 mr-10">事项筛选:</span>
                    <el-select v-model="recordType" class="w-120" @change="handleSearch">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
            </div>

            <div class="p-24">
                <SeTable size="default" :dataList="pageList" :total="filteredList.length" :defaultPageSize="5"
                    @update:page="handlePageChange">
                    <el-table-column type="index" label="序号" width="60" />
                    <el-table-column prop="time" label="操作时间" width="160" />
                    <el-table-column prop="operator" label="操作人" width="120">
                        <template #default="{ row }">
                            <span class="font-bold color-000">{{ row.operator }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="typeLabel" label="操作事项" width="130">
                        <template #default="{ row }">
                            <el-tag class="border-none" :class="row.tagClass">{{ row.typeLabel }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summary" label="变更摘要" min-width="280"  show-overflow-tooltip>
                        <template #default="{ row }">
                            <span class="color-888">修改后:</span>
                            <span class="ml-4 color-000">{{ row.summary }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="100" fixed="right">
                        <template #default="{ row }">
                            <el-button class="color-main detail-btn" size="small" @click="openDetail(row)">
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </SeTable>
            </div>
            <div class="px-24 py-14 flex justify-end dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </div>
        </div>

        <Dialog v-model="detailVisible" bg-color="#fff" width="670">
            <div class="bg-fff round-12 hidden">
                <div class="h-64 px-24 flex-items-center dialog-header">
                    <span class="w-6 h-16 round-10 bg-main mr-10"></span>
                    <span class="fs-16 font-bold color-000">操作记录详情</span>
                </div>
                <div class="p-24">
                    <section class="p-16 round-10 detail-summary">
                        <div class="flex-between">
                            <div>
                                <div class="color-888">操作事项</div>
                                <div class="mt-4 font-bold color-main">{{ currentDetail?.typeLabel }}</div>
                            </div>
                            <div>
                                <div class="color-888">操作人</div>
                                <div class="mt-4 font-bold color-000">{{ currentDetail?.operator }}</div>
                            </div>
                            <div>
                                <div class="color-888">操作时间</div>
                                <div class="mt-4 color-000">{{ currentDetail?.time }}</div>
                            </div>
                        </div>
                    </section>
                    <div class="mt-22 flex-items-center font-bold color-000">
                        <span class="w-8 h-8 round bg-main mr-8"></span>
                        修改前后过程对比
                    </div>
                    <section class="mt-14 flex gap-12">
                        <div class="flex-1 p-14 round-10 compare-before">
                            <span class="px-10 py-4 round-6 font-bold before-label">修改前 (Before)</span>
                            <div class="mt-10 p-14 round-6 minh-90 compare-content">
                                初始脚本初剪版本，画面清晰度达标。
                            </div>
                        </div>
                        <div class="flex-1 p-14 round-10 compare-after">
                            <span class="px-10 py-4 round-6 font-bold after-label">修改后 (After)</span>
                            <div class="mt-10 p-14 round-6 minh-90 compare-content">
                                {{ currentDetail?.summary }}
                            </div>
                        </div>
                    </section>
                </div>
                <div class="px-24 py-14 flex justify-end dialog-footer">
                    <el-button @click="detailVisible = false">关闭</el-button>
                </div>
            </div>
        </Dialog>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

type RecordItem = {
    id: number;
    time: string;
    operator: string;
    type: string;
    typeLabel: string;
    summary: string;
    tagClass: string;
};

const visible = defineModel<boolean>('visible', { required: true });

const keyword = ref('');
const recordType = ref('all');
const currentPage = ref(1);
const pageSize = ref(5);
const detailVisible = ref(false);
const currentDetail = ref<RecordItem>();

const typeOptions = [
    { label: '全部事项', value: 'all' },
    { label: '修改标题', value: 'title' },
    { label: '修改公共标签', value: 'publicTag' },
    { label: '修改个人标签', value: 'personalTag' },
    { label: '修改备注', value: 'remark' },
    { label: '修改状态', value: 'status' },
    { label: '系统生成', value: 'system' },
];

const recordList = ref<RecordItem[]>([
    {
        id: 1,
        time: '2026-08-01 01:10:00',
        operator: '张三 (编号)',
        type: 'remark',
        typeLabel: '修改备注',
        summary: '该成片已在抖音大号首发，前3秒留存率达68%，建议继续投放...',
        tagClass: 'tag-purple',
    },
    {
        id: 2,
        time: '2026-07-31 16:40:00',
        operator: '王五 (剪辑)',
        type: 'status',
        typeLabel: '修改状态',
        summary: '已上机',
        tagClass: 'tag-blue',
    },
    {
        id: 3,
        time: '2026-07-31 14:05:30',
        operator: '李四 (运营)',
        type: 'publicTag',
        typeLabel: '修改公共标签',
        summary: '纯混剪，对比: 有对比, 白茶: 白茶产品3',
        tagClass: 'tag-green',
    },
    {
        id: 4,
        time: '2026-07-30 10:20:12',
        operator: '张三 (编号)',
        type: 'title',
        typeLabel: '修改标题',
        summary: '0730-8836-水光针去黄测评-爆款对比.mp4',
        tagClass: 'tag-orange',
    },
    {
        id: 5,
        time: '2026-07-30 09:15:00',
        operator: '系统管理员',
        type: 'system',
        typeLabel: '系统生成',
        summary: '成片渲染合成完成（分辨率1080P/60fps，时长00...',
        tagClass: 'tag-gray',
    },
]);

const total = computed(() => recordList.value.length);
const filteredList = computed(() => {
    return recordList.value.filter((item) => {
        const matchType = recordType.value === 'all' || item.type === recordType.value;
        const searchValue = `${item.operator}${item.typeLabel}${item.summary}`;
        const matchKeyword = !keyword.value || searchValue.includes(keyword.value);
        return matchType && matchKeyword;
    });
});
const pageList = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return filteredList.value.slice(start, start + pageSize.value);
});

const handleSearch = () => {
    currentPage.value = 1;
};

const handlePageChange = (page: number, size: number) => {
    currentPage.value = page;
    pageSize.value = size;
};

const openDetail = (row: RecordItem) => {
    currentDetail.value = row;
    detailVisible.value = true;
};
</script>

<style scoped lang="scss">
.dialog-header {
    border-bottom: 1px solid #eee;
}

.filter-bar {
    border-bottom: 1px solid #edf0f5;
    background-color: #fbfcff;
}

.dialog-footer {
    border-top: 1px solid #edf0f5;
}

.detail-summary {
    border: 1px solid #dfe7f2;
    background-color: #f8fbff;
}

.compare-before {
    border: 1px solid #ffc8d4;
    background-color: #fff8fa;
}

.compare-after {
    border: 1px solid #a7f0d1;
    background-color: #f6fffb;
}

.before-label {
    background-color: #ffe8ee;
    color: #f03b65;
}

.after-label {
    background-color: #dff9ed;
    color: #00a86b;
}

.compare-content {
    border: 1px solid #e5eaf2;
    background-color: #fff;
    color: #2b3750;
}

.record-count,
.tag-purple {
    background-color: rgba(var(--main-color), .1);
}

.detail-btn {
    border: 1px solid rgba(var(--main-color), .18);
    background-color: rgba(var(--main-color), .06);
}

.tag-purple {
    color: rgba(var(--main-color), 1);
}

.tag-blue {
    background-color: #eaf3ff;
    color: #1677ff;
}

.tag-green {
    background-color: #eafaf2;
    color: #00a86b;
}

.tag-orange {
    background-color: #fff6df;
    color: #e59a00;
}

.tag-gray {
    background-color: #eef2f6;
    color: #607086;
}
</style>
