<template>
  <div class="floor-ad-page">
    <div class="floor-ad-container">
      <!-- 楼层广告区域（独立卡片） -->
      <div class="ad-card">
        <!-- 标签页切换 -->
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane label="首页三联广告" name="triple" />
          <el-tab-pane label="首页图标广告" name="icon" />
          <el-tab-pane label="首页横幅广告" name="banner" />
        </el-tabs>

        <!-- 广告展示区 -->
        <div class="ad-preview">
          <div class="ad-grid">
            <div
              v-for="(item, index) in adList"
              :key="index"
              class="ad-item"
              :class="{ active: selectedIndex === index }"
              @click="selectAd(index)"
            >
              <div class="ad-image">
                <el-image :src="item.imageUrl" fit="cover" lazy class="image">
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="ad-info">
                <h4 class="ad-title">{{ item.title }}</h4>
                <span class="ad-link">查看方案▶</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 编辑表单 -->
        <div class="ad-form">
          <el-form :model="form" label-width="80px">
            <el-form-item label="文字:" required>
              <el-input v-model="form.text" placeholder="请输入文字" />
            </el-form-item>
            <el-form-item label="链接:" required>
              <el-input v-model="form.link" placeholder="请输入链接地址" />
            </el-form-item>
            <el-form-item label="图片:">
              <div class="image-preview" v-if="form.imageUrl">
                <el-image :src="form.imageUrl" fit="cover" style="width: 120px; height: 80px; border-radius: 4px" />
              </div>
              <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
            </el-form-item>
            <el-form-item label="描述:" required>
              <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 当前标签页
const activeTab = ref('triple');

// 当前选中的广告索引
const selectedIndex = ref(0);

// 广告列表数据
const tripleAdList = ref([
  { title: '书写用品', imageUrl: '/img/品牌广告图片.jpg', text: '文创商务推荐', link: 'https://www.yoe365.com/theme?t=000000098', description: '杯茶套装 咖啡套装 中式文具套装' },
  { title: '办公电脑', imageUrl: '/img/联想.jpg', text: '办公电脑推荐', link: 'https://www.yoe365.com/theme?t=000000099', description: '笔记本电脑 台式机 一体机' },
  { title: 'LED大屏', imageUrl: '/img/MAXHUB.jpg', text: 'LED大屏推荐', link: 'https://www.yoe365.com/theme?t=000000100', description: '会议大屏 广告屏 拼接屏' }
]);

const iconAdList = ref([
  { title: '打印设备', imageUrl: '/img/奔图.jpg', text: '打印设备', link: '', description: '' },
  { title: '办公家具', imageUrl: '/img/江润实验台.png', text: '办公家具', link: '', description: '' },
  { title: '清洁用品', imageUrl: '/img/电饭煲.png', text: '清洁用品', link: '', description: '' }
]);

const bannerAdList = ref([
  { title: '促销活动', imageUrl: '/img/格力.jpg', text: '年终大促', link: '', description: '' },
  { title: '新品上市', imageUrl: '/img/Midea.jpg', text: '新品推荐', link: '', description: '' },
  { title: '品牌专区', imageUrl: '/img/PHILIPS.jpg', text: '品牌专区', link: '', description: '' }
]);

// 当前显示的广告列表
const adList = ref(tripleAdList.value);

// 表单数据
const form = reactive({
  text: '',
  link: '',
  imageUrl: '',
  description: ''
});

// 切换标签页
const handleTabChange = (tab: string) => {
  selectedIndex.value = 0;
  if (tab === 'triple') {
    adList.value = tripleAdList.value;
  } else if (tab === 'icon') {
    adList.value = iconAdList.value;
  } else {
    adList.value = bannerAdList.value;
  }
  loadFormData();
};

// 选择广告
const selectAd = (index: number) => {
  selectedIndex.value = index;
  loadFormData();
};

// 加载表单数据
const loadFormData = () => {
  const item = adList.value[selectedIndex.value];
  if (item) {
    form.text = item.text;
    form.link = item.link;
    form.imageUrl = item.imageUrl;
    form.description = item.description;
  }
};

// 上传图片
const handleUpload = () => {
  ElMessage.info('上传功能开发中...');
};

// 提交
const handleSubmit = () => {
  if (!form.text) {
    ElMessage.warning('请输入文字');
    return;
  }
  // 更新数据
  const item = adList.value[selectedIndex.value];
  if (item) {
    item.text = form.text;
    item.link = form.link;
    item.imageUrl = form.imageUrl;
    item.description = form.description;
  }
  ElMessage.success('提交成功');
};

// 初始化加载
loadFormData();
</script>

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

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

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

.ad-preview {
  margin: 20px 0;
  
  .ad-grid {
    display: flex;
    gap: 20px;
  }
}

.ad-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: #f5f7fa;
  }
  
  &.active {
    border-color: #409eff;
    background: #ecf5ff;
  }
  
  .ad-image {
    width: 100px;
    height: 70px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 15px;
    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: 24px;
    }
  }
  
  .ad-info {
    .ad-title {
      margin: 0 0 8px 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    
    .ad-link {
      font-size: 12px;
      color: #409eff;
      background: #ecf5ff;
      padding: 2px 8px;
      border-radius: 2px;
    }
  }
}

.ad-form {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
  
  .image-preview {
    margin-bottom: 10px;
  }
}
</style>
