<template>
    <div class="bgmr vh100 p-20 over-y-auto">
        <el-card class="w-full round-12" shadow="hover">
            <div class="flex gap-30">
                <section style="width: 50%;">
                    <div class="bg-fff round-14 hidden preview-box">
                        <el-image :src="currentImage.url" :zoom-rate="1.2" :max-scale="7" class="w-full h-full"
                            hide-on-click-modal :min-scale="0.2" :preview-src-list="[currentImage.url]" show-progress
                            :initial-index="4" fit="cover" />
                    </div>
                    <div class="flex gap-12 mt-18 over-x-auto pb-4">
                        <div v-for="(item, index) in imageList" :key="item.id"
                            class="w-96 h-80 round-10 hidden pointer relative thumb-item"
                            :class="{ active: activeImageIndex === index }" @click="activeImageIndex = index">
                            <img :src="item.url" class="w-full h-full cover" :alt="item.name" />
                            <div class="absolute left-0 right-0 bottom-0 px-6 py-4 color-fff fs-10 ellipsis thumb-name">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </section>

                <section class="flex-1 detail-info">
                    <div class="flex-items-center pb-16 detail-header">
                        <div class="w-34 h-34 round bg-000 color-fff flex-center font-bold mr-12">Z</div>
                        <div class="flex-1 minw-0">
                            <div class="font-bold color-000 fs-16 ellipsis">致上互娱 / 默认分组 / 默认团队</div>
                            <div class="fs-12 color-888 mt-2">发布时间：2025-05-26 12:25:11</div>
                        </div>
                    </div>

                    <div class="pt-16">
                        <div class="flex-items-center gap-8">
                            <span class="py-2 px-8 round-4 bg-green color-fff fs-12 font-bold">图片</span>
                            <span class="font-bold color-000">美妆护肤 / 致上旗舰店</span>
                            <el-button type="primary" link @click="handleEdit('所属分类')">修改</el-button>
                        </div>

                        <div class="flex-items-center mt-14">
                            <span class="minw-66 color-666">图片标题:</span>
                            <span v-if="!isEditTitle" class="font-bold color-000 ellipsis flex-1">{{ imageTitle
                                }}</span>
                            <el-input v-else v-model="editTitle" size="small" class="flex-1" @keyup.enter="saveTitle" />
                            <el-button v-if="!isEditTitle" type="primary" link @click="startEditTitle">修改</el-button>
                            <el-button v-else type="primary" link @click="saveTitle">保存</el-button>
                        </div>

                        <div class="flex-items-center mt-14">
                            <span class="minw-66 color-666">公共标签:</span>
                            <div class="flex flex-wrap gap-8 flex-1">
                                <el-tag v-for="tag in publicTags" :key="tag" class="border-none tag-soft">{{ tag
                                    }}</el-tag>
                                <el-button size="small" type="primary" link @click="addTag('public')">+
                                    添加公共标签</el-button>
                            </div>
                        </div>

                        <div class="flex-items-center mt-12">
                            <span class="minw-66 color-666">个人标签:</span>
                            <div class="flex flex-wrap gap-8 flex-1">
                                <el-tag v-for="tag in personalTags" :key="tag" closable class="border-none tag-main"
                                    @close="removePersonalTag(tag)">
                                    {{ tag }}
                                </el-tag>
                                <el-button size="small" type="primary" link @click="addTag('personal')">+
                                    添加个人标签</el-button>
                            </div>
                        </div>

                        <div class="flex-items-center mt-16">
                            <el-button class="w-30 h-30 border-main color-main round-10" @click="copyLink">⇅</el-button>
                            <el-button class="w-30 h-30 border-main color-main round-10" @click="toggleStar">
                                {{ isStarred ? '★' : '☆' }}
                            </el-button>
                            <el-button class="w-30 h-30 border-main color-main round-10"
                                @click="shareImage">⌘</el-button>
                            <el-button type="primary" class="round-6 mr-10" @click="visibleRecord = true">
                                使用记录
                            </el-button>
                            <el-dropdown trigger="click" @command="handleMore">
                                <el-button class="round-6 color-main border-main">
                                    更多
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="rename">下载图片</el-dropdown-item>
                                        <el-dropdown-item command="move">重新智能分类</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>

                        <div class="flex gap-12 mt-20">
                            <el-button type="primary" class="flex-1 h-36 round-10 font-bold" color="#0f128d"
                                @click="downloadImage">
                                下载无水印图片
                            </el-button>
                            <el-button type="primary" class="flex-1 h-36 round-10 font-bold" color="#0f128d"
                                @click="copyToClip">
                                复制到剪映
                            </el-button>
                        </div>

                        <div class="mt-16 p-16 round-14 info-card fs-12">
                            <div class="lh-26">
                                <div>下载次数: <span class="color-000">{{ detail.downloadCount }}</span></div>
                                <div>浏览量: <span class="color-000">{{ detail.viewCount }}</span></div>
                                <div class="color-green">✓ 仅供内部员工学习，不可用于商业用途</div>
                                <div class="color-green">✓ 所有人可见</div>
                            </div>

                            <div class="py-12 mt-8 info-line">
                                <div class="flex justify-between">
                                    <span class="color-888">可查看时间:</span>
                                    <div class="text-right lh-20">
                                        <div>小组成员 / 不限</div>
                                        <div>团队成员 / 不限</div>
                                        <div>其他团队 / 2025-06-25 12:25:11</div>
                                    </div>
                                </div>
                            </div>

                            <div class="py-12 info-line">
                                <div class="flex justify-between">
                                    <span class="color-888">可下载时间:</span>
                                    <div class="text-right lh-20">
                                        <div>小组成员 / 不限</div>
                                        <div>团队成员 / 不限</div>
                                        <div>其他团队 / 2025-06-02 12:25:11</div>
                                    </div>
                                </div>
                            </div>

                            <div class="pt-12 info-line">
                                <div class="flex-between mb-6">
                                    <span class="color-888">备注:</span>
                                    <el-button v-if="!isRemark" type="primary" link
                                        @click="handleEditRemark">修改</el-button>
                                </div>
                                <div v-if="!isRemark" class="bg-fff round-6 px-12 py-8 color-000">{{ remark }}</div>
                                <div v-else>
                                    <el-input type="textarea" v-model="remark" />
                                    <div class="flex justify-end mt-10">
                                        <el-button link size="small" @click="isRemark = false">取消</el-button>
                                        <el-button type="primary" size="small" @click="isRemark = false">保存</el-button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </el-card>
        <Dialog v-model="visibleRecord" bg-color="#fff" width="720">
            <div class="px-20 py-14 font-bold color-000 record-title">使用记录</div>
            <div class="p-20">
                <SeTable size="small" :dataList="recordList" :total="recordList.length">
                    <el-table-column prop="name" label="使用任务" />
                    <el-table-column prop="user" label="操作人" width="120" />
                    <el-table-column prop="time" label="使用时间" width="180" />
                    <el-table-column prop="status" label="状态" width="120">
                        <template #default="{ row }">
                            <el-tag type="success">{{ row.status }}</el-tag>
                        </template>
                    </el-table-column>
                </SeTable>
            </div>
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import imageA from '@/static/image/huaban.png';
import imageB from '@/static/image/meinv.png';

const activeImageIndex = ref(0);
const imageList = ref([
    { id: 1, name: '微信图片_20230323...', url: imageA },
    { id: 2, name: '微信图片_2023032...', url: imageB }
]);
const currentImage = computed(() => imageList.value[activeImageIndex.value]);

const imageTitle = ref('防晒植物提取精华液展图.jpg');
const editTitle = ref(imageTitle.value);
const isEditTitle = ref(false);
const isStarred = ref(false);
const visibleRecord = ref(false);

const publicTags = ref(['场景：测试2', '白爆款: 主图', '高清无水印']);
const personalTags = ref(['常用精选', '团队必用']);
const detail = {
    downloadCount: 0,
    viewCount: 0,
};
const recordList = [
    { name: '618 主图换新任务', user: '张三', time: '2025-06-01 12:20', status: '已使用' },
    { name: '防晒素材复用任务', user: '李四', time: '2025-06-02 09:40', status: '已使用' },
];

const startEditTitle = () => {
    editTitle.value = imageTitle.value;
    isEditTitle.value = true;
};

const saveTitle = () => {
    imageTitle.value = editTitle.value;
    isEditTitle.value = false;
    ElMessage.success('标题已修改');
};

const removePersonalTag = (tag: string) => {
    personalTags.value = personalTags.value.filter((item) => item !== tag);
};

const addTag = (type: 'public' | 'personal') => {
    const tag = type === 'public' ? '新品主推' : '个人收藏';
    const list = type === 'public' ? publicTags.value : personalTags.value;
    if (!list.includes(tag)) {
        list.push(tag);
    }
};

const toggleStar = () => {
    isStarred.value = !isStarred.value;
    ElMessage.success(isStarred.value ? '已收藏' : '已取消收藏');
};
const remark = ref('已完成电商首图审核与裁剪，高清无瑕疵，建议优先推广。')
const isRemark = ref(false)
const copyLink = () => ElMessage.success('链接已复制');
const shareImage = () => ElMessage.success('分享链接已生成');
const downloadImage = () => ElMessage.success('开始下载无水印图片');
const copyToClip = () => ElMessage.success('已复制到剪映');
const handleEdit = (name: string) => ElMessage.success(`${name}编辑功能已触发`);
const handleMore = (command: string) => ElMessage.success(`已选择：${command}`);


// 修改备注
const handleEditRemark = () => {
    isRemark.value = true
}
</script>

<style scoped lang="scss">
.preview-box {
    height: calc(100vh - 150px);
    min-height: 420px;
    max-height: 620px;
    box-shadow: 0 0 0 1px #e9edf5;
}

.thumb-item {
    flex-shrink: 0;
    box-shadow: 0 0 0 1px #e3e9f3;

    &.active {
        // box-shadow: 0 0 0 2px rgba(var(--main-color), 1);
        border: 2px solid rgba(var(--main-color), 1);
    }
}

.thumb-name {
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.detail-header,
.record-title {
    border-bottom: 1px solid #edf0f5;
}

.bg-green {
    background-color: #00b779;
}

.color-green {
    color: #00a86b;
}

.border-main {
    border: 1px solid rgba(var(--main-color), .45);
}

.tag-soft {
    background-color: #f3f6ff;
    color: #2c3c62;
}

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

.info-card {
    border: 1px solid #edf0f5;
    background-color: #f8fafc;
}

.info-line {
    border-top: 1px solid #e8edf5;
}

@media (max-width: 1100px) {
    .detail-layout {
        flex-direction: column;
    }

    .detail-info {
        width: 100%;
    }
}
</style>
