<template>
    <div class="works-page">
        <!-- 头部搜索与导航 -->
        <div class="header-section">
            <div class="search-bar">
                <el-input v-model="searchQuery" placeholder="搜索你的作品" class="search-input">
                    <template #suffix>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </div>
            <div class="tabs">
                <div v-for="tab in tabs" :key="tab" :class="['tab-item', { active: activeTab === tab }]"
                    @click="activeTab = tab">
                    {{ tab }}
                </div>
            </div>
        </div>
        <!-- 瀑布流展示区 -->
        <div class="masonry-container">
            <div class="masonry-item" v-for="(item, index) in masonryItems" :key="index" :style="{ height: 'auto' }">
                <!-- 占位图或者真实图片 -->
                <div class="img-placeholder">
                    <!-- 实际项目中此处放置 <img :src="item.img" /> -->
                    <img style="transform: scale(1.05);" width="100%" :src="item.img" alt="" />
                </div>

                <!-- 悬浮遮罩与操作按钮 -->
                <div class="hover-overlay">
                    <div class="close-btn" @click.stop="handleDelete(item.id)">
                        <img style="width: 18px;height: 18px;" src="@/public/header/close.png" alt="">
                    </div>
                    <div class="work-title">
                        <span class="title-text" :title="item.title || '未命名作品'">{{ item.title || '未命名作品' }}</span>
                    </div>
                    <div class="action-btns">
                        <button class="action-btn edit-btn" @click.stop="handleEdit(item)">
                            <img class="icon-img" src="@/public/edit.png" alt=""> 编辑
                        </button>
                        <!-- <button class="action-btn download-btn" @click.stop="handleDownload(item)">
                            <img class="icon-img" src="@/public/direct-inbox.png" alt=""> 下载
                        </button> -->
                    </div>
                </div>
            </div>
            <div v-if="masonryItems.length === 0" class="empty-box">
                <img style=" width: 250px;height: 250px;" src="@/public/profile/empty.png" alt="">
            </div>
        </div>
        <WarningFooter />
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Search, Close, EditPen, Download } from '@element-plus/icons-vue'
import WarningFooter from '@/components/common/WarningFooter.vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const searchQuery = ref('')
const tabs = ['全部', '微信模拟', '娱乐模拟']
const activeTab = ref('全部')

const localDrafts = ref([])

onMounted(() => {
    loadDrafts()
})

function loadDrafts() {
    try {
        const drafts = JSON.parse(localStorage.getItem('local_drafts') || '[]')
        localDrafts.value = Array.isArray(drafts) ? drafts : []
    } catch (e) {
        localDrafts.value = []
    }
}

// 动态计算展示的数据
const masonryItems = computed(() => {
    let list = localDrafts.value

    if (activeTab.value === '微信模拟') {
        list = list.filter(item => item.type && item.type.startsWith('wx-'))
    } else if (activeTab.value === '娱乐模拟') {
        list = list.filter(item => item.type && !item.type.startsWith('wx-'))
    }

    if (searchQuery.value) {
        const keyword = searchQuery.value.toLowerCase()
        list = list.filter(item => item.title && item.title.toLowerCase().includes(keyword))
    }

    return list.map(item => {
        return {
            ...item,
            id: item.id,
            img: item.cover_img || '',
            height: 'auto'
        }
    })
})

function handleDelete(id) {
    ElMessageBox.confirm('确定要删除该草稿吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const drafts = localDrafts.value.filter(item => item.id !== id)
        localStorage.setItem('local_drafts', JSON.stringify(drafts))
        localDrafts.value = drafts
        ElMessage.success('已删除')
    }).catch(() => { })
}

function handleEdit(item) {
    if (item.type === 'wx-balance' || item.type === 'gongzidan' || item.type === 'wx-chat') {
        router.push(`${item.page_router}?id=${item.id}`)
    } else {
        // 后续添加更多类型跳转
        ElMessage.info('敬请期待')
    }
}

function handleDownload(item) {
    if (!item.cover_img) {
        ElMessage.warning('没有可下载的预览图')
        return
    }
    const link = document.createElement('a')
    link.download = `${item.title || '草稿截图'}.png`
    link.href = item.cover_img
    link.click()
}
</script>

<style lang="scss" scoped>
.works-page {
    padding: 48px 20px 100px;
    /* 底部留白防止被固定警告组件遮挡 */
    max-width: 100%;
    margin: 0 auto;
    min-height: calc(100vh - 114px);
    background-color: #FFFFFF;
}

/* 头部搜索与标签 */
.header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.search-bar {
    width: 450px;
    margin-bottom: 32px;

    :deep(.el-input__wrapper) {
        padding: 0 24px;
        height: 40px;
        background-color: #FFFFFF;
        transition: all 0.3s;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        border-radius: 250px 250px 250px 250px;

        &.is-focus,
        &:hover {
            box-shadow: 0 0 0 1px #808AFC;
        }
    }

    :deep(.el-input__inner) {
        font-size: 16px;
        color: #333333;

        &::placeholder {
            color: #BDBDBD;
        }
    }

    .search-icon {
        font-size: 22px;
        color: #BDBDBD;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
            color: #808AFC;
        }
    }
}

.tabs {
    display: flex;
}

.tab-item {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0 26px;
    color: #767676;
    border-radius: 15px;
    cursor: pointer;

    &.active {
        background: linear-gradient(215deg, #A679F4 7.14%, #778CF5 100%);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
        color: #FFFFFF;
        font-weight: 500;
    }

    &:hover:not(.active) {
        color: #808AFC;
    }
}

/* 瀑布流布局 */
.masonry-container {
    column-count: 7;
    column-gap: 25px;
    width: 1200px;
    margin: 0 auto;

    .empty-box {
        width: 1200px;
        display: flex;
        padding-top: 30px;
        justify-content: center;
    }
}

.masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background-color: #F3F3F3;
    /* 浅灰色占位 */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s;

    &:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        .hover-overlay {
            opacity: 1;
        }
    }

    .img-placeholder {
        width: 100%;
        height: 100%;
        /* 此处可设置背景图预览 */
        background-size: cover;
        background-position: center;
    }

    .hover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
    }

    .close-btn {
        align-self: flex-end;
        background: transparent;
        cursor: pointer;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        transition: all 0.2s;

        &:hover {
            transform: scale(1.3);
        }
    }

    .work-title {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 8px;
        width: 100%;

        .title-text {
            color: #ffffff;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            letter-spacing: 1px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
            padding: 0 10px;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            word-break: break-all;
        }
    }

    .action-btns {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-bottom: 4px;
    }

    .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        padding: 4px 0;
        gap: 2px;
        color: #FFFFFF;
        background: linear-gradient(215deg, #A679F4 7.14%, #778CF5 100%);
        border-radius: 31px;
        font-size: 10px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            transform: scale(1.05);
        }

        .icon-img {
            width: 12px;
            height: 12px;
        }

        .el-icon {
            font-size: 14px;
        }

        &.edit-btn {

            &:hover {
                background-color: #7A5CFF;
            }
        }

        &.download-btn {

            &:hover {
                background-color: #D4BFFF;
            }
        }
    }
}
</style>