<template>
  <div class="product-group-container">
    <!-- 主容器 -->
    <el-card class="main-container" shadow="never">
      <!-- Tab切换 -->
      <el-tabs v-model="activeTab" class="main-tabs">
        <el-tab-pane label="商品分组" name="group">
          <!-- 操作栏 -->
          <div class="filter-section">
            <div class="filter-content">
              <el-form :inline="true" :model="queryParams" class="search-form">
                <el-form-item label="层级筛选">
                  <el-select v-model="queryParams.level" placeholder="全部层级" clearable style="width: 120px" @change="fetchGroupList">
                    <el-option label="一级" :value="1" />
                    <el-option label="二级" :value="2" />
                    <el-option label="三级" :value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="状态筛选">
                  <el-select v-model="queryParams.disable" placeholder="全部状态" clearable style="width: 120px" @change="fetchGroupList">
                    <el-option label="启用" :value="false" />
                    <el-option label="禁用" :value="true" />
                  </el-select>
                </el-form-item>
                <el-form-item label="关键词">
                  <el-input v-model="queryParams.key" placeholder="搜索分组名称" clearable style="width: 180px" @keyup.enter="fetchGroupList" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="fetchGroupList">
                    <el-icon><Search /></el-icon>查询
                  </el-button>
                  <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <div class="action-bar">
                <el-button type="primary" @click="handleAdd(null)">
                  <el-icon><Plus /></el-icon>新增顶级分组
                </el-button>
                <el-button type="success" @click="fetchGroupList">
                  <el-icon><Refresh /></el-icon>刷新
                </el-button>
                <el-button :type="viewMode === 'tree' ? 'primary' : 'default'" @click="viewMode = 'tree'">
                  树形视图
                </el-button>
                <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
                  列表视图
                </el-button>
              </div>
            </div>
          </div>

      <!-- 商品分组列表 -->
      <div class="table-section">
        <!-- 骨架屏 -->
        <div v-if="loading" class="skeleton-container">
          <div v-for="i in 5" :key="i" class="skeleton-row">
            <div class="skeleton-cell skeleton-id"></div>
            <div class="skeleton-cell skeleton-name"></div>
            <div class="skeleton-cell skeleton-note"></div>
            <div class="skeleton-cell skeleton-level"></div>
            <div class="skeleton-cell skeleton-status"></div>
            <div class="skeleton-cell skeleton-action"></div>
          </div>
        </div>

        <!-- 树形表格视图 -->
        <el-table
          v-else-if="viewMode === 'tree'"
          :data="treeData"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
          default-expand-all
        >
          <el-table-column prop="name" label="分组名称" min-width="250">
            <template #default="{ row }">
              <div class="group-name-cell">
                <el-avatar v-if="row.cover" :size="32" :src="row.cover" />
                <el-avatar v-else :size="32" style="background: #409eff">
                  <el-icon><Folder /></el-icon>
                </el-avatar>
                <span class="group-name">{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column label="层级" width="100">
            <template #default="{ row }">
              <el-tag :type="getLevelType(row.level)" size="small">
                {{ getLevelText(row.level) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注" min-width="200" show-overflow-tooltip />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-switch
                v-model="row.disable"
                :active-value="false"
                :inactive-value="true"
                @change="(val) => handleStatusChange(row, val)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button type="success" link @click="handleAdd(row)" v-if="row.level < 3">添加子级</el-button>
                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 列表视图 -->
        <el-table
          v-else
          :data="groupList"
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
        >
          <el-table-column prop="id" label="分组ID" width="100" />
          <el-table-column prop="name" label="分组名称" min-width="200">
            <template #default="{ row }">
              <div class="group-name-cell">
                <el-avatar v-if="row.cover" :size="32" :src="row.cover" />
                <span class="group-name">{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="层级" width="100">
            <template #default="{ row }">
              <el-tag :type="getLevelType(row.level)" size="small">
                {{ getLevelText(row.level) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="父级分组" width="150">
            <template #default="{ row }">
              <span v-if="row.parentId">{{ getParentName(row.parentId) }}</span>
              <span v-else class="text-muted">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注" min-width="200" show-overflow-tooltip />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-switch
                v-model="row.disable"
                :active-value="false"
                :inactive-value="true"
                @change="(val) => handleStatusChange(row, val)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <el-pagination
          v-if="viewMode === 'list'"
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.count"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          class="pagination"
        />
      </div>
        </el-tab-pane>

        <!-- 分组标签管理 -->
        <el-tab-pane label="分组标签" name="tag">
          <div class="filter-section">
            <div class="filter-content">
              <el-form :inline="true" :model="tagQueryParams" class="search-form">
                <el-form-item label="关键词">
                  <el-input v-model="tagQueryParams.key" placeholder="搜索标签名称" clearable style="width: 180px" @keyup.enter="fetchTagList" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="fetchTagList">
                    <el-icon><Search /></el-icon>查询
                  </el-button>
                  <el-button @click="resetTagQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <div class="action-bar">
                <el-button type="primary" @click="handleAddTag">
                  <el-icon><Plus /></el-icon>新增标签
                </el-button>
                <el-button type="success" @click="fetchTagList">
                  <el-icon><Refresh /></el-icon>刷新
                </el-button>
              </div>
            </div>
          </div>
          <div class="table-section">
            <el-table
              v-loading="tagLoading"
              :data="tagList"
              style="width: 100%"
              :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
            >
              <el-table-column prop="id" label="标签ID" width="100" />
              <el-table-column prop="name" label="标签名称" min-width="200" />
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button type="primary" link @click="handleEditTag(row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDeleteTag(row)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="tagQueryParams.page"
              v-model:page-size="tagQueryParams.count"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tagTotal"
              @size-change="handleTagSizeChange"
              @current-change="handleTagCurrentChange"
              background
              class="pagination"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 商品分组表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      append-to-body
    >
      <el-form
        ref="groupFormRef"
        :model="groupForm"
        :rules="groupRules"
        label-width="100px"
      >
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="groupForm.name" placeholder="请输入分组名称" />
        </el-form-item>
        <el-form-item label="父级分组" prop="parent_id">
          <div class="recommend-user-selector">
            <el-input 
              :model-value="selectedParentName" 
              placeholder="无父级（顶级分组）" 
              readonly 
              @click="showParentSelector = true"
            >
              <template #append>
                <el-button @click="showParentSelector = true">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
            <el-button 
              v-if="groupForm.parent_id" 
              type="danger" 
              link 
              @click="clearParent"
              class="clear-btn"
            >
              清除
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="分组层级" prop="level">
          <el-select v-model="groupForm.level" placeholder="请选择层级" style="width: 100%" disabled>
            <el-option label="一级" :value="1" />
            <el-option label="二级" :value="2" />
            <el-option label="三级" :value="3" />
          </el-select>
          <div class="form-tip">层级根据父级分组自动计算</div>
        </el-form-item>
        <el-form-item label="分组封面" prop="cover_id">
          <div class="recommend-user-selector">
            <el-input 
              :model-value="groupForm.cover_id ? `文件ID: ${groupForm.cover_id}` : ''" 
              placeholder="点击选择封面图片" 
              readonly 
              @click="showCoverSelector = true"
            >
              <template #append>
                <el-button @click="showCoverSelector = true">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
            <el-button 
              v-if="groupForm.cover_id" 
              type="danger" 
              link 
              @click="groupForm.cover_id = undefined"
              class="clear-btn"
            >
              清除
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="分组标签" prop="tag_id">
          <div class="recommend-user-selector">
            <el-input 
              :model-value="selectedTagName" 
              placeholder="点击选择分组标签" 
              readonly 
              @click="showTagSelector = true"
            >
              <template #append>
                <el-button @click="showTagSelector = true">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
            <el-button 
              v-if="groupForm.tag_id" 
              type="danger" 
              link 
              @click="clearTag"
              class="clear-btn"
            >
              清除
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="groupForm.note" type="textarea" :rows="4" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="状态" prop="disable">
          <el-radio-group v-model="groupForm.disable">
            <el-radio :value="false">启用</el-radio>
            <el-radio :value="true">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 父级分组选择弹窗 -->
    <el-dialog
      v-model="showParentSelector"
      title="选择父级分组"
      width="600px"
      append-to-body
    >
      <el-table
        :data="parentOptions"
        highlight-current-row
        @current-change="handleParentSelect"
        :height="400"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="分组名称" min-width="150" />
        <el-table-column label="层级" width="100">
          <template #default="{ row }">
            <el-tag :type="getLevelType(row.level)" size="small">
              {{ getLevelText(row.level) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="showParentSelector = false">取消</el-button>
        <el-button type="primary" @click="confirmParentSelect">确定</el-button>
      </template>
    </el-dialog>

    <!-- 封面选择器 -->
    <AvatarSelector
      v-model="showCoverSelector"
      :user-id="1"
      :current-cover-id="groupForm.cover_id"
      @confirm="handleCoverSelect"
    />

    <!-- 分组标签表单对话框 -->
    <el-dialog
      v-model="tagDialogVisible"
      :title="tagDialogType === 'add' ? '新增分组标签' : '编辑分组标签'"
      width="500px"
      append-to-body
    >
      <el-form
        ref="tagFormRef"
        :model="tagForm"
        :rules="tagRules"
        label-width="100px"
      >
        <el-form-item label="标签名称" prop="name">
          <el-input v-model="tagForm.name" placeholder="请输入标签名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tagDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTagForm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分组标签选择弹窗 -->
    <el-dialog
      v-model="showTagSelector"
      title="选择分组标签"
      width="600px"
      append-to-body
    >
      <div class="tag-selector-header">
        <el-input 
          v-model="tagSelectorSearch" 
          placeholder="搜索标签名称" 
          clearable 
          style="width: 200px"
          @keyup.enter="fetchTagOptionsForSelector"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="fetchTagOptionsForSelector">搜索</el-button>
      </div>
      <el-table
        v-loading="tagSelectorLoading"
        :data="tagOptionsForSelector"
        highlight-current-row
        @current-change="handleTagSelect"
        :height="350"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="标签名称" min-width="150">
          <template #default="{ row }">
            <el-tag type="primary">{{ row.name }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="showTagSelector = false">取消</el-button>
        <el-button type="primary" @click="confirmTagSelect">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Search, Folder } from '@element-plus/icons-vue'
import { 
  getProductGroupList, 
  createProductGroup, 
  updateProductGroup, 
  deleteProductGroup,
  hideProductGroup,
  startProductGroup,
  getProductGroupTagList,
  createProductGroupTag,
  updateProductGroupTag,
  deleteProductGroupTag
} from '@/api/admin/product'
import AvatarSelector from '@/components/admin/AvatarSelector.vue'

// Tab切换
const activeTab = ref('group')

// 视图模式
const viewMode = ref('tree')

// 查询参数
const queryParams = reactive({
  page: 1,
  count: 10, // 列表视图分页
  level: undefined,
  disable: undefined,
  key: ''
})

// 监听视图模式变化
watch(viewMode, (newVal) => {
  if (newVal === 'tree') {
    // 树形视图获取全部数据
    queryParams.count = 1000
  } else {
    // 列表视图使用分页
    queryParams.count = 10
    queryParams.page = 1
  }
  fetchGroupList()
})

// 商品分组表单
const groupForm = reactive({
  id: undefined,
  name: '',
  note: '',
  disable: false,
  level: 1,
  parent_id: undefined,
  cover_id: undefined,
  tag_id: undefined
})

const groupRules = {
  name: [
    { required: true, message: '请输入分组名称', trigger: 'blur' }
  ]
}

// 状态数据
const loading = ref(false)
const groupList = ref([])
const allGroupList = ref([]) // 用于树形构建
const total = ref(0)
const dialogVisible = ref(false)
const dialogType = ref('add')
const dialogTitle = computed(() => {
  if (dialogType.value === 'add') {
    return groupForm.parent_id ? '添加子级分组' : '新增顶级分组'
  }
  return '编辑商品分组'
})
const groupFormRef = ref(null)

// 父级选择相关
const showParentSelector = ref(false)
const showCoverSelector = ref(false)
const selectedParent = ref(null)
const selectedParentName = computed(() => {
  if (groupForm.parent_id) {
    const parent = allGroupList.value.find(g => g.id === groupForm.parent_id)
    return parent ? `${parent.name} (ID: ${parent.id})` : `分组ID: ${groupForm.parent_id}`
  }
  return ''
})
const parentOptions = computed(() => {
  // 只能选择层级1或2的作为父级
  return allGroupList.value.filter(g => g.level < 3 && g.id !== groupForm.id)
})

// 标签选择相关
const showTagSelector = ref(false)
const tagSelectorLoading = ref(false)
const tagSelectorSearch = ref('')
const tagOptionsForSelector = ref([])
const selectedTag = ref(null)
const allTagOptions = ref([]) // 存储所有标签用于显示名称

const selectedTagName = computed(() => {
  if (groupForm.tag_id) {
    const tag = allTagOptions.value.find(t => t.id === groupForm.tag_id)
    return tag ? `${tag.name} (ID: ${tag.id})` : `标签ID: ${groupForm.tag_id}`
  }
  return ''
})

// 获取标签选项（用于选择器）
const fetchTagOptionsForSelector = async () => {
  tagSelectorLoading.value = true
  try {
    const params = { page: 1, count: 100 }
    if (tagSelectorSearch.value) {
      params.key = tagSelectorSearch.value
    }
    const res = await getProductGroupTagList(params)
    if (res.data.code === 200) {
      const data = res.data.data
      if (Array.isArray(data)) {
        tagOptionsForSelector.value = data
      } else if (data && data.list) {
        tagOptionsForSelector.value = data.list
      } else if (data && data.data) {
        tagOptionsForSelector.value = data.data
      } else {
        tagOptionsForSelector.value = []
      }
      // 同时更新allTagOptions
      if (!tagSelectorSearch.value) {
        allTagOptions.value = tagOptionsForSelector.value
      }
    }
  } catch (error) {
    console.error('获取标签列表失败:', error)
  } finally {
    tagSelectorLoading.value = false
  }
}

// 初始化获取所有标签
const fetchAllTagOptions = async () => {
  try {
    const res = await getProductGroupTagList({ page: 1, count: 1000 })
    if (res.data.code === 200) {
      const data = res.data.data
      if (Array.isArray(data)) {
        allTagOptions.value = data
      } else if (data && data.list) {
        allTagOptions.value = data.list
      } else if (data && data.data) {
        allTagOptions.value = data.data
      }
    }
  } catch (error) {
    console.error('获取标签列表失败:', error)
  }
}

// 标签选择
const handleTagSelect = (row) => {
  selectedTag.value = row
}

const confirmTagSelect = () => {
  if (selectedTag.value) {
    groupForm.tag_id = selectedTag.value.id
    showTagSelector.value = false
    selectedTag.value = null
  }
}

const clearTag = () => {
  groupForm.tag_id = undefined
}

// 监听标签选择弹窗打开
watch(showTagSelector, (val) => {
  if (val) {
    tagSelectorSearch.value = ''
    fetchTagOptionsForSelector()
  }
})

// 构建树形数据
const treeData = computed(() => {
  const list = allGroupList.value
  const map = new Map()
  const roots = []
  
  // 创建映射
  list.forEach(item => {
    map.set(item.id, { ...item, children: [] })
  })
  
  // 构建树
  list.forEach(item => {
    const node = map.get(item.id)
    if (item.parentId && map.has(item.parentId)) {
      map.get(item.parentId).children.push(node)
    } else {
      roots.push(node)
    }
  })
  
  return roots
})

// 获取层级文本
const getLevelText = (level) => {
  const map = { 1: '一级', 2: '二级', 3: '三级' }
  return map[level] || `${level}级`
}

// 获取层级类型
const getLevelType = (level) => {
  const map = { 1: 'primary', 2: 'success', 3: 'warning' }
  return map[level] || 'info'
}

// 获取父级名称
const getParentName = (parentId) => {
  const parent = allGroupList.value.find(g => g.id === parentId)
  return parent ? parent.name : `ID: ${parentId}`
}

// 获取商品分组列表
const fetchGroupList = async () => {
  loading.value = true
  try {
    const params = { ...queryParams }
    if (params.level === undefined) delete params.level
    if (params.disable === undefined) delete params.disable
    if (!params.key) delete params.key
    
    const res = await getProductGroupList(params)
    if (res.data.code === 200) {
      const data = res.data.data.data || []
      allGroupList.value = data
      groupList.value = data
      total.value = res.data.data.total || data.length
    }
  } catch (error) {
    ElMessage.error('获取商品分组列表失败')
  } finally {
    loading.value = false
  }
}

// 重置查询
const resetQuery = () => {
  queryParams.level = undefined
  queryParams.disable = undefined
  queryParams.key = ''
  queryParams.page = 1
  fetchGroupList()
}

// 分页
const handleSizeChange = (size) => {
  queryParams.count = size
  fetchGroupList()
}

const handleCurrentChange = (page) => {
  queryParams.page = page
  fetchGroupList()
}

// 新增商品分组
const handleAdd = (parentRow) => {
  dialogType.value = 'add'
  dialogVisible.value = true
  
  if (parentRow) {
    // 添加子级
    Object.assign(groupForm, {
      id: undefined,
      name: '',
      note: '',
      disable: false,
      level: parentRow.level + 1,
      parent_id: parentRow.id,
      cover_id: undefined,
      tag_id: undefined
    })
  } else {
    // 添加顶级
    Object.assign(groupForm, {
      id: undefined,
      name: '',
      note: '',
      disable: false,
      level: 1,
      parent_id: undefined,
      cover_id: undefined,
      tag_id: undefined
    })
  }
  groupFormRef.value?.resetFields()
}

// 编辑商品分组
const handleEdit = (row) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  Object.assign(groupForm, {
    id: row.id,
    name: row.name,
    note: row.note,
    disable: row.disable,
    level: row.level || 1,
    parent_id: row.parentId,
    cover_id: row.coverId,
    tag_id: row.tagId
  })
}

// 清除父级
const clearParent = () => {
  groupForm.parent_id = undefined
  groupForm.level = 1
}

// 父级选择
const handleParentSelect = (row) => {
  selectedParent.value = row
}

const confirmParentSelect = () => {
  if (selectedParent.value) {
    groupForm.parent_id = selectedParent.value.id
    groupForm.level = selectedParent.value.level + 1
    showParentSelector.value = false
    selectedParent.value = null
  }
}

// 封面选择
const handleCoverSelect = (file) => {
  groupForm.cover_id = file.cover_id
}

// 状态变化
const handleStatusChange = async (row, disable) => {
  try {
    let res
    if (disable === false) {
      res = await startProductGroup({ id: row.id })
    } else {
      res = await hideProductGroup({ id: row.id })
    }
    if (res.data.code === 200) {
      ElMessage.success('状态修改成功')
    }
  } catch (error) {
    ElMessage.error('状态修改失败')
    row.disable = !disable
  }
}

// 删除商品分组
const handleDelete = (row) => {
  // 检查是否有子级
  const hasChildren = allGroupList.value.some(g => g.parentId === row.id)
  if (hasChildren) {
    ElMessage.warning('该分组下有子分组，请先删除子分组')
    return
  }
  
  ElMessageBox.confirm(`确认删除商品分组 ${row.name} 吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteProductGroup({ id: row.id })
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
        fetchGroupList()
      }
    } catch (error) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

// 提交表单
const submitForm = () => {
  groupFormRef.value?.validate(async (valid) => {
    if (valid) {
      // 检查必填字段
      if (!groupForm.name || !groupForm.name.trim()) {
        ElMessage.warning('请输入分组名称')
        return
      }
      
      try {
        const submitData = {
          name: groupForm.name.trim(),
          note: groupForm.note || '',
          disable: groupForm.disable,
          level: String(groupForm.level || 1)
        }
        // 只有有值时才传递这些字段，避免外键约束错误
        if (groupForm.parent_id) {
          submitData.parent_id = groupForm.parent_id
        }
        if (groupForm.cover_id) {
          submitData.cover_id = groupForm.cover_id
        }
        if (groupForm.tag_id) {
          submitData.tag_id = groupForm.tag_id
        }
        console.log('提交数据:', submitData)
        let res
        if (dialogType.value === 'add') {
          res = await createProductGroup(submitData)
        } else {
          submitData.id = groupForm.id
          res = await updateProductGroup(submitData)
        }
        if (res.data.code === 200) {
          ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
          dialogVisible.value = false
          fetchGroupList()
        }
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }
  })
}

// ==================== 分组标签管理 ====================
const tagQueryParams = reactive({
  page: 1,
  count: 10,
  key: ''
})

const tagLoading = ref(false)
const tagList = ref([])
const tagTotal = ref(0)
const tagDialogVisible = ref(false)
const tagDialogType = ref('add')
const tagFormRef = ref(null)
const tagForm = reactive({
  id: undefined,
  name: ''
})

const tagRules = {
  name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
}

// 获取标签列表
const fetchTagList = async () => {
  tagLoading.value = true
  try {
    const params = { ...tagQueryParams }
    if (!params.key) delete params.key
    
    const res = await getProductGroupTagList(params)
    if (res.data.code === 200) {
      const data = res.data.data
      if (Array.isArray(data)) {
        tagList.value = data
        tagTotal.value = data.length
      } else if (data && data.list) {
        tagList.value = data.list
        tagTotal.value = data.all_count || data.total || data.list.length
      } else if (data && data.data) {
        tagList.value = data.data
        tagTotal.value = data.total || data.data.length
      } else {
        tagList.value = []
        tagTotal.value = 0
      }
    }
  } catch (error) {
    console.error('获取标签列表失败:', error)
    ElMessage.error('获取标签列表失败')
  } finally {
    tagLoading.value = false
  }
}

// 重置标签查询
const resetTagQuery = () => {
  tagQueryParams.key = ''
  tagQueryParams.page = 1
  fetchTagList()
}

// 标签分页
const handleTagSizeChange = (size) => {
  tagQueryParams.count = size
  fetchTagList()
}

const handleTagCurrentChange = (page) => {
  tagQueryParams.page = page
  fetchTagList()
}

// 新增标签
const handleAddTag = () => {
  tagDialogType.value = 'add'
  tagDialogVisible.value = true
  Object.assign(tagForm, {
    id: undefined,
    name: ''
  })
  tagFormRef.value?.resetFields()
}

// 编辑标签
const handleEditTag = (row) => {
  tagDialogType.value = 'edit'
  tagDialogVisible.value = true
  Object.assign(tagForm, {
    id: row.id,
    name: row.name
  })
}

// 删除标签
const handleDeleteTag = (row) => {
  ElMessageBox.confirm(`确认删除标签 ${row.name} 吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteProductGroupTag({ id: row.id })
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
        fetchTagList()
      }
    } catch (error) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

// 提交标签表单
const submitTagForm = () => {
  tagFormRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        let res
        if (tagDialogType.value === 'add') {
          res = await createProductGroupTag({ name: tagForm.name })
        } else {
          res = await updateProductGroupTag({ id: tagForm.id, name: tagForm.name })
        }
        if (res.data.code === 200) {
          ElMessage.success(tagDialogType.value === 'add' ? '新增成功' : '修改成功')
          tagDialogVisible.value = false
          fetchTagList()
        }
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }
  })
}

// 监听Tab切换
watch(activeTab, (newVal) => {
  if (newVal === 'tag') {
    fetchTagList()
  }
})

// 初始化
onMounted(() => {
  fetchGroupList()
  fetchAllTagOptions() // 获取所有标签用于显示名称
})
</script>

<style scoped>
.product-group-container {
  padding: 0;
}

.main-container {
  border: 1px solid #e1e8ed;
  background: #ffffff;
}

.main-tabs {
  padding: 0 20px;
}

.tag-selector-header {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
}

:deep(.el-tabs__content) {
  padding: 0;
}

.filter-section {
  padding: 0;
  border-bottom: 1px solid #e1e8ed;
  background: #fafbfc;
}

.filter-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  gap: 20px;
  flex-wrap: wrap;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 0;
}

.action-bar {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.table-section {
  padding: 0;
}

.group-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-name {
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  padding: 16px 20px;
  border-top: 1px solid #e1e8ed;
  background: #fafbfc;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
}

.text-muted {
  color: #909399;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 推介人选择器样式 */
.recommend-user-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.recommend-user-selector .el-input {
  flex: 1;
}

.recommend-user-selector .clear-btn {
  flex-shrink: 0;
}

/* 表格样式优化 */
:deep(.el-table) {
  border: none;
  color: #2c3e50;
}

:deep(.el-table__header) {
  background: #f8f9fa;
}

:deep(.el-table th) {
  background: #f8f9fa !important;
  border-bottom: 2px solid #e1e8ed;
  color: #2c3e50;
  font-weight: 600;
  font-size: 13px;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f0f2f5;
  color: #34495e;
}

:deep(.el-table tr:hover > td) {
  background-color: #f8f9fa !important;
}

:deep(.el-card__body) {
  padding: 0;
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 20px;
}

.skeleton-row {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 16px;
}

.skeleton-row:last-child {
  border-bottom: none;
}

.skeleton-cell {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-id { width: 80px; }
.skeleton-name { width: 200px; }
.skeleton-note { flex: 1; min-width: 150px; }
.skeleton-level { width: 100px; }
.skeleton-status { width: 100px; }
.skeleton-action { width: 180px; height: 32px; }

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .filter-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .search-form {
    flex-direction: column;
    width: 100%;
  }
  
  .search-form :deep(.el-form-item) {
    width: 100%;
  }
  
  .search-form :deep(.el-input),
  .search-form :deep(.el-select) {
    width: 100% !important;
  }
  
  .action-bar {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>
