<template>
  <div class="permission-page">
    <!-- 顶部 Tabs -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="提示词用户权限" name="user" />
      <el-tab-pane label="提示词角色权限" name="role" />
    </el-tabs>

    <!-- 搜索栏 -->
    <el-form :inline="true" class="search-form">
      <el-form-item>
        <el-input style="width: 1500px" v-model="search.keyword" placeholder="请输入用户名称、角色名称" clearable />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.role" placeholder="全部" clearable>
          <el-option label="全部角色" value="" />
          <el-option label="admin" value="admin" />
          <el-option label="editor" value="editor" />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </el-form>

    <!-- 用户表格 -->
    <el-table :data="userList" border style="width: 100%">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="type" label="类型" />
      <el-table-column label="权限数量">
        <template #default="{ row }">
          <el-tag type="success">读权限: {{ row.readpermission }}</el-tag>
          <el-tag type="warning">写权限: {{ row.writepermission }}</el-tag>
          <el-tag type="danger">管理权限: {{ row.managepermission }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleAssign(row)" type="primary">查看权限</el-button>
          <el-button size="small" >编辑权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 权限分配面板 -->
    <div v-if="showAssignPanel" class="assign-panel">
      <div class="assign-header">
        权限分配矩阵-<b>{{ currentRole.name }}对象</b>
        <div style="margin-left: auto">
        <el-switch v-model="ifDisplaysinheritedpermissions" active-text="显示继承权限" inactive-text="不显示继承权限" ></el-switch>
        </div>
      </div>
        <el-divider style="margin-top: 1px"></el-divider>
       <div class="inheritanceSettings">
         //TODO：完成选择分类 全选 全不选样式
         <div >

         </div>
        <span>权限继承设置</span><br/>
         <el-checkbox-group v-model="inheritanceoptions" size="large">
           <el-checkbox label="0" style="color: black">从父分类继承权限</el-checkbox>
           <el-checkbox label="1"style="color: black" >从角色继承权限</el-checkbox>
         </el-checkbox-group>
         <div style="color: #777777;font-size: small">继承的权限显示为灰色，可直接修改，如需修改，请到源头权限处修改</div>
       </div>


      <!-- 权限树结构 -->
      <div class="assign-body">
        <el-table :data="treeData" border>
          <el-table-column prop="label" label="分类" width="200" />

          <el-table-column label="查看权限">
            <template #default="{ row }">
              <el-select v-model="row.view" placeholder="请选择" style="width: 120px">
                <el-option label="管理" value="manage" />
                <el-option label="只读" value="readonly" />
                <el-option label="无权限" value="none" />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="编辑权限">
            <template #default="{ row }">
              <el-select v-model="row.edit" placeholder="请选择" style="width: 120px">
                <el-option label="管理" value="manage" />
                <el-option label="只读" value="readonly" />
                <el-option label="无权限" value="none" />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="写作权限">
            <template #default="{ row }">
              <el-select v-model="row.write" placeholder="请选择" style="width: 120px">
                <el-option label="管理" value="manage" />
                <el-option label="只读" value="readonly" />
                <el-option label="无权限" value="none" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="assign-footer">
        <el-button type="primary" @click="savePermission">保存并分配权限</el-button>
        <el-button type="danger">批量移除</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const ifDisplaysinheritedpermissions=ref(false)
const inheritanceoptions=ref([])
const search = ref({
  keyword: '',
  role: ''
})

const userList = ref([
  { name: 'admin', type: '角色', readpermission: 12, writepermission: 5, managepermission: 3 },
  { name: 'editor', type: '角色', readpermission: 8, writepermission: 2, managepermission: 1 },
  { name: 'zhangan', type: '用户', readpermission: 6, writepermission: 1, managepermission: 0 },
  { name: 'test', type: '用户', readpermission: 2, writepermission: 0, managepermission: 1 }
])

const currentRole = ref({})
const showAssignPanel = ref(false)
const directAssign = ref(true)
const inheritFrom = ref('user')

const handleSearch = () => {
  // 模拟过滤
  console.log('搜索：', search.value)
}

const handleAssign = (row) => {
  currentRole.value = row
  showAssignPanel.value = true
}

// 模拟分类树结构（扁平结构简化展示）
const treeData = ref([
  {
    id: 1,
    label: '内容创作',
    view: 'manage',
    edit: 'readonly',
    write: 'readonly'
  },
  {
    id: 2,
    label: 'creative-writing-template',
    view: 'manage',
    edit: 'manage',
    write: 'manage'
  },
  {
    id: 3,
    label: '文章创意',
    view: 'readonly',
    edit: 'none',
    write: 'readonly'
  },
  {
    id: 4,
    label: '写作方法论',
    view: 'manage',
    edit: 'manage',
    write: 'manage'
  }
])

const savePermission = () => {
  console.log('保存权限:', treeData.value)
}
</script>

<style scoped>
.inheritanceSettings{
  background-color: #F5F7FA;
}
.permission-page {
  padding: 20px;
}
.search-form {
  margin: 20px 0;
}
.assign-panel {
  margin-top: 30px;
  border: 1px solid #ebeef5;
  padding: 20px;
  background: #fafafa;
}
.assign-header {
  display: flex;
  font-weight: bold;
  margin-bottom: 20px;
}
.assign-body {
  margin-top: 10px;
}
.assign-footer {
  margin-top: 20px;
  text-align: right;
}
</style>
