<template>
  <div class="user-config">
    <!-- 标题 -->
    <div class="title">
    <el-icon><User /></el-icon>
      角色
    </div>

    <!-- 搜索和操作区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <div class="left-area">
          <el-form-item label="角色名:">
            <el-input v-model="searchForm.roleName" placeholder="请输入角色名"></el-input>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input v-model="searchForm.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </div>
        <div class="right-area">
          <el-button type="primary" icon="Plus" @click="handleAdd">新增角色</el-button>
        </div>
      </el-form>
    </div>

    <!-- 列表 -->
    <div class="user-list">
      <div class="user-grid">
        <div v-for="(user, index) in userList" :key="index" class="user-card">
          <div class="user-info">
            <div class="avatar">
              <el-avatar :size="50" icon="User"></el-avatar>
            </div>
            <div class="info">
              <div class="roleName">角色名: {{ user.roleName }}</div>
              <div class="remark">备注: {{ user.remark }}</div>
            </div>
            <!-- 遮罩层和操作按钮 -->
            <div class="hover-mask">
              <div class="operation-buttons">
                <div class="operation-btn" @click="handleDelete(user)">
                  <i class="el-icon-delete"></i>
                  <span>删除</span>
                </div>
                <div class="operation-btn" @click="handleEdit(user)">
                  <i class="el-icon-edit"></i>
                  <span>编辑</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <div class="pagination-info">共有记录 1条，每页显示 8条，共 1页</div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handlePageChange">
      </el-pagination>
    </div>

    <!-- 编辑弹窗 -->
    <role-edit
      v-model:visible="editVisible"
      :form-data="editData"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script>
import RoleEdit from './edit.vue'

export default {
  name: 'RoleConfig',
  components: {
    RoleEdit
  },
  data() {
    return {
      searchForm: {
        name: '',
        roleName: '',
        remark: ''
      },
      userList: [
        {
          realname: 'admin',
          roleName: 'admin',
          remark: ''
        }
      ],
      total: 1,
      currentPage: 1,
      pageSize: 8,
      editVisible: false,
      editData: null
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    handleAdd() {
      // 打开新增角色弹窗
      this.editData = null
      this.editVisible = true
    },
    handlePageChange(page) {
      // 实现分页逻辑
    },
    handleDelete(row) {
      // 实现删除角色逻辑
      this.$confirm('确认删除该角色吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        console.log('删除角色', row)
      }).catch(() => {})
    },
    handleEdit(row) {
      // 打开编辑角色弹窗
      this.editData = { ...row }
      this.editVisible = true
    },
    handleEditSuccess() {
      // 编辑成功后的回调
      this.editVisible = false
      // 刷新列表数据
      this.getList()
    },
    getList() {
      // 获取角色列表数据
    }
  }
}
</script>

<style lang="scss" scoped>
.user-config {
  padding: 20px;

  .title {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    
    i {
      color: #409EFF;
      margin-right: 8px;
      font-size: 20px;
    }
  }

  .search-area {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    
    .search-form {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-area {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .right-area {
        margin-left: 20px;
      }
    }
    
    .el-form-item {
      margin-bottom: 0;
    }
  }

  .user-list {
    margin-bottom: 20px;

    .user-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .user-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .user-info {
      display: flex;
      align-items: center;
      padding: 20px;
      position: relative;
      cursor: pointer;
      height: 100%;

      .avatar {
        margin-right: 15px;
      }

      .info {
        flex: 1;
        
        .name {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
          color: #333;
        }

        .roleName, .remark {
          color: #666;
          font-size: 14px;
          margin-bottom: 5px;
        }
      }

      .hover-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;

        .operation-buttons {
          display: flex;
          gap: 30px;

          .operation-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            cursor: pointer;

            i {
              font-size: 24px;
              margin-bottom: 8px;
            }

            span {
              font-size: 14px;
            }

            &:hover {
              color: #409EFF;
            }
          }
        }
      }

      &:hover {
        .hover-mask {
          display: flex;
        }
      }
    }

    .operation-time {
      color: #666;
      i {
        margin-right: 5px;
      }
    }
  }

  .pagination {
    background: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .pagination-info {
      color: #666;
      font-size: 14px;
    }
  }
}
</style>
