<template>
  <div class="tag-page">
    <div class="tag-container">
      <!-- 商业标签区域（独立卡片） -->
      <div class="tag-card">
        <div class="tag-grid">
          <div
            v-for="item in tagList"
            :key="item.id"
            class="tag-item"
          >
            <div class="tag-content">
              <div class="tag-text">
                <h3 class="tag-title">{{ item.title }}</h3>
                <p class="tag-desc">{{ item.description }}</p>
                <el-button class="tag-btn" @click="handleView(item)">
                  查看 <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
              <div class="tag-image">
                <el-image :src="item.imageUrl" fit="contain" lazy class="image">
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="IndustrialTag" lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Picture, ArrowRight } from '@element-plus/icons-vue';

// 标签列表
const tagList = ref([
  {
    id: '1',
    title: '新品推荐',
    description: '品质卓越，严选新品，直击企业效能升级需求，多场景适配项目心！助力企业降本增效！',
    imageUrl: '/img/耳机.png'
  },
  {
    id: '2',
    title: '季节爆款',
    description: '聚焦当季爆款，严选被众工厂企业验证的爆用品牌，满足多场景作业需求。',
    imageUrl: '/img/手表.png'
  },
  {
    id: '3',
    title: '五金工具',
    description: '精选高硬度、抗腐蚀钢铁质，覆盖多场景作业需求，助力企业提效降本！',
    imageUrl: '/img/江润双色塑钢培训椅.png'
  },
  {
    id: '4',
    title: '个护安防',
    description: '严选防护等级认证产品，覆盖防尘保护装、环境监测防护等，守护企业作业安全！',
    imageUrl: '/img/蓝牙音箱.png'
  }
]);

// 查看
const handleView = (item: any) => {
  ElMessage.info(`查看：${item.title}`);
};
</script>

<style scoped lang="scss">
.tag-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.tag-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tag-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tag-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  
  &:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
}

.tag-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tag-text {
  flex: 1;
  padding-right: 15px;
  
  .tag-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  
  .tag-desc {
    margin: 0 0 15px 0;
    font-size: 13px;
    color: #909399;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .tag-btn {
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    
    &:hover {
      border-color: #409eff;
      color: #409eff;
    }
  }
}

.tag-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  
  .image {
    width: 100%;
    height: 100%;
  }
  
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }
}
</style>
