<template>
  <div class="column-management">
    <div class="action-bar">
      <el-button type="primary" @click="showCreateDialog">+ 新增栏目</el-button>
    </div>

    <el-table :data="columns" style="width: 100%" row-key="id" :tree-props="{children: 'children'}">
      <el-table-column prop="name" label="栏目名称" min-width="200" />
      <el-table-column prop="code" label="栏目编码" width="150" />
      <el-table-column prop="sort" label="排序" width="80" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'info'">
            {{ row.status ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="editColumn(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteColumn(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElTag, ElMessage } from 'element-plus';

const columns = ref<any[]>([]);

onMounted(() => {
  loadColumns();
});

function loadColumns() {
  // TODO: 加载栏目数据
}

function showCreateDialog() {
  // TODO: 显示创建栏目对话框
}

function editColumn(row: any) {
  // TODO: 编辑栏目
}

function deleteColumn(row: any) {
  // TODO: 删除栏目
  ElMessage.success('删除成功');
}
</script>

<style lang="scss" scoped>
.column-management {
  padding: 20px;
}

.action-bar {
  margin-bottom: 20px;
}
</style>

