<template>
  <div class="roles-page">
    <a-card :bordered="false" title="角色权限管理">
      <template #extra>
        <a-button type="primary" @click="modalVisible = true">
          <template #icon><PlusOutlined /></template>
          新增角色
        </a-button>
      </template>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :md="12" :xl="8" v-for="role in roles" :key="role.key">
          <a-card class="role-card" :bordered="false">
            <div class="role-header">
              <span class="role-name">{{ role.label }}</span>
              <a-tag :color="role.color">{{ role.count }} 人</a-tag>
            </div>
            <p class="role-desc">{{ role.desc }}</p>
            <div class="role-perms">
              <a-tag v-for="p in role.permissions" :key="p" size="small">{{ p }}</a-tag>
            </div>
            <div class="role-actions">
              <a-button type="link" size="small" @click="handleEdit(role)">编辑</a-button>
              <a-button type="link" size="small" danger>删除</a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <a-modal v-model:open="modalVisible" :title="editingRole ? '编辑角色' : '新增角色'" width="540px" @ok="handleSubmit">
      <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="角色名称">
          <a-input v-model:value="form.label" />
        </a-form-item>
        <a-form-item label="角色描述">
          <a-textarea v-model:value="form.desc" :rows="2" />
        </a-form-item>
        <a-form-item label="权限配置">
          <a-checkbox-group v-model:value="form.permissions">
            <a-row>
              <a-col :span="12" v-for="perm in allPermissions" :key="perm.key">
                <a-checkbox :value="perm.key">{{ perm.label }}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

definePageMeta({ layout: 'admin' })

const modalVisible = ref(false)
const editingRole = ref<any>(null)
const form = reactive({ label: '', desc: '', permissions: [] as string[] })

const roles = [
  { key: 'super_admin', label: '超级管理员', desc: '平台最高权限，可管理所有模块', count: 1, color: 'red', permissions: ['全部权限'] },
  { key: 'admin', label: '企业管理员', desc: '管理本企业内的用户、配置、账单', count: 12, color: 'purple', permissions: ['用户管理', '账单查看', '应用管理'] },
  { key: 'member', label: '普通成员', desc: '使用平台基础功能，无管理权限', count: 845, color: 'blue', permissions: ['功能使用'] },
  { key: 'developer', label: '开发者', desc: '拥有开发者权限，可创建和管理应用', count: 342, color: 'green', permissions: ['API调用', '插件开发', '模板发布'] },
]

const allPermissions = [
  { key: 'user_manage', label: '用户管理' },
  { key: 'app_manage', label: '应用管理' },
  { key: 'finance_view', label: '账单查看' },
  { key: 'finance_pay', label: '充值缴费' },
  { key: 'developer_api', label: 'API 调用' },
  { key: 'developer_plugin', label: '插件开发' },
  { key: 'setting_base', label: '基础配置' },
  { key: 'setting_advance', label: '高级配置' },
]

const handleEdit = (r: any) => { editingRole.value = r; Object.assign(form, r); modalVisible.value = true }
const handleSubmit = () => { modalVisible.value = false; message.success(editingRole.value ? '编辑成功' : '新增成功') }
</script>

<style scoped>
.role-card {
  border-radius: 10px;
  transition: box-shadow 0.2s;
}
.role-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.role-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.role-name { font-weight: 600; font-size: 15px; color: #111827; }
.role-desc { font-size: 13px; color: #6b7280; margin: 0 0 10px; }
.role-perms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.role-actions { display: flex; gap: 4px; }
</style>
