<template>
  <div class="role-manage-container">
    <PageTitle title="角色管理" />

    <!-- 角色Tab + 新增按钮 -->
    <div class="role-header">
      <div class="role-tabs">
        <div v-for="tab in roleTabs" :key="tab.key" :class="['tab-item', { active: activeRole === tab.key }]" @click="activeRole = tab.key">
          {{ tab.label }}
        </div>
      </div>
      <el-button type="danger" link @click="handleAddRole"><el-icon><Plus /></el-icon>新增角色</el-button>
    </div>

    <!-- 人员表格 -->
    <el-table :data="staffList" border>
      <el-table-column prop="name" label="姓名" min-width="120" align="center" />
      <el-table-column prop="phone" label="手机号" min-width="150" align="center" />
      <el-table-column prop="status" label="状态" min-width="100" align="center">
        <template #default="{ row }">
          <span :class="['status-text', row.status === '启用' ? 'active' : '']">{{ row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑角色弹窗 -->
    <el-dialog v-model="roleDialogVisible" :title="roleDialogTitle" width="500px" destroy-on-close>
      <el-form ref="roleFormRef" :model="roleFormData" :rules="roleFormRules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleFormData.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleFormData.description" type="textarea" :rows="3" placeholder="请输入角色描述" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="roleFormData.status">
            <el-radio label="启用">启用</el-radio>
            <el-radio label="停用">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="roleDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleRoleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑人员弹窗 -->
    <el-dialog v-model="staffDialogVisible" title="编辑人员" width="500px" destroy-on-close>
      <el-form ref="staffFormRef" :model="staffFormData" :rules="staffFormRules" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="staffFormData.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="staffFormData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="staffFormData.status">
            <el-radio label="启用">启用</el-radio>
            <el-radio label="停用">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="staffDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleStaffSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { PageTitle } from '@/components'

const activeRole = ref('role01')
const roleDialogVisible = ref(false)
const staffDialogVisible = ref(false)
const roleFormRef = ref()
const staffFormRef = ref()
const editingRole = ref<any>(null)

const roleFormData = reactive({
  name: '',
  description: '',
  status: '启用'
})

const staffFormData = reactive({
  name: '',
  phone: '',
  status: '启用'
})

const roleFormRules = {
  name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
}

const staffFormRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
}

const roleDialogTitle = computed(() => editingRole.value ? '编辑角色' : '新增角色')

const roleTabs = ref([
  { key: 'role01', label: '角色01' },
  { key: 'role02', label: '角色02' },
  { key: 'role03', label: '角色03' },
  { key: 'role04', label: '角色04' },
  { key: 'role05', label: '角色05' },
  { key: 'role06', label: '角色06' }
])

const staffList = ref([
  { id: 1, name: '郑婷雅', phone: '137 8651 5262', status: '启用' },
  { id: 2, name: '冯艺莲', phone: '158 6084 7617', status: '启用' },
  { id: 3, name: '吴彦琛', phone: '158 0598 5923', status: '启用' },
  { id: 4, name: '吴彦漆', phone: '137 8231 8088', status: '启用' },
  { id: 5, name: '周碰', phone: '180 6243 3980', status: '启用' },
  { id: 6, name: '吴萱萱', phone: '131 1251 9348', status: '启用' },
  { id: 7, name: '王凡玄', phone: '185 3264 9149', status: '启用' },
  { id: 8, name: '冯启彬', phone: '184 5857 8572', status: '启用' },
  { id: 9, name: '郑文锦', phone: '189 2860 9388', status: '启用' },
  { id: 10, name: '赵吾光', phone: '181 0834 1643', status: '启用' }
])

const handleAddRole = () => {
  editingRole.value = null
  roleFormData.name = ''
  roleFormData.description = ''
  roleFormData.status = '启用'
  roleDialogVisible.value = true
}

const handleRoleSubmit = async () => {
  const valid = await roleFormRef.value?.validate()
  if (!valid) return
  if (editingRole.value) {
    ElMessage.success('编辑成功')
  } else {
    // 添加新角色到tabs
    const newKey = 'role' + (roleTabs.value.length + 1).toString().padStart(2, '0')
    roleTabs.value.push({ key: newKey, label: roleFormData.name })
    ElMessage.success('新增成功')
  }
  roleDialogVisible.value = false
}

const handleEdit = (row: any) => {
  staffFormData.name = row.name
  staffFormData.phone = row.phone
  staffFormData.status = row.status
  staffDialogVisible.value = true
}

const handleStaffSubmit = async () => {
  const valid = await staffFormRef.value?.validate()
  if (!valid) return
  ElMessage.success('编辑成功')
  staffDialogVisible.value = false
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确定要删除"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}
</script>

<style scoped lang="scss">
.role-manage-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

.role-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.role-tabs {
  display: flex;
  gap: 10px;

  .tab-item {
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    background: #f5f5f5;
    transition: all 0.2s;

    &:hover { color: #e60012; }
    &.active { background: #e60012; color: #fff; }
  }
}

:deep(.el-table) {
  th.el-table__cell {
    background: #fafafa;
    font-weight: 500;
    color: #333;
  }
  .el-table__cell {
    padding: 10px 0;
  }
}

.status-text {
  color: #999;
  &.active { color: #67c23a; }
}
</style>
