<template>
  <div class="long-ad-page">
    <div class="long-ad-container">
      <!-- 广告区域（独立卡片） -->
      <div class="ad-card">
        <div class="ad-header">
          <span class="ad-title">首页横幅广告</span>
        </div>

        <!-- 广告图片展示 -->
        <div class="ad-preview">
          <el-image :src="adData.imageUrl" fit="cover" lazy class="ad-image">
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
                <span>暂无图片</span>
              </div>
            </template>
          </el-image>
        </div>

        <!-- 编辑表单 -->
        <div class="ad-form">
          <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="upload-area">
                <div class="image-preview" v-if="form.imageUrl">
                  <el-image :src="form.imageUrl" fit="cover" style="width: 200px; height: 80px; border-radius: 4px" />
                </div>
                <el-button icon="Upload" @click="handleUpload">选择上传文件</el-button>
                <span class="upload-tip">建议尺寸：1200 x 300 像素</span>
              </div>
            </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="GiftLongAd" lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Picture } from '@element-plus/icons-vue';

// 广告数据
const adData = ref({
  imageUrl: '/img/长图广告.jpg',
  link: ''
});

// 表单数据
const form = reactive({
  link: '',
  imageUrl: '/img/长图广告.jpg'
});

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

// 提交
const handleSubmit = () => {
  adData.value.imageUrl = form.imageUrl;
  adData.value.link = form.link;
  ElMessage.success('提交成功');
};
</script>

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

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

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

.ad-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.ad-title {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

.ad-preview {
  margin-bottom: 20px;
  
  .ad-image {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
  }
}

.image-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
  
  .el-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }
}

.ad-form {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.upload-area {
  display: flex;
  align-items: center;
  gap: 15px;
  
  .image-preview {
    flex-shrink: 0;
  }
  
  .upload-tip {
    color: #909399;
    font-size: 12px;
  }
}
</style>
