<template>
    <view class="admin-page category-page">
      <view class="admin-sections">
        <!-- 筛选区域 (1:1 复刻 CRMEB: 横向排列的过滤器) -->
        <view class="admin-card filter-card">
          <view class="filter-row">
            <view class="filter-item">
              <text class="label">是否显示:</text>
              <view class="compact-select-wrapper">
                <text class="select-text">请选择</text>
                <text class="arrow">▼</text>
              </view>
            </view>
            <view class="filter-item">
              <text class="label">分类名称:</text>
              <input class="filter-input" placeholder="请输入分类名称" />
            </view>
            <button class="btn-search">查询分类</button>
          </view>
          
          <view class="filter-row second-row">
            <view class="filter-item">
              <text class="label">配置名称:</text>
              <input class="filter-input" placeholder="请输入配置名称" />
            </view>
            <button class="btn-search">查询配置</button>
          </view>
        </view>

        <!-- 表格板块 -->
        <view class="admin-card table-card">
          <view class="table-header-actions">
            <view class="btn-add">添加配置分类</view>
          </view>

          <!-- 模拟表格 (CRMEB风格: 线条简约, 蓝调表头) -->
          <view class="table-container">
            <view class="table-thead">
              <view class="th cell-id">ID</view>
              <view class="th cell-name">分类名称</view>
              <view class="th cell-field">分类字段</view>
              <view class="th cell-status">状态</view>
              <view class="th cell-ops">操作</view>
            </view>
            
            <view class="table-tbody">
              <view v-for="item in categoryList" :key="item.id" class="tr">
                <view class="td cell-id">{{ item.id }}</view>
                <view class="td cell-name">
                  <text class="tree-icon">▶</text>
                  <text>{{ item.name }}</text>
                </view>
                <view class="td cell-field">{{ item.field }}</view>
                <view class="td cell-status">
                  <view class="toggle-switch" :class="{ active: item.status }" @click="item.status = !item.status">
                    <view class="switch-ball"></view>
                  </view>
                </view>
                <view class="td cell-ops">
                  <text class="op-link">配置列表</text>
                  <view class="divider"></view>
                  <text class="op-link">编辑</text>
                  <view class="divider"></view>
                  <text class="op-link delete">删除</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const categoryList = ref([
  { id: 9, name: '分销配置', field: 'fenxiao', status: true },
  { id: 65, name: '接口设置', field: 'system_serve', status: true },
  { id: 69, name: '客服配置', field: 'kefu_config', status: true },
  { id: 78, name: '应用配置', field: 'sys_app', status: true },
  { id: 100, name: '用户配置', field: 'system_user_config', status: true },
  { id: 113, name: '订单配置', field: 'order_config', status: true },
  { id: 129, name: '系统配置', field: 'system_config', status: true },
  { id: 136, name: '商品配置', field: 'product_config', status: true }
])
</script>

<style scoped>
.category-page { padding: 0; background-color: transparent; }

.filter-card { 
  margin-bottom: var(--admin-section-gap); 
  padding: var(--admin-card-padding); 
  box-shadow: 0 1px 4px rgba(0,21,41,0.08); 
  border-radius: 8px;
}
.filter-row { display: flex; flex-direction: row; align-items: center; }
.second-row { margin-top: 15px; border-top: 1px dashed #eee; padding-top: 15px; }

.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 30px; }
.filter-item .label { font-size: 14px; color: #515a6e; margin-right: 10px; }

.compact-select-wrapper { 
  display: flex; flex-direction: row; align-items: center; 
  border: 1px solid #dcdee2; width: 180px; height: 32px; 
  padding: 0 10px; border-radius: 4px; justify-content: space-between;
}
.select-text { font-size: 13px; color: #c5c8ce; }
.arrow { font-size: 10px; color: #808695; }

.filter-input { border: 1px solid #dcdee2; width: 220px; height: 32px; padding: 0 10px; border-radius: 4px; font-size: 13px; }

.btn-search { background-color: #2d8cf0; color: #fff; font-size: 12px; height: 32px; line-height: 32px; padding: 0 15px; border-radius: 4px; margin-right: 10px; border: none; }

.table-card { 
  padding: var(--admin-card-padding); 
  box-shadow: 0 1px 4px rgba(0,21,41,0.08); 
  border-radius: 8px;
}

.btn-add { display: inline-block; background-color: #2d8cf0; color: #fff; font-size: 13px; height: 32px; line-height: 32px; padding: 0 15px; border-radius: 4px; border: none; margin-bottom: 15px; cursor: pointer; }

/* 表格样式 (1:1 复刻 CRMEB 极简蓝风格) */
.table-container { width: 100%; border: 1px solid #e8eaec; border-radius: 4px; overflow: hidden; }
.table-thead { display: flex; flex-direction: row; background-color: #f8f9fa; border-bottom: 1px solid #e8eaec; }
.th { padding: 12px 15px; font-size: 14px; color: #515a6e; font-weight: bold; text-align: left; }

.tr { display: flex; flex-direction: row; border-bottom: 1px solid #e8eaec; align-items: center; background-color: #fff; }
.tr:last-child { border-bottom: none; }
.td { padding: 12px 15px; font-size: 14px; color: #515a6e; }

.cell-id { width: 80px; }
.cell-name { flex: 2; }
.cell-field { flex: 2; }
.cell-status { width: 120px; }
.cell-ops { width: 260px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }

.tree-icon { font-size: 12px; color: #808695; margin-right: 8px; }

/* Toggle Switch (复刻) */
.toggle-switch { width: 44px; height: 22px; background-color: #ccc; border-radius: 11px; position: relative; cursor: pointer; transition: all .2s; }
.toggle-switch.active { background-color: #2d8cf0; }
.switch-ball { position: absolute; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; left: 2px; top: 2px; transition: all .2s; }
.toggle-switch.active .switch-ball { transform: translateX(22px); }

.op-link { color: #2d8cf0; font-size: 13px; cursor: pointer; margin: 0 5px; }
.op-link.delete { color: #ed4014; }
.divider { width: 1px; height: 12px; background-color: #e8eaec; margin: 0 5px; }
</style>