<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <h1>本地短剧资源管理</h1>

    <!-- 头部操作区域：包含搜索框和刷新按钮 -->
    <div class="table-header">
      <el-input
        v-model="searchQuery"
        placeholder="搜索标题或路径..."
        @keyup.enter="fetchData(1)"
        style="width: 300px;"
        clearable
        :prefix-icon="'Search'"
      />
      <el-button
        type="primary"
        :icon="'Refresh'"
        @click="fetchData(1)"
        :loading="loading"
      >
        刷新
      </el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" v-loading="loading" border stripe style="width: 100%">
      <!-- 封面列 -->
      <el-table-column label="封面" width="120" align="center">
        <template #default="{ row }">
          <el-image
            style="width: 80px; height: 120px; border-radius: 4px;"
            :src="row.poster"
            fit="cover"
            lazy
            preview-teleported
            :preview-src-list="row.poster ? [row.poster] : []"
          >
            <!-- 图片加载失败时的占位内容 -->
            <template #error>
              <div class="image-slot">
                <span>无封面</span>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <!-- 标题列 -->
      <el-table-column prop="title" label="标题" min-width="200" sortable />

      <!-- 路径列 -->
      <el-table-column prop="path" label="路径" min-width="250" />

      <!-- 刮削状态列 -->
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="row.scraped ? 'success' : 'info'">
            {{ row.scraped ? '已刮削' : '未刮削' }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="120" fixed="right" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            :icon="'MagicStick'"
            @click="handleScrape(row)"
          >
            刮削
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      style="margin-top: 20px; justify-content: flex-end;"
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as api from '../api'; // 引入封装好的 API 请求

// --- 响应式状态定义 ---

// 表格加载状态
const loading = ref(false);
// 搜索查询关键词
const searchQuery = ref('');
// 表格数据
const tableData = ref([]);
// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// --- 方法定义 ---

/**
 * @description 从后端获取短剧列表数据
 * @param {number} page - 要获取的页码，默认为当前页
 */
const fetchData = async (page = pagination.currentPage) => {
  loading.value = true;
  pagination.currentPage = page;
  try {
    const params = {
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
      query: searchQuery.value.trim() // 传递搜索词，并去除前后空格
    };
    const res = await api.getLocalMedia(params);
    tableData.value = res.list;
    pagination.total = res.total;
  } catch (error) {
    console.error("获取本地媒体列表失败:", error);
    ElMessage.error("数据加载失败，请检查网络或联系管理员。");
  } finally {
    loading.value = false;
  }
};

/**
 * @description 处理刮削操作
 * @param {object} row - 当前行的数据对象
 */
const handleScrape = (row) => {
  // 弹出输入框，让用户可以手动输入关键词或豆瓣链接
  ElMessageBox.prompt('请输入豆瓣链接或关键词进行刮削', '手动刮削', {
    confirmButtonText: '开始刮削',
    cancelButtonText: '取消',
    inputPlaceholder: '留空则默认使用标题进行搜索',
    inputValue: row.title // 将当前标题作为默认值填入输入框
  }).then(async ({ value }) => {
    // 显示加载状态
    const scrapeLoading = ElMessage({
      message: '正在提交刮削任务...',
      type: 'info',
      duration: 0 // 持续显示，直到手动关闭
    });
    try {
      // 调用后端刮削接口
      await api.scrapeMedia({
        media_id: row.id, // 传递媒体的唯一标识
        query: value || row.title // 如果用户没输入，就用原始标题
      });
      scrapeLoading.close(); // 关闭加载提示
      ElMessage.success('刮削任务已成功提交！后台正在处理...');
      
      // 2秒后自动刷新当前页数据，以便用户看到更新后的状态（如封面、刮削状态标签）
      setTimeout(() => {
        fetchData();
      }, 2000);
    } catch (error) {
      scrapeLoading.close(); // 关闭加载提示
      console.error('刮削失败:', error);
      // ElMessage.error("刮削任务提交失败！"); // API拦截器中已有通用错误提示
    }
  }).catch(() => {
    // 用户点击取消按钮
    ElMessage.info('已取消刮削操作');
  });
};

/**
 * @description 处理每页显示数量变化
 * @param {number} size - 新的每页显示数量
 */
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  fetchData(1); // 更改每页数量时，回到第一页
};

/**
 * @description 处理当前页码变化
 * @param {number} page - 新的页码
 */
const handleCurrentChange = (page) => {
  fetchData(page);
};

// --- 生命周期钩子 ---

// 组件挂载完成后，立即获取第一页数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
/* 页面容器通用内边距 */
.page-container {
  padding: 20px;
}

/* 表格头部样式，使用 flex 布局让搜索框和按钮分布在两端 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 封面图片加载失败时的占位符样式 */
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>
