<template>
  <div class="app-container">
    <!-- 一级分类管理区域 -->
    <el-card shadow="hover" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold; color: #409EFF;">一级分类管理</span>
        <div style="float: right;">
          <el-input
            v-model="firstLevelSearch"
            placeholder="请输入一级分类名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="width: 200px; margin-right: 10px;"
          />
          <el-button type="primary" size="small" @click="handleAddFirstLevel">
            <i class="el-icon-plus"></i> 添加一级分类
          </el-button>
        </div>
      </div>
      
      <!-- 一级分类网格布局 -->
      <div class="category-grid">
        <div
          v-for="category in displayedFirstLevelList"
          :key="category.id"
          class="category-card"
          :class="{ active: selectedFirstLevel && selectedFirstLevel.id === category.id }"
          @click="selectFirstLevel(category)"
        >
          <!-- 卡片主体内容 -->
          <div class="card-content">
            <!-- 图标区域 -->
            <div class="card-icon">
              <image-preview 
                v-if="category.icon" 
                :src="category.icon" 
                :width="32" 
                :height="32"
                style="border-radius: 4px;"
              />
              <div v-else class="default-icon-small">
                <i class="el-icon-folder" style="font-size: 20px; color: #409EFF;"></i>
              </div>
            </div>
            
            <!-- 信息区域 -->
            <div class="card-info">
              <div class="card-title">{{ category.title }}</div>
              <div class="card-meta">
                <dict-tag :options="dict.type.service_sate_type" :value="category.type" size="mini"/>
                <el-tag 
                  size="mini" 
                  :type="category.status === 1 ? 'success' : 'danger'"
                  effect="light"
                >
                  {{ category.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </div>
              <div class="card-stats">
                <span class="stat-item">
                  <i class="el-icon-view"></i> {{ category.browse || 0 }}
                </span>
                <span class="stat-item" v-if="getSubCategoryCount(category.id) > 0">
                  <i class="el-icon-document"></i> {{ getSubCategoryCount(category.id) }}
                </span>
                <span class="stat-item">
                  <i class="el-icon-sort"></i> {{ category.sort }}
                </span>
              </div>
            </div>
          </div>
          
          <!-- 操作区域 -->
          <div class="card-actions">
            <div class="action-buttons">
              <el-tooltip content="编辑分类" placement="top">
                <el-button 
                  size="mini" 
                  type="primary" 
                  plain
                  @click.stop="handleEditFirstLevel(category)"
                  class="action-btn edit-btn"
                >
                  <i class="el-icon-edit"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除分类" placement="top">
                <el-button 
                  size="mini" 
                  type="danger" 
                  plain
                  @click.stop="handleDeleteFirstLevel(category)"
                  class="action-btn delete-btn"
                >
                  <i class="el-icon-delete"></i>
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 显示更多按钮和统计信息 -->
      <div class="grid-footer">
        <div class="grid-stats">
          <span class="stats-text">
            显示 {{ displayedFirstLevelList.length }} / {{ filteredFirstLevelList.length }} 个分类
          </span>
        </div>
        <div class="grid-actions">
          <el-button 
            v-if="shouldShowMoreButton"
            type="text" 
            size="small"
            @click="showAllFirstLevel = true"
          >
            <i class="el-icon-arrow-down"></i> 显示更多 ({{ filteredFirstLevelList.length - defaultShowCount }})
          </el-button>
          <el-button 
            v-if="showAllFirstLevel && !firstLevelSearch"
            type="text" 
            size="small"
            @click="showAllFirstLevel = false"
          >
            <i class="el-icon-arrow-up"></i> 收起
          </el-button>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="firstLevelList.length === 0" class="empty-state">
        <i class="el-icon-folder-add" style="font-size: 48px; color: #ddd;"></i>
        <p style="color: #999; margin-top: 20px;">暂无一级分类</p>
      </div>
    </el-card>

    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold; color: #67C23A;">
          二级分类管理
          <span v-if="selectedFirstLevel" style="color: #909399; font-size: 12px;">
            ({{ selectedFirstLevel.title }} · 共{{ filteredSecondLevelList.length }}个)
          </span>
        </span>
        <div style="float: right;">
          <el-input
            v-if="selectedFirstLevel"
            v-model="secondLevelSearch"
            placeholder="请输入二级分类名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="width: 200px; margin-right: 10px;"
          />
          <el-button 
            v-if="selectedFirstLevel" 
            type="success" 
            size="small" 
            @click="handleAddSecondLevel"
          >
            <i class="el-icon-plus"></i> 添加二级分类
          </el-button>
        </div>
      </div>

      <!-- 未选择一级分类时的提示 -->
      <div v-if="!selectedFirstLevel" class="empty-state">
        <i class="el-icon-info" style="font-size: 48px; color: #ddd;"></i>
        <p style="color: #999; margin-top: 20px;">请先选择上方的一级分类</p>
      </div>

      <!-- 二级分类表格 -->
      <div v-else>
        <el-table 
          :data="filteredSecondLevelList" 
          border 
          style="width: 100%"
          :empty-text="'暂无二级分类'"
        >
          <el-table-column label="父级分类" width="100" align="center">
            <template>
              <el-tag size="mini" type="primary" effect="light">
                {{ selectedFirstLevel.title }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="title" label="分类名称" width="150">
            <template slot-scope="scope">
              <i class="el-icon-document" style="margin-right: 8px; color: #67C23A;"></i>
              {{ scope.row.title }}
            </template>
          </el-table-column>
          
          <el-table-column prop="sort" label="排序" width="60" align="center">
            <template slot-scope="scope">
              <el-tag size="mini" effect="plain">{{ scope.row.sort }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="状态" width="60" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          
          <el-table-column prop="browse" label="浏览量" width="70" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.browse || 0 }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="类型" width="80" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
            </template>
          </el-table-column>
          
          <el-table-column prop="icon" label="图标" width="60" align="center">
            <template slot-scope="scope">
              <image-preview v-if="scope.row.icon" :src="scope.row.icon" :width="30" :height="30"/>
              <span v-else style="color: #ccc;">无</span>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEditSecondLevel(scope.row)">
                编辑
              </el-button>
              <el-button size="mini" type="text" @click="handleDeleteSecondLevel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <pagination
          v-show="secondLevelTotal > 0"
          :total="secondLevelTotal"
          :page.sync="secondLevelPageNum"
          :limit.sync="secondLevelPageSize"
          @pagination="getSecondLevelList(selectedFirstLevel ? selectedFirstLevel.id : 0)"
          style="margin-top: 20px;"
        />
      </div>
    </el-card>

    <!-- 添加/编辑一级分类对话框 -->
    <el-dialog :title="firstLevelTitle" :visible.sync="firstLevelDialogVisible" width="500px">
      <el-form ref="firstLevelForm" :model="firstLevelForm" :rules="firstLevelRules" label-width="100px">
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="firstLevelForm.title" placeholder="请输入一级分类名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="firstLevelForm.sort" :min="0" :max="9999" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="firstLevelForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="浏览量" prop="browse">
          <el-input-number v-model="firstLevelForm.browse" :min="0" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="firstLevelForm.type">
            <el-radio
              v-for="dict in dict.type.service_sate_type"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <image-upload v-model="firstLevelForm.icon"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="firstLevelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFirstLevel">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加/编辑二级分类对话框 -->
    <el-dialog :title="secondLevelTitle" :visible.sync="secondLevelDialogVisible" width="500px">
      <el-form ref="secondLevelForm" :model="secondLevelForm" :rules="secondLevelRules" label-width="100px">
        <el-form-item label="父级分类">
          <el-input 
            :value="selectedFirstLevel ? selectedFirstLevel.title : ''" 
            disabled
          >
            <template slot="prepend">
              <i class="el-icon-folder" style="color: #409EFF;"></i>
            </template>
            <template slot="append">
              <dict-tag 
                v-if="selectedFirstLevel && selectedFirstLevel.type !== null" 
                :options="dict.type.service_sate_type" 
                :value="selectedFirstLevel.type" 
                size="mini"
              />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="secondLevelForm.title" placeholder="请输入二级分类名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="secondLevelForm.sort" :min="0" :max="9999" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="secondLevelForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="浏览量" prop="browse">
          <el-input-number v-model="secondLevelForm.browse" :min="0" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input 
            :value="getTypeLabel(secondLevelForm.type)" 
            disabled 
            placeholder="跟随父级分类类型"
          />
          <div style="font-size: 12px; color: #909399; margin-top: 5px;">
            <i class="el-icon-info"></i> 二级分类的类型自动跟随父级分类
          </div>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <image-upload v-model="secondLevelForm.icon"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="secondLevelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSecondLevel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate, changefenleiStatus } from "@/api/system/ServiceCate"
import { parseTime } from "@/utils/index"

export default {
  name: "ServiceCate",
  dicts: ['service_sate_status', 'service_sate_type'],
  data() {
    return {
      // 一级分类相关
      firstLevelList: [],
      selectedFirstLevel: null,
      firstLevelSearch: "",
      firstLevelDialogVisible: false,
      firstLevelTitle: "",
      firstLevelForm: {},
      firstLevelRules: {
        title: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "change" }],
        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
      },
      
      // 二级分类相关
      secondLevelList: [],
      secondLevelSearch: "",
      secondLevelDialogVisible: false,
      secondLevelTitle: "",
      secondLevelForm: {},
      secondLevelRules: {
        title: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "change" }],
        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
      },
      
      // 二级分类分页相关
      secondLevelTotal: 0,
      secondLevelPageNum: 1,
      secondLevelPageSize: 10,
      
      // 所有分类数据（用于统计子分类数量）
      allCategoryList: [],
      
      // 显示更多控制
      showAllFirstLevel: false,
      defaultShowCount: 20
    }
  },
  
  computed: {
    // 过滤后的一级分类
    filteredFirstLevelList() {
      let filtered = this.firstLevelList
      if (this.firstLevelSearch) {
        filtered = this.firstLevelList.filter(item => 
          item.title.toLowerCase().includes(this.firstLevelSearch.toLowerCase())
        )
      }
      return filtered
    },
    
    // 显示的一级分类（考虑显示更多逻辑）
    displayedFirstLevelList() {
      if (this.showAllFirstLevel || this.firstLevelSearch) {
        return this.filteredFirstLevelList
      }
      return this.filteredFirstLevelList.slice(0, this.defaultShowCount)
    },
    
    // 是否显示"显示更多"按钮
    shouldShowMoreButton() {
      return !this.showAllFirstLevel && 
             !this.firstLevelSearch && 
             this.filteredFirstLevelList.length > this.defaultShowCount
    },
    
    // 过滤后的二级分类
    filteredSecondLevelList() {
      if (!this.secondLevelSearch) return this.secondLevelList
      return this.secondLevelList.filter(item => 
        item.title.toLowerCase().includes(this.secondLevelSearch.toLowerCase())
      )
    }
  },
  
  created() {
    this.getFirstLevelList()
  },
  
  methods: {
    // 时间格式化方法
    parseTime,
    
    /** 获取一级分类列表 */
    getFirstLevelList() {
      // 获取一级分类（不分页）
      const params = { 
        parentId: 0,
        pageNum: 1,
        pageSize: 1000  // 设置一个很大的数值，确保获取所有一级分类
      }
      listServiceCate(params).then(response => {
        this.firstLevelList = response.rows || []
      })
      
      // 获取所有分类数据用于统计（不分页）
      listServiceCate({
        pageNum: 1,
        pageSize: 10000  // 获取所有分类数据
      }).then(response => {
        this.allCategoryList = response.rows || []
      })
    },
    
    /** 获取二级分类列表 */
    getSecondLevelList(parentId) {
      const params = { 
        parentId: parentId,
        pageNum: this.secondLevelPageNum,
        pageSize: this.secondLevelPageSize
      }
      listServiceCate(params).then(response => {
        this.secondLevelList = response.rows || []
        this.secondLevelTotal = response.total || 0
      })
    },
    
    /** 选择一级分类 */
    selectFirstLevel(category) {
      this.selectedFirstLevel = category
      // 重置分页参数
      this.secondLevelPageNum = 1
      this.secondLevelPageSize = 10
      this.secondLevelSearch = ""
      this.getSecondLevelList(category.id)
    },
    
    /** 获取子分类数量 */
    getSubCategoryCount(parentId) {
      return this.allCategoryList.filter(item => item.parentId === parentId).length
    },
    
    /** 状态修改 */
    handleStatusChange(row) {
      let text = row.status === 0 ? "启用" : "停用"
      this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
        return changefenleiStatus(row.id, row.status)
      }).then(() => {
        this.$modal.msgSuccess(text + "成功")
      }).catch(function() {
        row.status = row.status === 0 ? 1 : 0
      })
    },
    
    // ========== 一级分类操作 ==========
    
    /** 添加一级分类 */
    handleAddFirstLevel() {
      this.resetFirstLevelForm()
      this.firstLevelDialogVisible = true
      this.firstLevelTitle = "添加一级分类"
    },
    
    /** 编辑一级分类 */
    handleEditFirstLevel(row) {
      this.resetFirstLevelForm()
      getServiceCate(row.id).then(response => {
        this.firstLevelForm = response.data
        this.firstLevelDialogVisible = true
        this.firstLevelTitle = "编辑一级分类"
      })
    },
    
    /** 删除一级分类 */
    handleDeleteFirstLevel(row) {
      // 检查是否有二级分类
      const params = { parentId: row.id }
      listServiceCate(params).then(response => {
        if (response.rows && response.rows.length > 0) {
          this.$modal.msgError("该分类下还有二级分类，不能删除")
          return
        }
        
        this.$modal.confirm('是否确认删除分类"' + row.title + '"？').then(function() {
          return delServiceCate(row.id)
        }).then(() => {
          this.getFirstLevelList()
          this.$modal.msgSuccess("删除成功")
          // 如果删除的是当前选中的分类，清空选中状态
          if (this.selectedFirstLevel && this.selectedFirstLevel.id === row.id) {
            this.selectedFirstLevel = null
            this.secondLevelList = []
            this.secondLevelTotal = 0
          }
          // 刷新统计数据
          listServiceCate({
            pageNum: 1,
            pageSize: 10000
          }).then(response => {
            this.allCategoryList = response.rows || []
          })
        }).catch(() => {})
      })
    },
    
    /** 提交一级分类 */
    submitFirstLevel() {
      this.$refs["firstLevelForm"].validate(valid => {
        if (valid) {
          this.firstLevelForm.parentId = 0 // 设置为一级分类
          
          if (this.firstLevelForm.id != null) {
            updateServiceCate(this.firstLevelForm).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.firstLevelDialogVisible = false
              this.getFirstLevelList()
            })
          } else {
            addServiceCate(this.firstLevelForm).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.firstLevelDialogVisible = false
              this.getFirstLevelList()
            })
          }
        }
      })
    },
    
    /** 重置一级分类表单 */
    resetFirstLevelForm() {
      this.firstLevelForm = {
        id: null,
        title: null,
        icon: null,
        sort: 0,
        status: 1,
        browse: 0,
        type: 1,
        parentId: 0
      }
      this.resetForm("firstLevelForm")
    },
    
    // ========== 二级分类操作 ==========
    
    /** 添加二级分类 */
    handleAddSecondLevel() {
      this.resetSecondLevelForm()
      // 自动设置父级分类的类型
      this.secondLevelForm.type = this.selectedFirstLevel ? this.selectedFirstLevel.type : 1
      this.secondLevelDialogVisible = true
      this.secondLevelTitle = "添加二级分类"
    },
    
    /** 编辑二级分类 */
    handleEditSecondLevel(row) {
      this.resetSecondLevelForm()
      getServiceCate(row.id).then(response => {
        this.secondLevelForm = response.data
        // 确保类型跟随一级分类
        this.secondLevelForm.type = this.selectedFirstLevel ? this.selectedFirstLevel.type : this.secondLevelForm.type
        this.secondLevelDialogVisible = true
        this.secondLevelTitle = "编辑二级分类"
      })
    },
    
    /** 删除二级分类 */
    handleDeleteSecondLevel(row) {
      this.$modal.confirm('是否确认删除分类"' + row.title + '"？').then(function() {
        return delServiceCate(row.id)
      }).then(() => {
        this.getSecondLevelList(this.selectedFirstLevel.id)
        this.$modal.msgSuccess("删除成功")
        // 更新所有分类数据以刷新计数
        listServiceCate({}).then(response => {
          this.allCategoryList = response.rows || []
        })
      }).catch(() => {})
    },
    
    /** 提交二级分类 */
    submitSecondLevel() {
      this.$refs["secondLevelForm"].validate(valid => {
        if (valid) {
          this.secondLevelForm.parentId = this.selectedFirstLevel ? this.selectedFirstLevel.id : 0 // 设置父级ID
          this.secondLevelForm.type = this.selectedFirstLevel ? this.selectedFirstLevel.type : this.secondLevelForm.type // 确保类型跟随一级分类
          
          if (this.secondLevelForm.id != null) {
            updateServiceCate(this.secondLevelForm).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.secondLevelDialogVisible = false
              this.getSecondLevelList(this.selectedFirstLevel.id)
              // 更新所有分类数据以刷新计数
              listServiceCate({}).then(response => {
                this.allCategoryList = response.rows || []
              })
            })
          } else {
            addServiceCate(this.secondLevelForm).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.secondLevelDialogVisible = false
              this.getSecondLevelList(this.selectedFirstLevel.id)
              // 更新所有分类数据以刷新计数
              listServiceCate({}).then(response => {
                this.allCategoryList = response.rows || []
              })
            })
          }
        }
      })
    },
    
    /** 重置二级分类表单 */
    resetSecondLevelForm() {
      this.secondLevelForm = {
        id: null,
        title: null,
        icon: null,
        sort: 0,
        status: 1,
        browse: 0,
        type: null, // 不预设类型，在添加时设置
        parentId: null
      }
      this.resetForm("secondLevelForm")
    },

    /** 获取类型标签 */
    getTypeLabel(value) {
      const dict = this.dict.type.service_sate_type
      const found = dict.find(item => parseInt(item.value) === value)
      return found ? found.label : value
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 12px;
  padding: 15px 0;
}

.category-card {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 90px;
  max-width: 120px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.category-card:hover {
  border-color: #409EFF;
  background-color: #fafbfc;
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.12);
  transform: translateY(-2px);
}

.category-card.active {
  border-color: #409EFF;
  background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.card-content {
  padding: 12px 8px 8px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.default-icon-small {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4f8 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-info {
  flex: 1;
  text-align: center;
}

.card-title {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.card-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #909399;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-actions {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(10px);
}

.category-card:hover .card-actions {
  opacity: 1;
  transform: translateY(0);
}

.category-card.active .card-actions {
  opacity: 1;
  transform: translateY(0);
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-top-color: rgba(64, 158, 255, 0.1);
}

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

.action-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border-width: 1px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.edit-btn {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f9ff 100%) !important;
  border-color: #90caf9 !important;
  color: #1976d2 !important;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
  border-color: #1565c0 !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3) !important;
}

.delete-btn {
  background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%) !important;
  border-color: #f8bbd9 !important;
  color: #c62828 !important;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%) !important;
  border-color: #b71c1c !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3) !important;
}

.grid-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 15px;
  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
  border-radius: 8px;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 20px;
  padding-right: 20px;
}

.grid-stats {
  flex: 1;
}

.stats-text {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.grid-actions {
  display: flex;
  gap: 10px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
