<template>
  <div class="relic-container">
    <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select class="cat-select" v-model="queryParams.categoryId" placeholder="选择分类" clearable>
          <el-option v-for="c in categoryOptions" :key="c.id" :label="c.name" :value="c.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="热门" prop="isHot">
        <el-select class="hot-select" v-model="queryParams.isHot" placeholder="请选择" clearable>
          <el-option label="热门" :value="1" />
          <el-option label="非热门" :value="0" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    

    <div class="relic-grid" v-loading="loading">
      <div class="relic-card" v-for="item in relicList" :key="item.id" @click="goDetail(item)">
        <div class="relic-cover">
          <el-image
            v-if="item.coverImageUrl"
            :src="getFilePrefix + item.coverImageUrl"
            :preview-src-list="[getFilePrefix + item.coverImageUrl]"
            preview-teleported
            fit="cover"
          />
          <div v-else class="relic-cover-empty">—</div>
        </div>
        <div class="relic-info">
          <div class="relic-name">{{ item.name }}</div>
          <div class="relic-meta">
            <span class="relic-cat">{{ item.categoryInfo && item.categoryInfo.name ? item.categoryInfo.name : (item.categoryId || '—') }}</span>
            <span v-if="item.material" class="relic-tag">{{ item.material }}</span>
            <span v-if="item.age" class="relic-tag">{{ item.age }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="grid-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[12, 24, 36, 48]"
        :page-size="queryParams.pageSize"
        layout="->, total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>

    
  </div>
</template>

<script setup name="Relic">
import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
import { listRelic } from "@/api/relic";
import { listAllItemCategory } from "@/api/itemCategory";

const { proxy } = getCurrentInstance();

const relicList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const getFilePrefix = proxy.getFilePrefix
const categoryOptions = ref([])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 12,
    name: null,
    categoryId: null,
    isHot: null
  },
});

const { queryParams } = toRefs(data);

/** 查询藏品列表 */
function getList() {
  loading.value = true;
  listRelic(queryParams.value).then(response => {
    const list = Array.isArray(response.list) ? response.list : (response.data && response.data.list) || []
    const tot = response.total ?? (response.data && response.data.total) ?? 0
    relicList.value = list;
    total.value = tot;
    loading.value = false;
  });
}

function fetchCategoryOptions() {
  listAllItemCategory({}).then(res => {
    const arr = Array.isArray(res) ? res : (res.list || res.data || [])
    categoryOptions.value = Array.isArray(arr) ? arr : []
  })
}

// 改变每页条数大小
function handleSizeChange(val) {
  queryParams.value.pageSize = val;
  getList();
}

// 换页
function handleCurrentChange(val) {
  queryParams.value.pageNum = val;
  getList();
}

// 取消按钮
 

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.name = null
  queryParams.value.categoryId = null
  queryParams.value.isHot = null
  handleQuery()
}


/** 新增按钮操作 */
 

/** 导出按钮操作 */
// function handleExport() {
//   proxy.download('system/relic/export', {
//     ...queryParams.value
//   }, `relic_${new Date().getTime()}.xlsx`)
// }

getList();

onMounted(() => {
  fetchCategoryOptions()
})

function goDetail(item) {
  if (!item || !item.id) return
  proxy.$router.push(`/tourist/relic/detail/${item.id}`)
}
</script>

<style scoped>
.relic-container { width: 80%; margin: 24px auto 40px; padding-top: 16px; }
.filter-bar { display: flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 18px; }
.relic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.relic-card { background: #f9f6f1; border: 1px solid #e7dfcf; border-radius: 12px; box-shadow: 0 6px 14px rgba(138,43,43,0.08); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.relic-card { cursor: pointer; }
.relic-cover { width: 100%; height: 180px; position: relative; overflow: hidden; }
.relic-cover :deep(.el-image) { width: 100%; height: 100%; transition: transform 0.25s ease; }
.relic-cover:hover :deep(.el-image) { transform: scale(1.03); }
.relic-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 60%, rgba(0,0,0,0.05) 100%); pointer-events: none; }
.relic-cover-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #909399; }
.relic-info { padding: 14px; background: linear-gradient(180deg, #faf7f2 0%, #f7f3ea 100%); }
.relic-name { font-size: 16px; font-weight: 800; color: #2c1f1f; letter-spacing: 1px; }
.relic-name::after { content: ''; display: block; width: 36px; border-bottom: 2px solid #8a2b2b; margin: 6px 0 0; }
.relic-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.relic-cat { font-size: 12px; color: #8a2b2b; background: #f5e9e2; border: 1px solid #e8d9cf; border-radius: 999px; padding: 2px 8px; }
.relic-tag { font-size: 12px; color: #2c1f1f; background: #efe9df; border: 1px solid #e0d6c7; border-radius: 999px; padding: 2px 8px; }
.search-form { display: flex; justify-content: center; align-items: center; gap: 12px; }
.hot-select { width: 120px; }
.cat-select { width: 180px; }
.grid-pagination { display: flex; justify-content: center; margin-top: 16px; }
</style>
