<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="首页logo" name="logo" />
          <el-tab-pane label="首页联系电话" name="contact" />
        </el-tabs>

        <!-- 广告展示区 -->
        <div class="ad-preview">
          <div class="ad-grid" v-if="activeTab === 'triple'">
            <div
              v-for="(item, index) in tripleAdList"
              :key="index"
              class="ad-item"
              :class="{ active: selectedIndex === index }"
              @click="selectAd(index)"
            >
              <el-image :src="item.imageUrl" fit="cover" lazy class="ad-image">
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </div>

          <div class="ad-grid" v-else-if="activeTab === 'icon'">
            <div
              v-for="(item, index) in iconAdList"
              :key="index"
              class="ad-item icon-item"
              :class="{ active: selectedIndex === index }"
              @click="selectAd(index)"
            >
              <el-image :src="item.imageUrl" fit="contain" lazy class="ad-image">
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </div>

          <div class="logo-preview" v-else-if="activeTab === 'logo'">
            <div class="logo-item">
              <el-image :src="logoData.imageUrl" fit="contain" lazy class="logo-image">
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </div>

          <div class="contact-preview" v-else>
            <el-form :model="contactForm" label-width="100px">
              <el-form-item label="联系电话:">
                <el-input v-model="contactForm.phone" placeholder="请输入联系电话" style="width: 300px" />
              </el-form-item>
              <el-form-item label="服务时间:">
                <el-input v-model="contactForm.serviceTime" placeholder="请输入服务时间" style="width: 300px" />
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 编辑表单（三联广告和图标广告） -->
        <div class="ad-form" v-if="activeTab === 'triple' || activeTab === 'icon'">
          <el-form :model="form" label-width="80px">
            <el-form-item label="链接:">
              <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>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- logo编辑 -->
        <div class="ad-form" v-else-if="activeTab === 'logo'">
          <el-form label-width="80px">
            <el-form-item label="Logo:">
              <div class="image-preview" v-if="logoData.imageUrl">
                <el-image :src="logoData.imageUrl" fit="contain" style="width: 120px; height: 60px" />
              </div>
              <el-button icon="Upload" @click="handleUploadLogo">选择上传文件</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmitLogo">提交</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 联系电话编辑 -->
        <div class="ad-form" v-else>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitContact">提交</el-button>
          </el-form-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="IndustrialFloorAd" lang="ts">
import { ref, reactive } 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([
  { imageUrl: '/img/什湖好米.jpg', link: '' },
  { imageUrl: '/img/希诺杯壶.jpg', link: '' },
  { imageUrl: '/img/摩飞小家电.jpg', link: '' }
]);

// 图标广告列表
const iconAdList = ref([
  { imageUrl: '/img/格力.jpg', link: '' },
  { imageUrl: '/img/Midea.jpg', link: '' },
  { imageUrl: '/img/PHILIPS.jpg', link: '' },
  { imageUrl: '/img/联想.jpg', link: '' }
]);

// Logo数据
const logoData = ref({
  imageUrl: '/img/品牌广告图片.jpg'
});

// 联系电话表单
const contactForm = reactive({
  phone: '400-888-8888',
  serviceTime: '周一至周五 9:00-18:00'
});

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

// 切换标签页
const handleTabChange = () => {
  selectedIndex.value = 0;
  loadFormData();
};

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

// 加载表单数据
const loadFormData = () => {
  const list = activeTab.value === 'triple' ? tripleAdList.value : iconAdList.value;
  const item = list[selectedIndex.value];
  if (item) {
    form.link = item.link;
    form.imageUrl = item.imageUrl;
  }
};

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

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

// 提交
const handleSubmit = () => {
  const list = activeTab.value === 'triple' ? tripleAdList.value : iconAdList.value;
  const item = list[selectedIndex.value];
  if (item) {
    item.link = form.link;
    item.imageUrl = form.imageUrl;
  }
  ElMessage.success('提交成功');
};

// 提交Logo
const handleSubmitLogo = () => {
  ElMessage.success('Logo提交成功');
};

// 提交联系电话
const handleSubmitContact = () => {
  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;
  min-height: 200px;
}

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

.ad-item {
  width: 200px;
  height: 140px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    border-color: #c0c4cc;
  }
  
  &.active {
    border-color: #409eff;
  }
  
  &.icon-item {
    width: 100px;
    height: 100px;
    background: #f5f7fa;
  }
  
  .ad-image {
    width: 100%;
    height: 100%;
  }
}

.logo-preview {
  .logo-item {
    width: 200px;
    height: 80px;
  }
  
  .logo-image {
    width: 100%;
    height: 100%;
  }
}

.contact-preview {
  padding: 20px 0;
}

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

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