<template>
  <view class="admin-data-config anim-fade-in">
    <!-- 顶部标题 -->
    <view class="page-header border-shadow">
      <view class="header-left">
        <text class="page-title">数据配置</text>
      </view>
      <view class="header-right">
        <view class="btn-save" @click="handleSave">
          <text class="save-txt">保存</text>
        </view>
      </view>
    </view>

    <!-- 主内容区：三栏布局 -->
    <view class="main-content">
      <view class="card-container border-shadow">
        <!-- A. 左栏：配置分类菜单 -->
        <MenuSide 
          :categories="categories" 
          :activeKey="activeKey" 
          @change="k => activeKey = k" 
        />

        <!-- B. 中栏：手机预览 -->
        <PhonePreview 
          :activeKey="activeKey" 
          :activeLabel="activeLabel"
          :activeConfig="activeConfig"
        />

        <!-- C. 右栏：配置表单 -->
        <view class="settings-column">
          <view class="settings-header">
            <view class="title-marker"></view>
            <text class="settings-title">{{ activeTitle }}</text>
          </view>
          <view class="settings-desc-box">
             <text class="settings-desc">{{ activeCategory?.recommendSizeText }}</text>
          </view>

          <!-- 开屏广告特有字段 -->
          <view v-if="activeKey === 'ad'" class="ad-special-fields">
             <view class="form-row">
                <text class="field-label">开启广告</text>
                <switch :checked="activeConfig.enabled" @change="handleSwitchAd" color="#2d8cf0" />
             </view>
             <view class="form-row">
                <text class="field-label">广告时间</text>
                <view class="input-with-unit">
                   <input type="number" class="time-input" v-model="activeConfig.durationSeconds" />
                   <text class="unit-txt">单位(秒)</text>
                </view>
             </view>
          </view>

          <!-- 图片项编辑器 -->
          <view v-if="activeKey !== 'ad' || activeConfig.enabled">
             <CarouselEditor 
               :items="activeConfig.items" 
               :max="activeConfig.max"
               @add="handleAddItem"
               @remove="handleRemoveItem"
               @move="handleMove"
               @update-item="handleUpdateItem"
               @select-link="handleSelectLink"
             />
          </view>
          <view v-else class="ad-disabled-placeholder">
             <text class="disabled-txt">开屏广告已关闭，开启后可配置图片</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, computed, reactive } from 'vue'
import { type Category, type ConfigData, type LinkType } from '@/pages/mall/admin/decoration/components/types.uts'
import MenuSide from '@/pages/mall/admin/decoration/components/MenuSide.uvue'
import PhonePreview from '@/pages/mall/admin/decoration/components/PhonePreview.uvue'
import CarouselEditor from '@/pages/mall/admin/decoration/components/CarouselEditor.uvue'

// 状态定义
const activeKey = ref('jingpin')

const categories = reactive<Category[]>([
  { key: 'jingpin', label: '首页精品推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'hot', label: '热门榜单推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'new', label: '首发新品推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'promo', label: '促销单品推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'login', label: '后台登录页面幻灯片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'group', label: '拼团列表轮播图', type: 'carousel', recommendSizeText: '建议尺寸：710 * 300px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'points', label: '积分商城轮播图', type: 'carousel', recommendSizeText: '建议尺寸：710 * 300px，拖拽图片可调整图片顺序哦，最多添加五张' },
  { key: 'ad', label: '开屏广告', type: 'ad', recommendSizeText: '建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张' }
])

// 初始化数据
const configMap = reactive<Record<string, ConfigData>>({
  'jingpin': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/points_mall/integral_index' }, sort: 0 }] },
  'hot': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/index/index' }, sort: 0 }] },
  'new': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/index/index' }, sort: 0 }] },
  'promo': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/points_mall/integral_index' }, sort: 0 }] },
  'login': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '' }, sort: 0 }] },
  'group': { max: 5, items: [{ id: 1, name: '拼团', imageUrl: '', link: { type: 'internal', value: '/pages/activity/goods_combination/index' }, sort: 0 }] },
  'points': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/points_mall/integral_index' }, sort: 0 }] },
  'ad': { enabled: false, durationSeconds: 3, max: 5, items: [] }
})

// 计算属性
const activeCategory = computed(() => categories.find(c => c.key === activeKey.value))
const activeLabel = computed(() => activeCategory.value?.label ?? '')
const activeConfig = computed(() => configMap[activeKey.value])
const activeTitle = computed(() => {
  if (activeKey.value === 'ad') return '引导页设置'
  if (activeKey.value === 'login') return '幻灯片设置'
  return '轮播图设置'
})

// 方法
const handleSave = () => {
  uni.showLoading({ title: '保存中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '保存成功', icon: 'success' })
  }, 800)
}

const handleSwitchAd = (e: any) => {
  configMap['ad'].enabled = e.detail.value
}

const handleAddItem = () => {
  const config = activeConfig.value
  if (config.items.length >= config.max) {
    uni.showToast({ title: `最多添加 ${config.max} 条`, icon: 'none' })
    return
  }
  config.items.push({
    id: Date.now(),
    name: (config.items.length + 1).toString(),
    imageUrl: '',
    link: { type: 'internal', value: '' },
    sort: config.items.length
  })
}

const handleRemoveItem = (index: number) => {
  activeConfig.value.items.splice(index, 1)
}

const handleMove = (index: number, direction: number) => {
  const items = activeConfig.value.items
  const targetIndex = index + direction
  if (targetIndex < 0 || targetIndex >= items.length) return
  
  const temp = items[index]
  items[index] = items[targetIndex]
  items[targetIndex] = temp
}

const handleUpdateItem = (payload: any) => {
  const { index, key, value } = payload
  activeConfig.value.items[index][key] = value
}

const handleSelectLink = (index: number) => {
  uni.showActionSheet({
    itemList: ['内部页面', '外部链接', '其他小程序'],
    success: (res) => {
      const types: LinkType[] = ['internal', 'external', 'miniProgram']
      activeConfig.value.items[index].link.type = types[res.tapIndex]
      uni.showToast({ title: '功能建设中', icon: 'none' })
    }
  })
}
</script>

<style scoped lang="scss">
.admin-data-config {
  background-color: #f0f2f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.border-shadow {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.page-header {
  height: 60px;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.page-title { font-size: 16px; font-weight: bold; color: #333; }

.btn-save {
  background-color: #2d8cf0;
  padding: 6px 24px;
  border-radius: 4px;
  cursor: pointer;
}
.save-txt { color: #fff; font-size: 14px; }

.main-content {
  flex: 1;
  padding: 24px;
}

.card-container {
  display: flex;
  flex-direction: row;
  min-height: 800px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* 右侧设置 */
.settings-column {
  flex: 1;
  padding: 30px;
  background-color: #fff;
}

.settings-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8px;
}
.title-marker { width: 3px; height: 16px; background-color: #1890ff; margin-right: 10px; border-radius: 2px; }
.settings-title { font-size: 16px; font-weight: bold; color: #333; }

.settings-desc-box { margin-bottom: 24px; padding-left: 13px; }
.settings-desc { font-size: 13px; color: #999; }

/* 开屏广告特有样式 */
.ad-special-fields { padding: 20px; background-color: #f6f8fb; border-radius: 8px; margin-bottom: 20px; }
.form-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 15px; }
.field-label { width: 80px; font-size: 14px; color: #333; }
.input-with-unit { display: flex; flex-direction: row; align-items: center; }
.time-input { width: 80px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 10px; margin-right: 8px; background-color: #fff; }
.unit-txt { font-size: 12px; color: #999; }

.ad-disabled-placeholder { height: 200px; display: flex; align-items: center; justify-content: center; border: 1px dashed #eee; border-radius: 8px; }
.disabled-txt { color: #999; font-size: 14px; }

.anim-fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>
