<template>
  <div class="banners-page">
    <div class="page-header">
      <el-button type="primary" @click="openAdd">添加轮播图</el-button>
    </div>
    <div class="table-card">
      <el-table :data="banners">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column label="图片" width="150">
          <template #default="{ row }">
            <img :src="getImageUrl(row.image)" style="width: 120px; height: 60px; object-fit: cover; border-radius: 4px;" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="desc" label="描述" />
        <el-table-column prop="button" label="按钮文字" width="120" />
        <el-table-column prop="sort_order" label="排序" width="80" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.is_active ? 'success' : 'info'">
              {{ row.is_active ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="editBanner(row)">编辑</el-button>
            <el-button link :type="row.is_active ? 'warning' : 'success'" size="small" @click="toggleStatus(row)">
              {{ row.is_active ? '禁用' : '启用' }}
            </el-button>
            <el-button link type="danger" size="small" @click="deleteBanner(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="showAdd" :title="editing ? '编辑轮播图' : '添加轮播图'" width="600px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.desc" type="textarea" :rows="2" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="图片" required>
          <el-upload
            class="banner-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            :before-upload="beforeImageUpload"
            accept="image/*"
          >
            <img v-if="form.image" :src="getImageUrl(form.image)" class="banner-image" />
            <el-icon v-else class="banner-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div class="image-tip">建议尺寸: 1920x400px，支持 jpg、png、webp 格式</div>
        </el-form-item>
        <el-form-item label="链接类型">
          <el-radio-group v-model="linkType" @change="handleLinkTypeChange">
            <el-radio-button value="custom">自定义</el-radio-button>
            <el-radio-button value="product">商品</el-radio-button>
            <el-radio-button value="article">资讯</el-radio-button>
            <el-radio-button value="lottery">活动</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="链接" v-if="linkType === 'custom'">
          <el-input v-model="form.link" placeholder="点击跳转链接，如: /products" />
        </el-form-item>
        <el-form-item label="选择商品" v-if="linkType === 'product'">
          <el-select v-model="selectedProduct" placeholder="请选择商品" filterable @change="handleProductSelect" style="width: 100%">
            <el-option v-for="p in products" :key="p.id" :label="p.name" :value="p.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择资讯" v-if="linkType === 'article'">
          <el-select v-model="selectedArticle" placeholder="请选择资讯" filterable @change="handleArticleSelect" style="width: 100%">
            <el-option v-for="a in articles" :key="a.id" :label="a.title" :value="a.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择活动" v-if="linkType === 'lottery'">
          <el-select v-model="selectedLottery" placeholder="请选择活动" filterable @change="handleLotterySelect" style="width: 100%">
            <el-option v-for="l in lotteries" :key="l.id" :label="l.name" :value="l.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="按钮文字">
          <el-input v-model="form.button" placeholder="如: 立即选购" />
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-input v-model="form.bg_color" placeholder="如: linear-gradient(135deg, #4e6ef2 0%, #7c5cfc 100%)" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort_order" :min="0" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.is_active" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click="saveBanner">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { adminApi, productApi, articleApi, lotteryApi } from '../../api'
import { getImageUrl } from '../../utils/image'

const uploadUrl = import.meta.env.VITE_API_BASE_URL + '/upload'
const uploadHeaders = { Authorization: `Bearer ${localStorage.getItem('token')}` }

const banners = ref<any[]>([])
const products = ref<any[]>([])
const articles = ref<any[]>([])
const lotteries = ref<any[]>([])
const showAdd = ref(false)
const editing = ref<any>(null)
const linkType = ref('custom')
const selectedProduct = ref<number | null>(null)
const selectedArticle = ref<number | null>(null)
const selectedLottery = ref<number | null>(null)

const form = reactive({
  title: '',
  desc: '',
  image: '',
  link: '',
  button: '',
  bg_color: '',
  sort_order: 0,
  is_active: true
})

async function fetchBanners() {
  const res: any = await adminApi.getBanners()
  banners.value = res.data || []
}

async function fetchProducts() {
  const res: any = await productApi.list({ page: 1, page_size: 100 })
  products.value = res.data || []
}

async function fetchArticles() {
  const res: any = await articleApi.list({ page: 1, page_size: 100 })
  articles.value = res.data || []
}

async function fetchLotteries() {
  const res: any = await lotteryApi.list()
  lotteries.value = res.data || []
}

function handleLinkTypeChange() {
  form.link = ''
  selectedProduct.value = null
  selectedArticle.value = null
  selectedLottery.value = null
}

function handleProductSelect(productId: number) {
  form.link = `/products/${productId}`
}

function handleArticleSelect(articleId: number) {
  form.link = `/articles/${articleId}`
}

function handleLotterySelect(lotteryId: number) {
  form.link = `/lotteries/${lotteryId}`
}

function openAdd() {
  editing.value = null
  linkType.value = 'custom'
  selectedProduct.value = null
  selectedArticle.value = null
  selectedLottery.value = null
  Object.assign(form, { title: '', desc: '', image: '', link: '', button: '', bg_color: '', sort_order: 0, is_active: true })
  showAdd.value = true
}

function editBanner(row: any) {
  editing.value = row
  Object.assign(form, {
    title: row.title,
    desc: row.desc || '',
    image: row.image || '',
    link: row.link || '',
    button: row.button || '',
    bg_color: row.bg_color || '',
    sort_order: row.sort_order,
    is_active: row.is_active
  })
  
  // 根据链接判断类型
  if (row.link) {
    if (row.link.startsWith('/products/')) {
      linkType.value = 'product'
      const id = parseInt(row.link.split('/')[2])
      selectedProduct.value = isNaN(id) ? null : id
    } else if (row.link.startsWith('/articles/')) {
      linkType.value = 'article'
      const id = parseInt(row.link.split('/')[2])
      selectedArticle.value = isNaN(id) ? null : id
    } else if (row.link.startsWith('/lotteries/')) {
      linkType.value = 'lottery'
      const id = parseInt(row.link.split('/')[2])
      selectedLottery.value = isNaN(id) ? null : id
    } else {
      linkType.value = 'custom'
    }
  } else {
    linkType.value = 'custom'
  }
  
  showAdd.value = true
}

function beforeImageUpload(file: File) {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  return true
}

function handleImageSuccess(response: any) {
  if (response.url) {
    form.image = response.url
    ElMessage.success('图片上传成功')
  } else {
    ElMessage.error('上传失败')
  }
}

async function saveBanner() {
  if (!form.title || !form.image) {
    ElMessage.warning('请填写必填项')
    return
  }

  if (editing.value) {
    await adminApi.updateBanner(editing.value.id, form)
  } else {
    await adminApi.createBanner(form)
  }
  ElMessage.success('保存成功')
  showAdd.value = false
  editing.value = null
  await fetchBanners()
}

async function toggleStatus(row: any) {
  await adminApi.toggleBanner(row.id)
  ElMessage.success('操作成功')
  await fetchBanners()
}

async function deleteBanner(id: number) {
  await ElMessageBox.confirm('确定删除此轮播图？', '确认删除')
  await adminApi.deleteBanner(id)
  ElMessage.success('删除成功')
  await fetchBanners()
}

onMounted(async () => {
  await Promise.all([
    fetchBanners(),
    fetchProducts(),
    fetchArticles(),
    fetchLotteries()
  ])
})
</script>

<style scoped lang="scss">
.banners-page { padding: 0; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }

.banner-uploader {
  :deep(.el-upload) {
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    width: 300px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: #4e6ef2;
    }
  }
}

.banner-image {
  width: 300px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.banner-uploader-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.4);
}

.image-tip {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
</style>
