<template>
  <div>
    <!-- 头部区域 -->
    <div class="title_examine">
      <p style="font-size: 30px;font-weight: 400;float: left;margin-left: 30px;padding-top: 20px">账号列表</p>
    </div>
    <!-- 学习名称组织名称表单区域 -->
    <div v-if="isOrgFormVisible" class="table">
      <!-- 头部区域 -->
       <div class="table_top">
        <div class="organzition_top">CN组织</div>
        <div class="organzition_top">HK组织</div>
        <div class="organzition_top">COM组织</div>
       </div>
      <div class="input-container">
        <input type="text" placeholder="搜索组织" class="table_find" />
        <i class="el-icon-search"></i>
      </div>
      <a @click="close_table" class="table_close">X</a>
      <div class="checkbox-container">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
        <input type="checkbox" class="checkbox_input">
      </div>
      <div class="checkbox-company">
        <div class="checkbox-right">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
          <input type="checkbox" class="checkbox_input">
        </div>
      </div>
      <!-- <el-button type="primary" style="margin-top: 580px; position: absolute; float: right; margin-left: 80px; height: 40px">下一步</el-button> -->
    </div>
    <!-- 姓名与账户名称 -->
    <div v-if="isTableUseVisible"  class="add_account">
      <div class="el-dialog__header">
        <span class="el-dialog__title">添加账户</span>
        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="form_clost" >
          <i class="el-dialog__close el-icon el-icon-close"></i>
        </button>
      </div>
      <!-- 内容区域 -->
      <div class="el-dialog__body">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="form.name"  placeholder="请输入姓名" class="form_input"></el-input>
          </el-form-item>
          <el-form-item label="账户名称">
            <el-input v-model="form.account" type="text"  placeholder="请输入账户名称" class="form_input"></el-input>
          </el-form-item>
          <el-form-item label="所属组织">
            <el-select v-model="form.organization" placeholder="请选择组织">
              <el-option label="组织1"></el-option>
              <el-option label="组织2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属学校">
            <el-select v-model="form.school" placeholder="请选择学校">
              <el-option label="学校1"></el-option>
              <el-option label="学校2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form_tool">
            <el-button type="primary">确认</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 按钮区域 -->
      <div class="button_top">
        <!-- "启用中"按钮 -->
        <a @click="showopen" :style="{ color: open ? 'black' : 'rgb(179, 179, 179)' }">启用中({{ tableData.length }})</a>
        <!-- "已停用"按钮 -->
        <a @click="showstop" :style="{ color: stop ? 'black' : 'rgb(179, 179, 179)' }">已停用({{ tableData_stop.length }})</a>
      </div>
      <!-- 启用中区域 -->
      <div v-if="open_content" style="margin-top: -80px;">
        <el-table :data="paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" stripe>
        <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center" />
        <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center" />
        <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center" />
        <el-table-column show-overflow-tooltip prop="account" label="账户" width="350" header-align="center" align="center" />
        <el-table-column fixed="right" label="操作" width="250" header-align="center">
          <template slot-scope="{ row }">
            <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">停用</el-button>
            <el-button link type="text" size="small" @click="run()">移动</el-button>
            <el-button
              link
              type="text"
              size="small"
              @click="ajax_admin(row.userid, row.role, row.type)"
            >
              {{ row.role === 1 ? '已设置管理员' : '设置管理员' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
        <!-- 分页区域 -->
        <div class="Pagetion" v-if="up_page">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="tableData.length"
            layout="total, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handlePageChange">
          </el-pagination>
        </div>
      </div>
      <!-- 已停用区域 -->
      <div v-if="stop_content" style="margin-top: -80px;">
        <el-table :data="down_paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" header-align="center" align="center">
          <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center"/>
          <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center"/>
          <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center"/>
          <el-table-column show-overflow-tooltip prop="account" label="账户" width="350" header-align="center" align="center"/>
          <el-table-column fixed="right" label="操作" width="250" header-align="center" align="center">
            <template slot-scope="{ row }">
              <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <div class="Pagetion" v-if="down_page">
          <el-pagination
            :current-page="down_currentPage"
            :page-size="down_pageSize"
            :total="tableData_stop.length"
            layout="total, prev, pager, next, jumper"
            @size-change="down_handlePageSizeChange"
            @current-change="down_handlePageChange">
          </el-pagination>
        </div>
      </div>
      <!-- 新增按钮 -->
      <button class="add-button" @click="nextStep()" v-if="add_button">
        <span class="add-icon">+</span>
        新增账户
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  components: {
  },
  data() {
    return { 
      // 控制下拉菜单的显示与隐藏
      dropdownVisible: false,
      checked: true,
      showCompany: false, // 默认隐藏
      button: [],         // 假设 button 用来存储选择的值
      // 每个项对应一个布尔值，表示是否展开
      showCompanyList: [false, false, false, false, false, false, false, false, false],
      // 响应式数据
      isOrgFormVisible: false,
      isTableUseVisible: false,
      isCompanyDropdownVisible: false,
      companyListVisibility: [false, false, false],
      open_content: true,
      add_button: true,
      stop_content: false,
      open: true, 
      stop: false,
      // 启用区域分页
      currentPage: 1, // 当前第几页
      pageSize: 5, // 每页显示的条目数
      // 停止区域分页
      down_currentPage: 1, // 当前第几页
      down_pageSize: 5, // 每页显示的条目数
      // 两个分页初始化状态
      up_page: true,
      down_page: false,
      company_name: 0,
      // 启用数组
      tableData: [],
      // 停用数组
      tableData_stop: [],
      form: {
          name: '',
          account: '',
          organization: '',
          school: ''
        },
    };
  },
  computed: {
    // 计算当前页显示的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end); // 获取当前页的数据
    },
    down_paginatedData() {
      const start = (this.down_currentPage - 1) * this.down_pageSize;
      const end = this.down_currentPage * this.down_pageSize;
      return this.tableData_stop.slice(start, end); // 获取当前页的数据
    }
  },
  methods: {
   // 移动按钮，将isOrgFormVisible区域显示
   run() {
      this.isOrgFormVisible = true;
      this.isTableUseVisible = false;
    },
    // 新增账户
    nextStep() {
      this.isTableUseVisible = true;
    },
    //新增账户关闭
    form_clost(){
      this.isTableUseVisible = false;
    },
    // 关闭按钮
    close_table() {
      this.isOrgFormVisible = false;
      this.isTableUseVisible = false;
    },
    // 启用中
    showopen() {
      this.open_content = true;
      this.add_button = true;
      this.stop_content = false;
      this.open = true;  // 启用中按钮颜色变为黑色
      this.stop = false; // 已停用按钮颜色变为灰色
      this.up_page = true;
      this.down_page = false;
    },
    // 已停用
    showstop() {
      this.open_content = false;
      this.add_button = false;
      this.stop_content = true;
      this.open = false; // 启用中按钮颜色变为灰色
      this.stop = true;  // 已停用按钮颜色变为黑色
      this.up_page = false;
      this.down_page = true;
    },
    // 页码扩展按钮
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 启用区域 处理每页条目数量变化
    handlePageSizeChange(size) {
      this.pageSize = size;
    },
    // 停用区域 处理每页条目数量变化
    down_handlePageSizeChange(size) {
      this.down_pageSize = size;
    },
    // 停用区域 页码扩展按钮
    down_handlePageChange(page) {
      this.down_currentPage = page;
    },
    // 已启用
    ajax_user_open() {
      let params = [
        {
          functionName: "select_user_type1",  // 调用存储过程的名称
          u_type: 1,
        },
      ];

      this.$ajax
        .post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          // 假设 res.data[0] 是返回的用户数据数组
          this.tableData = res.data[0].map(user => ({
            company_name: user.name || '未知',     // 组织名称
            company_number: user.id || '未知',     // 组织编号
            name: user.username || '未知',         // 姓名
            account: user.account  || '未知',  // 账户
            userid:user.userid,
            role: user.role || 0,                  // 角色，假设 1 为管理员，0 为普通用户
            action: user.role === 1 
              ? '已设置管理员' 
              : '设置管理员'                      // 根据 role 字段设置按钮文字
          }));
          // 打印映射后的用户信息
          // console.log("启用的用户信息:", res.data);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);  // 打印更详细的错误信息
        });
    },
    //停用
    ajax_user_stop() {
      let params = [
        {
           //全部
          functionName: "select_user_type1",  // 调用存储过程的名称
          u_type: 0,
        },
      ];
        
      this.$ajax
        .post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          // 假设 res.data[0] 是返回的用户数据数组
          this.tableData_stop = res.data[0].map(user => ({
            company_name: user.name || '未知',     // 组织名称
            company_number: user.id || '未知',     // 组织编号
            name: user.username || '未知',         // 姓名
            account: user.account  || '未知',  // 账户
            userid:user.userid,
          })); 
          // 打印映射后的用户信息
          // console.log("停止:", res.data);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);  // 打印更详细的错误信息
        });
    },
      // 停用或者启用
      ajax__open_stop(userid) {
      const isOpenArea = this.open_content;  // 判断是否在启用区域

      const actionMessage = isOpenArea ? '停用该条数据' : '启用该条数据';
      const successMessage = isOpenArea ? '停用成功!' : '启用成功!';
      const cancelMessage = isOpenArea ? '已取消停用' : '已取消启用';

      let params = [
        {
          functionName: "update_user_state",  // 调用存储过程的名称
          u_id: userid,  // 将传入的userid设置为 u_id
        },
      ];

      // 弹窗提示确认
      this.$confirm(`此操作将会${actionMessage}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 在用户点击确定后，发起 AJAX 请求
        this.$ajax
          .post("http://10.3.16.166:7003/api/pbl/localPost", params)
          .then((res) => {
            console.log(res);  // 打印成功响应
            // 提示操作成功
            this.$message({
              type: 'success',
              message: successMessage
            });
             // 调用停用和启用用户的函数
            this.ajax_user_stop();
            this.ajax_user_open();
          })
          .catch((err) => {
            // 处理失败的响应
            this.$message.error("处理失败");
            console.error("请求失败，错误信息：", err);  // 打印详细错误信息
          });
      }).catch(() => {
        // 取消操作后提示
        this.$message({
          type: 'info',
          message: cancelMessage
        });
      });
    },
    //设置管理员
    ajax_admin(userid, role) {
      // 判断用户的角色，弹出相应的提示
      let messageContent = role === 1 
        ? '此操作将会取消此用户的管理员状态，是否继续？' 
        : '此操作将会设置该用户为管理员，是否继续?';

      // 弹窗确认操作
      this.$confirm(messageContent, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 发送请求时的参数
        let params = [
          {
            functionName: "update_user_admin",  // 存储过程的名称
            u_id: userid,  // 用户ID
          },
        ];

        this.$ajax
        .post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          // 直接假设返回的数据格式正确，直接执行
          this.tableData = res.data[0].map(user => {
            return {
              company_name: user.name || '未知',
              company_number: user.id || '未知',
              name: user.username || '未知',
              account: user.account || '未知',
              role: user.role,
              userid: user.userid,
            };
          });
          // console.log("返回信息为：", res.data);
          this.ajax_user_stop();
          this.ajax_user_open();
          // 获取返回的信息
          let updatedMessage = res.data[0][0].message; // 这里假设res.data[0][0]是正确的
          if (updatedMessage == 2) {
            this.$message.error("该用户不是老师类型，无法设置为管理员");
          } else {
            this.$message({
              type: 'success',
              message: '设置管理员成功!',
            });
          }
        })
      }).catch(() => {
        // 取消操作时的提示
        this.$message({
          type: 'info',
          message: '已取消设置管理员操作',
        });
      });
    },
    // 创建用户的逻辑
    ajax_insert() {
      let params = [
        {
          functionName: "select_user_type1",  // 调用存储过程的名称
          u_type: 1,
        },
      ];

      // 发起 POST 请求
      this.$ajax
        .post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          // 在请求成功后，调用相应的函数
          if (res && res.data) {
            // this.ajax_user_stop();  // 如果是在启用区域，停用
            // this.ajax_user_open();  // 如果是在停用区域，启用
            // 打印映射后的用户信息
            // console.log("映射后的用户信息:", res.data);
          }
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("创建用户失败");
          console.error("请求失败，错误信息：", err);  // 打印更详细的错误信息
        });
    },
  },
  mounted() {
     this.ajax_user_stop();  // 如果是在启用区域，停用
     this.ajax_user_open();  // 如果是在停用区域，启用
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body{
  margin: 0px;
  padding: 0px;
  
}
/* 账户列表标题样式 */
.title_examine{
 width: 100%;
 height: 100px;
 background-color: #fff;
 border-radius: 10px 10px 10px 10px;
 margin-top: 30px;
 margin-left: 30px;
}
/* 内容区域 */
.content{
  width: 1760px;
  height: auto;
  /* border: 1px solid red; */
  float: left;
  margin-left: -50px;
}
/* 按钮区域 */
.button_top{
  width: 450px;
  /* border: 1px solid red; */
  height: 40px;
  margin-left: 90px;
  margin-top: 20px;
  letter-spacing: 2px;
}
.button_top a{
  cursor: pointer;
  /* border: 1px solid red; */
}
.button_top a:first-child{
  font-size: 15px;
  color: black;
  font-weight: bold;
  float: left;
}
.button_top a:nth-child(2) {
  font-size: 15px;
  color: rgb(179, 179, 179);
  font-weight: bold;
  float: right;
  margin-right: 30px;
}
/* 表单头高度 */
.el-table .el-table__header th {
  height: 60px; /* 设置表头行高 */
  color: rgb(51, 51, 51);
}
.el-table th {
  background-color: rgb(247, 247, 247) !important;
}
/* 表格内容的高度以及字体颜色 */
.el-table__row{
  height: 60px;
  color: black;
}
/* 表单中操作栏的文字间距 */
.el-button+.el-button, .el-checkbox{
    margin-left: 25px;
}
.add-button {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: black;
  font-weight: bold;
  margin-left: -1250px;
  margin-top: 35px;
  float: left;
}

/* +号图标 */
.add-icon {
  border: 2px solid black; /* 设置黑色边框 */
  color: black; /* 设置加号颜色为黑色 */
  border-radius: 50%; /* 设置为圆形 */
  width: 15px; /* 设置圆圈的宽度 */
  height: 15px; /* 设置圆圈的高度 */
  display: flex; /* 使用 Flexbox 使加号居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-right: 8px; /* 图标与文本之间的间距 */
}
/* 表单区域 */
.table{
  position: absolute; /* 设置为绝对定位 */
  top: 55%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 使其真正居中 */
  z-index: 10; /* 设置层次更高 */
  width: 920px;
  height: 660px;
  border: 1px solid rgb(225, 225, 225);
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
}
/* 头部区域 */
.table_top{
  width: 630px;
  height: 40px;
  float: left;
  margin-left: 250px;
  margin-top: 20px;
  /* border: 1px solid red; */
}
/* 头部区域文字 */
.organzition_top {
  font-size: 15px;
  text-align: center;
  float: left;
  padding-right: 95px;
  color: #0076fe;
}
/* 自定义斑马线的背景色 */
.el-table .success-row {
  background-color: #f0f9eb;
}
/* X号推出弹窗按钮 */
.table_close{
  color: #999;
  position: absolute;
  font-size: 30px;
  float: right;
  margin-right: 20px;
  cursor: pointer;
  transform: translate(-15px, 15px);  /* 向左移动 20px，向下移动 20px */
}
/* 输入框样式 */
.input-container {
  position: absolute;
  width: 145px;
  float: left;
  margin-top: 22px;
  margin-left: 722px;
  /* border: 1px solid red; */
}
.table_find {
  width: 100px; /* 设置容器的宽度 */
  flex-grow: 1; /* 让输入框自适应宽度 */
  height: 40px;
  padding-right: 30px; /* 为右侧图标留出空间 */
  padding-left: 10px; /* 可选，输入框内的左侧间距 */
  border-radius: 20px;
  border: 1px solid rgb(189, 189, 189);
  font-size: 15px;
  outline: none;
  color: black;
}
.table_find::placeholder {
  color: black;  /* 设置提示文字颜色为黑色 */
}
.input-container i[data-v-227179ae] {
  font-size: 18px;
  color: black;
  height: 15px;
  font-weight: bold;
}
.el-icon-search {
  font-size: 18px; /* 图标大小 */
  position: absolute;
  float: right;
  margin-left: -25px;
  margin-top: 10px;
  color: black;
  font-weight: bold;
}
/* 学校名称 */
.checkbox-container {
  margin-top: 60px;
  float: left;
  margin-left: 80px;
  /* border: 1px solid red; */
  height: 400px;
  width: 350px;
}
.checkbox-left {
  flex-direction: row-reverse; /* 选择框在右侧 */
  display: flex; /* 使用 Flexbox */
  align-items: center; /* 垂直居中 */
  position: relative; /* 为下划线定位 */
  padding-bottom: 15px; /* 设置文本与下划线之间的间距 */
  padding-top: 14px;
  float: left;
}
.checkbox-left a{
  float: left;
  margin-left: 75px;
  color: #000000;
  font-size: 14px;
}
/* 下划线 */
.checkbox-left::after {
  content: '';
  display: block;
  width: 95%;
  height: 1px;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 16%;
}
/* 去除原生复选框样式 */
input[type="checkbox"] {
  -webkit-appearance: none;  /* 去除Safari等浏览器默认样式 */
  -moz-appearance: none;     /* 去除Firefox的默认样式 */
  appearance: none;          /* 去除默认样式 */
  width: 20px;               /* 设置复选框的宽度 */
  height: 20px;              /* 设置复选框的高度 */
  border: 1.5px solid #000000;    /* 默认边框颜色 */
  position: relative;        /* 设置定位，方便后面绝对定位勾号 */
  cursor: pointer;           /* 鼠标悬停时显示为可点击状态 */
  float: right;
  margin-top: 20px;
  margin-right: 10px;
}

/* 选中状态 */
input[type="checkbox"]:checked {
  background-color: #007bff; /* 选中时背景颜色为蓝色 */
  border-color: #007bff;     /* 边框颜色为蓝色 */
}

/* 选中时的白色勾号 */
input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 5px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 悬停时复选框的边框颜色变化 */
input[type="checkbox"]:hover {
  border-color: #007bff;      /* 悬停时的边框颜色 */
}

/* 组织名称 */
.checkbox-company {
  margin-top: 60px; /* 可选：设置顶部间距 */
  float: right;
  margin-right: 120px;
  /* border: 1px solid red; */
  height: 400px;
  width: 350px;
}
/* 批量创建按钮 */
.Add_use{
  float: right;
  border: none;            
  padding: 0;               
  color: #0075FF;
  font-weight: bold;
  margin-right: 60px;
  margin-top: 50px;
  font-size: 15px;
  background: none;         /* 去掉背景 */
}
/* 输入姓名 */
.use_input {
  width: 220px;
  border: none;
  outline: none;
  border-bottom: 1.5px solid #000000;
  text-align: center;
  margin-top: 225px;
  color: black;
  margin-left: 125px;
  line-height: 35px;
  font-size: 15px;
}
/* 账户名称 */
.card_input {
  width: 220px;
  border: none;
  outline: none;
  border-bottom: 1.5px solid #000000;
  text-align: center;
  margin-top: 270px;
  color: black;
  margin-left: -220px;
  position: absolute;
  line-height: 35px;
  font-size: 16px;
}
/* 组织名称名称 */
.organzid_input {
  width: 220px;
  border: none;
  outline: none;
  border-bottom: 1.5px solid #000000;
  text-align: center;
  margin-top: 310px;
  color: black;
  margin-left: -220px;
  position: absolute;
  line-height: 35px;
  font-size: 16px;
}
/* 学校 */
.school_input {
  width: 220px;
  border: none;
  outline: none;
  border-bottom: 1.5px solid #000000;
  text-align: center;
  margin-top: 350px;
  color: black;
  margin-left: -220px;
  position: absolute;
  line-height: 35px;
  font-size: 16px;
}
.use_input::placeholder,.card_input::placeholder,.organzid_input::placeholder,.school_input::placeholder{
  color: black;
  font-weight:530;
}
/* 分页区域 */
.Pagetion {
  width: auto;
  height: 60px;
  margin-top: 30px;
  margin-left: 460px;
  float: left;
  /* border: 1px solid red; */
}
/* 分页页数间隔 */
/* 设置分页按钮的宽度 */
.el-pagination .el-pagination__prev,
.el-pagination .el-pagination__next {
  width: 60px; /* 设置上一页和下一页按钮的宽度 */
}
.el-pager li {
  padding: 0px 35px;
  background: #FFF;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 30px;
  box-sizing: border-box;
  text-align: center;
}
/* 新增账号弹窗 */
.add_account{
  position: absolute; /* 设置为绝对定位 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 使其真正居中 */
  z-index: 10; /* 设置层次更高 */
  width: 700px;
  height: auto;
  border: 1px solid rgb(225, 225, 225);
  background-color: rgb(255, 255, 255);
  margin-top: 35vh;
}
/* 操作字体 */
.el-button--text {
  border-color: transparent;
  color: #0076fe;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}
/* 添加账户头顶 */
.el-dialog__header{
  padding: 20px 20px 10px;
  text-align: center;
  background: #454545;
}
.el-dialog__title{
  font-size: 14px !important;
  color: #fff !important;
}
/* 取消按钮样式 */
.el-dialog__headerbtn{
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
/* 输入框 */
.form_input{
  width: 400px;
}
.el-form {
  /* 清除浮动 */
  overflow: auto;
  float: left;
  margin-left: 66px;
}
.el-form-item{
  float: left;
}
/* 确认跟取消区域 */
.form_tool{
  margin-top: 20px;
  float: left;
  margin-left: 90px;
}
/* 按钮样式 */
.form_tool .el-button{
  width: 100px;
}
</style>