<template>
  <div class="works-page">
    <div class="toolbar">
      <el-radio-group v-model="activeTab" size="small" class="seg-control">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="video">视频</el-radio-button>
        <el-radio-button label="image">图片</el-radio-button>
      </el-radio-group>
    </div>

    <div class="filters-bar">
      <el-space wrap size="small" class="filters">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
        <el-select v-model="category" placeholder="任务类型" size="small" style="width: 120px" @change="onFilterChange">
          <el-option label="全部" value="all" />
          <el-option label="文生视频" value="text2video" />
          <el-option label="图生视频" value="image2video" />
          <el-option label="分镜视频" value="storyboard" />
          <el-option label="参考图" value="reference" />
        </el-select>
        <el-select v-model="resolution" placeholder="清晰度" clearable size="small" style="width: 120px">
          <el-option label="标清" value="sd" />
          <el-option label="高清" value="hd" />
          <el-option label="超清" value="uhd" />
        </el-select>
        <el-select v-model="sortBy" size="small" style="width: 120px">
          <el-option label="比例" value="ratio" />
          <el-option label="时间" value="date" />
          <el-option label="热门" value="hot" />
        </el-select>
        <el-select v-model="order" size="small" style="width: 100px">
          <el-option label="升序" value="asc" />
          <el-option label="降序" value="desc" />
        </el-select>
      </el-space>
      <div class="right">
        <el-input v-model="keyword" placeholder="名字/提示词/ID" size="small" clearable style="width: 220px" @keyup.enter.native="reload" />
      </div>
    </div>

    <div class="select-row">
      <el-checkbox v-model="multiSelect" size="small">选择多个</el-checkbox>
      <template v-if="multiSelect && selectedIds.size">
        <el-tag type="success" size="small">已选 {{ selectedIds.size }} 个项目</el-tag>
        <el-button size="small" type="primary" @click="bulkDownload" plain>下载</el-button>
        <el-button size="small" type="danger" @click="bulkDelete" plain>删除</el-button>
      </template>
    </div>

    <el-row :gutter="16" class="works-grid">
      <el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="work-card" :class="{ selected: selectedIds.has(item.id) }" shadow="hover">
          <div class="thumb" @click="multiSelect ? toggleSelect(item.id) : openDetail(item)">
            <img :src="item.cover" :alt="item.title" />
            
            <div class="checker" v-if="multiSelect">
              <el-checkbox :model-value="selectedIds.has(item.id)" @change="() => toggleSelect(item.id)" />
            </div>
            <div class="actions" @click.stop>
              <el-tooltip content="收藏" placement="top"><el-button circle size="small" text><el-icon><Star /></el-icon></el-button></el-tooltip>
              <el-dropdown @command="(cmd)=>moreCommand(cmd,item)">
                <el-button circle size="small" text><el-icon><MoreFilled /></el-icon></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="download_with_watermark">带水印下载</el-dropdown-item>
                    <el-dropdown-item command="download_without_watermark">
                      不带水印下载
                      <el-tag type="primary" size="small" style="margin-left: 8px;">会员</el-tag>
                    </el-dropdown-item>
                    <el-dropdown-item command="rename" divided>重命名</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="meta">
            <div class="title" :title="item.title">{{ item.title }}</div>
            <div class="sub">{{ item.id }} · {{ item.sizeText }}</div>
          </div>
          <template #footer>
            <el-space size="small">
              <el-button text size="small" @click.stop="download(item)">下载</el-button>
              <el-button text size="small" @click.stop="share(item)">分享</el-button>
            </el-space>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <!-- 作品详情模态框 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="selectedItem?.title"
      width="60%"
      :before-close="handleClose"
      class="detail-dialog"
      :modal="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
    >
      <div class="detail-content" v-if="selectedItem">
        <div class="detail-left">
          <div class="video-container">
            <video 
              v-if="selectedItem.type === 'video'"
              class="detail-video"
              :src="selectedItem.cover"
              :poster="selectedItem.cover"
              controls
            >
              您的浏览器不支持视频播放
            </video>
            <img 
              v-else
              class="detail-image"
              :src="selectedItem.cover" 
              :alt="selectedItem.title"
            />
            
            <!-- 视频文字叠加 -->
            <div class="video-overlay" v-if="selectedItem.type === 'video' && selectedItem.overlayText">
              <div class="overlay-text">{{ selectedItem.overlayText }}</div>
            </div>
          </div>
        </div>
        
        <div class="detail-right">
          <!-- 用户信息头部 -->
          <div class="detail-header">
            <div class="user-info">
              <div class="avatar">
                <el-icon><User /></el-icon>
              </div>
              <div class="username">mingzi_FBx7foZYDS7inL</div>
            </div>
          </div>
          
          <!-- 标签页 -->
          <div class="tabs">
            <div class="tab" :class="{ active: activeDetailTab === 'detail' }" @click="activeDetailTab = 'detail'">作品详情</div>
            <div class="tab" :class="{ active: activeDetailTab === 'category' }" @click="activeDetailTab = 'category'">{{ selectedItem.category }}</div>
          </div>
          
          <!-- 描述区域 -->
          <div class="description-section" v-if="activeDetailTab === 'detail'">
            <h3 class="section-title">描述</h3>
            <p class="description-text">{{ getDescription(selectedItem) }}</p>
          </div>
          
          <!-- 参考图特殊内容 -->
          <div class="reference-content" v-if="activeDetailTab === 'category' && selectedItem.category === '参考图'">
            <div class="input-details-section">
              <h3 class="section-title">输入详情</h3>
              <div class="input-images">
                <div class="input-image-item">
                  <img :src="selectedItem.cover" :alt="selectedItem.title" class="input-thumbnail" />
                </div>
                <div class="input-image-item">
                  <img :src="selectedItem.cover" :alt="selectedItem.title" class="input-thumbnail" />
                </div>
              </div>
            </div>
            
            <div class="description-section">
              <h3 class="section-title">描述</h3>
              <p class="description-text">图1在图2中奔跑视频</p>
            </div>
          </div>
          
          <!-- 其他分类的内容 -->
          <div class="description-section" v-if="activeDetailTab === 'category' && selectedItem.category !== '参考图'">
            <h3 class="section-title">描述</h3>
            <p class="description-text">{{ getDescription(selectedItem) }}</p>
          </div>
          
          <!-- 元数据区域 -->
          <div class="metadata-section">
            <div class="metadata-item">
              <span class="label">创建时间</span>
              <span class="value">{{ selectedItem.createTime }}</span>
            </div>
            <div class="metadata-item">
              <span class="label">作品 ID</span>
              <span class="value">{{ selectedItem.id }}</span>
            </div>
            <div class="metadata-item">
              <span class="label">日期</span>
              <span class="value">{{ selectedItem.date }}</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">时长</span>
              <span class="value">5s</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">清晰度</span>
              <span class="value">1080p</span>
            </div>
            <div class="metadata-item">
              <span class="label">分类</span>
              <span class="value">{{ selectedItem.category }}</span>
            </div>
            <div class="metadata-item" v-if="selectedItem.type === 'video'">
              <span class="label">宽高比</span>
              <span class="value">16:9</span>
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="action-section">
            <button class="create-similar-btn" @click="createSimilar">
              做同款
            </button>
          </div>
        </div>
      </div>
    </el-dialog>

    <div class="finished" v-if="!hasMore && filteredItems.length>0">已加载全部内容</div>
    <el-empty v-if="!loading && filteredItems.length===0" description="没有找到相关内容" />
  </div>
  
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star, MoreFilled, User } from '@element-plus/icons-vue'

const router = useRouter()

const activeTab = ref('all')
const dateRange = ref([])
const category = ref('all')
const resolution = ref('')
const sortBy = ref('date')
const order = ref('desc')
const keyword = ref('')
const multiSelect = ref(false)
const selectedIds = ref(new Set())

// 模态框相关状态
const detailDialogVisible = ref(false)
const selectedItem = ref(null)
const activeDetailTab = ref('detail')

const page = ref(1)
const pageSize =  ref(4)
const loading = ref(false)
const hasMore = ref(true)
const items = ref([])

const mockData = (count, startId = 1) => Array.from({ length: count }).map((_, i) => {
  const id = startId + i
  
  // 定义不同的分类和类型
  const categories = [
    { type: 'image', category: '参考图', title: '图片作品' },
    { type: 'image', category: '参考图', title: '图片作品' },
    { type: 'video', category: '文生视频', title: '视频作品' },
    { type: 'video', category: '图生视频', title: '视频作品' }
  ]
  
  const itemConfig = categories[i] || categories[0]
  
  // 生成不同的日期
  const dates = ['2025/01/15', '2025/01/14', '2025/01/13', '2025/01/12']
  const createTimes = ['2025/01/15 14:30', '2025/01/14 16:45', '2025/01/13 09:20', '2025/01/12 11:15']
  
  return {
    id: `2995${id.toString().padStart(9,'0')}`,
    title: `${itemConfig.title} #${id}`,
    type: itemConfig.type,
    category: itemConfig.category,
    sizeText: itemConfig.type === 'video' ? '9 MB' : '6 MB',
    cover: itemConfig.type === 'video'
      ? '/images/backgrounds/welcome.jpg'
      : '/images/backgrounds/login.png',
    createTime: createTimes[i] || createTimes[0],
    date: dates[i] || dates[0]
  }
})

const loadList = async () => {
  loading.value = true
  // TODO: 替换为真实接口
  await new Promise(r => setTimeout(r, 400))
  const data = mockData(pageSize.value, (page.value - 1) * pageSize.value + 1)
  if (page.value === 1) items.value = []
  items.value = items.value.concat(data)
  hasMore.value = false
  loading.value = false
}

// 筛选后的作品列表
const filteredItems = computed(() => {
  let filtered = [...items.value]
  
  // 按类型筛选（全部/视频/图片）
  if (activeTab.value === 'video') {
    filtered = filtered.filter(item => item.type === 'video')
  } else if (activeTab.value === 'image') {
    filtered = filtered.filter(item => item.type === 'image')
  }
  
  // 按分类筛选
  if (category.value !== 'all') {
    const categoryMap = {
      'text2video': '文生视频',
      'image2video': '图生视频', 
      'storyboard': '分镜视频',
      'reference': '参考图'
    }
    const targetCategory = categoryMap[category.value]
    if (targetCategory) {
      filtered = filtered.filter(item => item.category === targetCategory)
    }
  }
  
  // 按关键词筛选
  if (keyword.value) {
    const keywordLower = keyword.value.toLowerCase()
    filtered = filtered.filter(item => 
      item.title.toLowerCase().includes(keywordLower) ||
      item.id.includes(keywordLower)
    )
  }
  
  return filtered
})

const reload = () => {
  page.value = 1
  hasMore.value = true
  loadList()
}

// 筛选变化时的处理
const onFilterChange = () => {
  // 筛选是响应式的，不需要额外处理
  console.log('筛选条件变化:', { category: category.value, activeTab: activeTab.value })
}

const loadMore = () => {
  if (loading.value || !hasMore.value) return
  page.value += 1
  loadList()
}

const openDetail = (item) => {
  selectedItem.value = item
  detailDialogVisible.value = true
}

// 获取作品描述
const getDescription = (item) => {
  if (item.type === 'video') {
    return '影片捕捉了暴风雪中的午夜时分,坐落在积雪覆盖的悬崖顶上的孤立灯塔。相机逐渐放大灯塔的灯光,穿透飞舞的雪花,投射出幽幽的光芒。在白茫茫的环境中,灯塔的黑色轮廓显得格外醒目,呼啸的风声和远处海浪的撞击声增强了孤独的氛围。这一场景展示了灯塔的孤独力量。'
  } else {
    return '这是一张精美的参考图片，展现了独特的艺术风格和创意构思。图片构图优美，色彩搭配和谐，具有很高的艺术价值和参考意义。'
  }
}

// 关闭模态框
const handleClose = () => {
  detailDialogVisible.value = false
  selectedItem.value = null
  activeDetailTab.value = 'detail'
}

// 创建同款
const createSimilar = () => {
  ElMessage.info('跳转到创作页面')
}

const download = (item) => {
  ElMessage.success(`开始下载：${item.title}`)
}

const share = (item) => {
  ElMessageBox.alert('分享链接功能即将上线', '提示')
}

const moreCommand = async (cmd, item) => {
  if (cmd === 'download_with_watermark') {
    ElMessage.success('开始下载带水印版本')
  } else if (cmd === 'download_without_watermark') {
    ElMessage.success('开始下载不带水印版本（会员专享）')
  } else if (cmd === 'rename') {
    ElMessage.info('重命名功能开发中')
  } else if (cmd === 'delete') {
    try {
      await ElMessageBox.confirm('确定删除该作品吗？', '删除确认', {
        type: 'warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
      ElMessage.success('已删除')
    } catch (_) {}
  }
}

const toggleSelect = (id) => {
  const next = new Set(selectedIds.value)
  if (next.has(id)) next.delete(id)
  else next.add(id)
  selectedIds.value = next
}

const bulkDownload = () => {
  ElMessage.success(`开始下载 ${selectedIds.value.size} 个文件`)
}

const bulkDelete = async () => {
  try {
    await ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.size} 个项目吗？`, '删除确认', {
      type: 'warning',
      confirmButtonText: '删除',
      cancelButtonText: '取消'
    })
    ElMessage.success('已删除选中项目')
    selectedIds.value = new Set()
  } catch (_) {}
}

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

<style scoped>
.works-page {
  padding: 16px 20px;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 4px;
}
.seg-control { margin-left: 2px; }
:deep(.seg-control .el-radio-button__inner) {
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
  font-size: 14px;
  background-color: #0a0a0a; /* 与页面背景相同 */
  color: #cbd5e1;
  border-color: #2a2a2a;
}
:deep(.seg-control .el-radio-button:first-child .el-radio-button__inner) { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
:deep(.seg-control .el-radio-button:last-child .el-radio-button__inner) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
:deep(.seg-control .el-radio-button.is-active .el-radio-button__inner) {
  background-color: #23262b; /* 比背景略亮，保持可区分 */
  color: #ffffff;
  border-color: #3a3a3a;
}
.filters { margin-left: 10px; }
.filters-bar {
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 4px 0 2px;
  /* 覆盖 Element Plus 变量，确保与页面背景一致 */
  --el-input-bg-color: #0a0a0a;
  --el-fill-color-blank: #0a0a0a;
  --el-border-color: #2a2a2a;
  --el-text-color-regular: #cbd5e1;
}
:deep(.filters .el-select .el-input__wrapper),
:deep(.filters .el-date-editor.el-input__wrapper),
:deep(.filters .el-input__wrapper) {
  background-color: #0a0a0a; /* 与页面背景相同 */
  border-color: #2a2a2a;
  box-shadow: none;
}
:deep(.filters .el-input__wrapper.is-focus) { border-color: #3a3a3a; box-shadow: none; }
:deep(.filters .el-input__inner) { color: #cbd5e1; }
:deep(.filters .el-input__suffix) { color: #cbd5e1; }
.select-row { padding: 4px 0 8px; }
.works-grid { margin-top: 12px; }
.work-card { margin-bottom: 14px; }
.thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 6px; cursor: pointer; }
.thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.checker { position: absolute; left: 6px; top: 6px; }
.actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.thumb:hover .actions { opacity: 1; }
.work-card.selected .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #409eff;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.15) inset;
}
.meta { margin-top: 10px; }
.title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: #909399; font-size: 12px; margin-top: 4px; }
.finished { text-align: center; color: #909399; margin: 14px 0 4px; font-size: 12px; }

/* 让卡片与页面背景一致 */
:deep(.work-card.el-card) {
  background-color: #0a0a0a;
  border-color: #1f2937;
  color: #e5e7eb;
}
:deep(.work-card .el-card__body) {
  background-color: #0a0a0a;
}
:deep(.work-card .el-card__footer) {
  background-color: #0a0a0a;
  border-top: 1px solid #1f2937;
}

/* 模态框样式 */
:deep(.detail-dialog .el-dialog) {
  background: #0a0a0a !important;
  border-radius: 12px;
  border: 1px solid #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

:deep(.detail-dialog .el-dialog__header) {
  background: #0a0a0a !important;
  border-bottom: 1px solid #333;
  padding: 16px 20px;
}

:deep(.detail-dialog .el-dialog__title) {
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
}

:deep(.detail-dialog .el-dialog__headerbtn) {
  color: #fff !important;
}

:deep(.detail-dialog .el-dialog__body) {
  background: #0a0a0a !important;
  padding: 0 !important;
}

:deep(.detail-dialog .el-overlay) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* 强制覆盖Element Plus默认样式 */
:deep(.el-dialog) {
  background: #0a0a0a !important;
}

:deep(.el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.detail-content {
  display: flex;
  height: 50vh;
  background: #0a0a0a;
}

.detail-left {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.detail-video, .detail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-overlay {
  position: absolute;
  bottom: 80px;
  left: 20px;
  z-index: 10;
}

.overlay-text {
  font-family: 'Brush Script MT', cursive;
  font-size: 24px;
  color: #8b5cf6;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

.detail-right {
  flex: 1;
  background: #0a0a0a;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.username {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.tabs {
  display: flex;
  gap: 0;
}

.tab {
  padding: 8px 16px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
  font-size: 14px;
}

.tab.active {
  background: #409eff;
  color: #fff;
}

.tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.description-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.description-text {
  font-size: 14px;
  line-height: 1.6;
  color: #d1d5db;
  margin: 0;
}

/* 参考图特殊内容样式 */
.reference-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-details-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-images {
  display: flex;
  gap: 12px;
}

.input-image-item {
  flex: 1;
}

.input-thumbnail {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #333;
}

.metadata-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metadata-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.label {
  font-size: 14px;
  color: #9ca3af;
}

.value {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.action-section {
  margin-top: auto;
  padding-top: 20px;
}

.create-similar-btn {
  width: 100%;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.create-similar-btn:hover {
  background: #337ecc;
  transform: translateY(-2px);
}

.create-similar-btn:active {
  transform: translateY(0);
}

/* 更强制性的样式覆盖 */
:deep(.detail-dialog) {
  background: #0a0a0a !important;
}

:deep(.detail-dialog .el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

:deep(.detail-dialog .el-overlay-dialog) {
  background: #0a0a0a !important;
  border: none !important;
  box-shadow: none !important;
}

/* 全局模态框样式覆盖 */
:deep(.el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
</style>


