<template>
  <div class="page-container">
    <PageTitle title="专属采购方案" />
    <!-- Tab切换 -->
    <StatusTabs v-model="activeTab" :tabs="tabs" type="pill" />
    <!-- 方案列表 -->
    <div class="plan-grid">
      <div v-for="(item, index) in planList" :key="index" class="plan-card">
        <div class="plan-image">
          <el-image :src="item.image" fit="cover">
            <template #error><div class="image-placeholder"><el-icon :size="40"><Picture /></el-icon></div></template>
          </el-image>
        </div>
        <div class="plan-info">
          <div class="plan-name">{{ item.name }}</div>
          <div class="plan-desc">{{ item.description }}</div>
          <div class="plan-link" @click="handleDetail(item)">了解详情 <el-icon><ArrowRight /></el-icon></div>
        </div>
      </div>
    </div>
    <el-empty v-if="planList.length === 0" description="暂无采购方案" />
    <!-- 分页 -->
    <TablePagination v-if="planList.length > 0" v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Picture, ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PageTitle, StatusTabs, TablePagination } from '@/components'

const activeTab = ref('purchase')
const tabs = [{ key: 'purchase', label: '采购方案' }, { key: 'exclusive', label: '专属采购方案' }, { key: 'collection', label: '收藏的采购方案' }]
const queryParams = reactive({ pageNum: 1, pageSize: 10 })
const total = ref(500)
const planList = ref<any[]>([])

const loadData = () => {
  if (activeTab.value === 'purchase') {
    planList.value = [
      { id: 1, name: '2025中秋福利 企业团购方案', description: '千款好礼·百大品牌·个性定制', image: '' },
      { id: 2, name: '高效会议 一屏搞定', description: '视频会议大屏解决方案，送货上门，免费安装', image: '' },
      { id: 3, name: '高效会议 一屏搞定', description: '视频会议大屏解决方案，送货上门，免费安装', image: '' }
    ]
    total.value = 500
  } else if (activeTab.value === 'exclusive') {
    planList.value = [{ id: 1, name: '专属定制方案A', description: '根据企业需求定制的专属采购方案', image: '' }]
    total.value = 1
  } else {
    planList.value = [{ id: 1, name: '收藏的方案', description: '您收藏的采购方案', image: '' }]
    total.value = 1
  }
}

watch(activeTab, () => { queryParams.pageNum = 1; loadData() }, { immediate: true })
const handleQuery = () => { loadData() }
const handleDetail = (item: any) => { ElMessage.info('查看方案详情：' + item.name) }
</script>

<style scoped lang="scss">
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan-card { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); .plan-image { height: 180px; background: #f5f5f5; .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffe4c4 0%, #ffd4a3 100%); color: #e60012; } } .plan-info { padding: 15px; .plan-name { font-size: 15px; font-weight: 500; color: #333; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-desc { font-size: 13px; color: #999; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-link { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #e60012; cursor: pointer; &:hover { text-decoration: underline; } } } }
</style>
