<template>
  <div class="table-container">
    <div class="title_examine">
      <p style="font-size: 30px;font-weight: 400;margin-left: -91%;padding-top: 20px">账号审核</p>
  </div>
    <div class="examine">
      <div class="examine_title1">
        <a @click="showPending" :style="{ color: isPending ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">待审核({{ tableData.length }})</a>
      </div>
      <div class="examine_title2">
        <a @click="showApproved" :style="{ color: isApproved ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已通过</a>
      </div>
      <div class="examine_title3">
        <a @click="showRefused" :style="{ color: isRefused ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已拒绝</a>
      </div>
      <div class="examine_title4">
        <a @click="showAll" :style="{ color: isAll ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">全部记录</a>
      </div>
    </div>

    <div class="content">
      <div class="search-container">
        <div class="Search">
          <input type="text" placeholder="搜索记录" style="width: 120px; height: 40px; border-radius: 40px">
          <button class="search-button" @click="performSearch">
            <img src="@/assets/搜索框.png" alt="搜索" class="search-icon" />
          </button>
        </div>
      </div>

      <!-- 待审核的数据 -->
      <div v-if="isPending">
        <el-table :data="currentTableData" border style="width: 100%; background-color: white;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="company" label="组织名称" width="200">
            <template slot-scope="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column prop="phone" label="电话/邮箱" width="240"></el-table-column>
          <el-table-column prop="name" label="姓名" width="220" show-overflow-tooltip :label-class-name="'address-column'"></el-table-column>
          <el-table-column prop="submission_time" label="提交时间" width="220"></el-table-column>
          <el-table-column prop="remarks" label="备注" width="230"></el-table-column>
          <el-table-column label="操作" width="248">
            <template slot-scope="scope">
              <button @click="handleApprove(scope.row)" style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">通过</button>
              <button @click="handleIgnore(scope.row)" style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 35px;">拒绝</button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <!-- 分页组件 -->
        <el-pagination v-if="Pending_request"
          :current-page="currentPage" 
          :page-size="pageSize" 
          :page-sizes="pageSizeOptions"
          :total="tableData.length" 
          @size-change="handlePageSizeChange" 
          @current-change="handlePageChange"
          layout="total,sizes,prev, pager, next, jumper">
        </el-pagination>

    <!-- 已通过的数据 -->
    <div v-if="isApproved">
      <el-table :data="currentApprovedData" border style="width: 100%; background-color: white;"  @selection-change="handleApprovedSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="company" label="组织名称" width="200">
          <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="电话/邮箱" width="200" />
        <el-table-column prop="name" label="姓名" width="200" show-overflow-tooltip :label-class-name="'address-column'" />
        <el-table-column prop="submission_time" label="提交时间" width="200" />
        <el-table-column prop="remarks" label="备注" width="180" />
        <el-table-column prop="Pending_time" label="审核时间" width="200" />
        <el-table-column prop="open_organization" label="开通组织" width="200">
          <template slot="default" slot-scope="scope">{{ scope.row.open_organization }}</template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination :current-page="currentApprovedPage" :page-size="pageSize" :page-sizes="pageSizeOptions"
        :total="approvedData.length" @size-change="handlePageSizeChange" @current-change="handleApprovedPageChange"
        layout="total,sizes,prev, pager, next, jumper" />
    </div>

    <!-- 已拒绝的数据 -->
    <div v-if="isRefused">
      <el-table :data="currentRefusedData" border  style="width: 100%; background-color: white;"  @selection-change="handleRefusedSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="company" label="组织名称" width="200">
          <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="电话/邮箱" width="200" />
        <el-table-column prop="name" label="姓名" width="200" show-overflow-tooltip :label-class-name="'address-column'" />
        <el-table-column prop="submission_time" label="提交时间" width="200" />
        <el-table-column prop="remarks" label="备注" width="180" />
        <el-table-column prop="Pending_time" label="审核时间" width="200" />
        <el-table-column label="操作" width="195">
          <template slot="default" slot-scope="scope">
            <button @click="handleEdit(scope.row)" style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">移动至待审核</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination :current-page="currentRefusedPage" :page-size="pageSize" :page-sizes="pageSizeOptions"
        :total="RefusedData.length" @size-change="handlePageSizeChange" @current-change="handleRefusedPageChange"
        layout="total,sizes,prev, pager, next, jumper" />
    </div>

    <!-- 全部记录的数据 -->
    <div v-if="isAll">
      <el-table :data="currentAllData" border  style="width: 100%; background-color: white;"  @selection-change="handleAllSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="company" label="组织名称" width="200">
          <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="电话/邮箱" width="200" />
        <el-table-column prop="name" label="姓名" width="200" show-overflow-tooltip :label-class-name="'address-column'" />
        <el-table-column prop="submission_time" label="提交时间" width="200" />
        <el-table-column prop="remarks" label="备注" width="180" />
        <el-table-column prop="Pending_time" label="审核时间" width="200" />
        <el-table-column label="操作" width="200" prop="status">
          <template slot="default" slot-scope="scope">
            {{ getStatusText(scope.row.status) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination :current-page="currentAllPage" :page-size="pageSize" :page-sizes="[5, 10, 25]"
        :total="AllData.length" @size-change="handlePageSizeChange" @current-change="handleAllPageChange"
        layout="total,sizes,prev, pager, next, jumper" />
    </div>
  </div>

 

    </div>
</template>

<script>
import { reactive } from 'vue' // 添加这行导入
export default {
  name: 'IndexTable',
  components: {
  },
  data() {
    return {
      checked: true,
      selectedOptions: [], // 用于存储选中的复选框
      showCompany: false, // 默认隐藏
      selectedOrg: "CN", // 默认选中CN组织
      checkboxStates: Array(10).fill(false), // 确保初始化为一个包含10个元素的数组
      selectedSchools: Array(16).fill(''), // 确保初始化为一个包含16个空字符串的数组
      showCompanyList: reactive(Array(8).fill(false)), // 确保初始化为一个包含8个元素的数组
      button: Array(10).fill(false), // 确保初始化为一个包含10个元素的数组
      currentPage: 1,
      currentApprovedPage: 1,
      currentRefusedPage: 1,
      currentAllPage: 1,
      pageSize: 5, // 每页显示的条目数
      pageSizeOptions: [5, 10, 25, 50],  // 可选的页大小
      // 待审核数据
      tableData: [],
      // 已审核数据
      approvedData: [],
      RefusedData: [],
      AllData: [],
      Pending_request:true,
      isPending: true, // 初始状态为待审核
      isApproved: false,
      isRefused: false,
      isAll: false,
      showModal: false,// 弹窗是否显示
      showConfirmationModal: false,   // 控制确认通知申请人的弹窗




    }
  },
  computed: {
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
    currentApprovedData() {
      const start = (this.currentApprovedPage - 1) * this.pageSize;
      const end = this.currentApprovedPage * this.pageSize;
      return this.approvedData.slice(start, end);
    },
    currentRefusedData() {
      const start = (this.currentRefusedPage - 1) * this.pageSize;
      const end = this.currentRefusedPage * this.pageSize;
      return this.RefusedData.slice(start, end);
    },
    currentAllData() {
      const start = (this.currentAllPage - 1) * this.pageSize;
      const end = this.currentAllPage * this.pageSize;
      return this.AllData.slice(start, end);
    },
  },
  methods: {
    // 根据状态值返回对应的文本
    getStatusText(status) {
      switch (status) {
        case 0:
          return '待审核';
        case 1:
          return '已通过';
        case 2:
          return '已拒绝';
        default:
          return '未知';
      }
    },
    // 多选框选择事件处理
    handleSelectionChange(selection) {
      this.selectedPendingData = selection;
    },
    handleApprovedSelectionChange(selection) {
      this.selectedApprovedData = selection;
    },
    handleRefusedSelectionChange(selection) {
      this.selectedRefusedData = selection;
    },
    handleAllSelectionChange(selection) {
      this.selectedAllData = selection;
    },
    // 待审核的分页逻辑
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 已通过的分页逻辑
    handleApprovedPageChange(page) {
      this.currentApprovedPage = page;
    },
    // 已拒绝的分页逻辑
    handleRefusedPageChange(page) {
      this.currentRefusedPage = page;
    },
    // 全部记录的分页逻辑
    handleAllPageChange(page) {
      this.currentAllPage = page;
    },
    // 显示创建账户的弹窗
    showModalHandler() {
      this.showModal = true;
    },
    performSearch() {
      console.log('执行搜索');
    },

    handleApprove(row) {
      // 调用已通过的处理方法
      this.ajax__handle_pending_action(row.companyNumber, 'approve');  // 通过操作
    },

    handleIgnore(row) {
      // 调用已拒绝的处理方法
      this.ajax__handle_pending_action(row.companyNumber, 'ignore');  // 忽略操作
    },

    handleMoveToPending(row) {
      // 调用移回待审核的方法
      this.ajax__move_to_pending_from_rejected(row.companyNumber);  // 移动至待审核
    },

    // 创建账户的逻辑
    handleCreateAccount() {
      // 在这里可以进行创建账户的逻辑
      console.log('账户创建完成');
      // 点击创建账户后弹出通知确认的灰色弹窗
      this.showModal = false; // 关闭创建账户弹窗
      this.showConfirmationModal = true; // 打开通知确认弹窗
    },
    // 通知申请人
    notifyApplicant() {
      // 在这里进行通知申请人的逻辑
      this.$message.success('通知申请人成功！');
      this.showConfirmationModal = false; // 关闭通知确认弹窗
    },
    show_company() {
      this.showCompany = !this.showCompany;  // 切换 showCompany 的值
    },
    toggleCompany(index) {
      this.showCompanyList[index] = !this.showCompanyList[index];
    },

    // 待审核
    showPending() {
      console.log("Clicked Pending!");
      this.isPending = true;
      this.isApproved = false;
      this.isRefused = false;
      this.isAll = false;
      this.Pending_request=true;
    },
    // 已通过
    showApproved() {
      console.log("Clicked Approved!");
      this.Pending_request=false;
      this.isPending = false;
      this.isApproved = true;
      this.isRefused = false;
      this.isAll = false;
    },
    // 已拒绝
    showRefused() {
      // console.log("Clicked Refused!");
      this.isPending = false;
      this.isApproved = false;
      this.isRefused = true;
      this.isAll = false;
      this.Pending_request=false;
    },
    //全部记录
    showAll() {
      this.isPending = false;
      this.isApproved = false;
      this.isRefused = false;
      this.isAll = true;
      this.Pending_request=false;
    },
    // 用于切换组织
    selectOrg(org) {
      this.selectedOrg = org;
    },
    // 处理每页条目数量变化
    handlePageSizeChange(size) {
      this.pageSize = size;
    },
    // 用于显示待审核的表格数据
    ajaxpending() {
      console.log(11111);

      let params = [
        {
          functionName: "select_requestuser",  // 调用存储过程的名称
          r_type: 0,
          page:1,
          r_num: 20,
        },
      ];

      this.$ajax.post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          // 假设res.data是一个返回待审核数据的数组
          // console.log("返回结果为：", res.data);  // 打印返回的查询结果

          this.tableData = res.data[0].map(user => ({
            company: user.schoolName || '未知', // 组织名称
            phone: user.contact_info || '未知', 
            name: user.name|| '未知', // 真实姓名对应 name
            submission_time: user.create_at || '未知', // 提交时间对应 数据库里的create_at 
            remarks: user.remark || '未知', // 备注内容对应 remark
          })); // 将数据存储到 tableData 中
          // 打印映射后的用户信息
          console.log(this.tableData);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error(err);  // 打印错误信息
        });
    },

    // 用于显示已通过的表格数据
    ajaxapproved() {
      console.log(22222);
      let params = [
        {
          functionName: "select_requestuser",  // 调用存储过程的名称
          r_type: 1,
          page:1,
          r_num: 100,
        },
      ];
      this.$ajax.post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          // 假设res.data是一个返回已通过的数组
          this.approvedData = res.data[0].map(user => ({
            company: user.schoolName || '未知', // 组织名称对应 schoolName
            phone: user.contact_info || '未知', 
            name: user.name || '未知', // 真实姓名对应 alias
            submission_time: user.create_at || '未知', // 提交时间对应 数据库里的create_at
            remarks: user.remark || '未知', // 备注内容对应 remark
            Pending_time: user.active_at || '未知', // 处理时间对应 update_time
            open_organization: user.school_name || '未知', // 所属组织对应 school_name
          }));
          // 在这里进行已通过数据的获取和处理
          console.log(this.approvedData);
          console.log("获取到的数据为：" + res.approvedData)
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error(err);  // 打印错误信息
        });
    },

    // 用于显示已拒绝的表格数据
    ajaxrefused() {
      console.log(33333);
      let params = [
        {
          functionName: "select_requestuser",  // 调用存储过程的名称
          r_type: 2,
          page:1,
          r_num: 100,
        },
      ];

      this.$ajax.post("http://10.3.16.166:7003/api/pbl/localPost", params)
        .then((res) => {
          this.RefusedData = res.data[0].map(user => ({
            company: user.schoolName || '未知', // 组织名称对应 organizeid
            phone: user.contact_info || '未知', // 用户名对应 username,使用数据库里的username因为有邮箱作为联系方式
            name: user.name || '未知', // 真实姓名对应 alias
            submission_time: user.create_at || '未知', // 提交时间对应 数据库里的create_at
            remarks: user.remark || '未知', // 备注内容对应 remark
            Pending_time: user.active_at || '未知', // 处理时间对应 update_time
          }));
          // 在这里进行已拒绝数据的获取和处理
          console.log(this.RefusedData);
          console.log("获取到的数据为：" + res.RefusedData)
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error(err);  // 打印错误信息
        })
    },

      // 用于显示全部记录的表格数据
      ajaxAll() {
        console.log("获取所有记录");

        // 假设分别调用待审核、已通过、已拒绝的请求
        Promise.all([
          this.$ajax.post("http://10.3.16.166:7003/api/pbl/localPost", [
        { functionName: "select_requestuser", r_type: 0,page:1,r_num: 100,}
      ]),
          this.$ajax.post("http://10.3.16.166:7003/api/pbl/localPost", [
        { functionName: "select_requestuser", r_type: 1,page:1,r_num: 100, }
      ]),
          this.$ajax.post("http://10.3.16.166:7003/api/pbl/localPost", [
        { functionName: "select_requestuser", r_type: 2,page:1,r_num: 100, }
      ])
    ])
    .then((responses) => {
    // 解构响应
    const [pendingRes, approvedRes, refusedRes] = responses;
        // 合并待审核、已通过和已拒绝的数据
        const AllData = [
        ...pendingRes.data[0],  // 待审核数据
        ...approvedRes.data[0], // 已通过数据
        ...refusedRes.data[0],  // 已拒绝数据
      ];

      this.AllData = AllData.map(user => ({
        company: user.schoolName || '未知',
        phone: user.contact_info || '未知',
        name: user.name || '未知',
        submission_time: user.create_at || '未知',
        remarks: user.remark || '未知',
        Pending_time: user.active_at || '未知', // 处理时间对应 update_time
        // status: this.getStatusText(user.r_type), // 显示状态
      }));

      console.log(this.AllData);
    })
    .catch((err) => {
      this.$message.error("查询失败");
      console.error(err);
    });

    },

    // 通过操作，将数据移到已通过
    ajax_move_to_approved(companyNumber) {
      let params = [
        {
          functionName: "move_to_approved",  // 这里是将数据移至已通过状态的操作
          u_id: companyNumber,  // 公司编号
        },
      ];

      const successMessage = '数据已成功移动到已通过状态!';

      // 发起请求
      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.refreshTableData();  // 例如刷新表格数据
        })
        .catch((err) => {
          this.$message.error("操作失败");
          console.error("请求失败，错误信息：", err);
        });
    },

    // 忽略操作，将数据移到已拒绝
    ajax_move_to_rejected(companyNumber) {
      let params = [
        {
          functionName: "move_to_rejected",  // 这里是将数据移至已拒绝状态的操作
          u_id: companyNumber,  // 公司编号
        },
      ];

      const successMessage = '数据已成功移动到已拒绝状态!';

      // 发起请求
      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.refreshTableData();  // 例如刷新表格数据
        })
        .catch((err) => {
          this.$message.error("操作失败");
          console.error("请求失败，错误信息：", err);
        });
    },

    // 刷新数据（假设你需要刷新表格数据）
    refreshTableData() {
      // 在这里重新获取数据或者更新视图
      this.fetchData();  // 例如通过接口重新获取数据
    },


    // 在待审核区域点击通过和忽略
    ajax__handle_pending_action(companyNumber, actionType) {
      // 根据不同的操作，设置对应的API函数和提示消息
      let params = [
        {
          functionName: actionType === 'approve' ? "approve_user" : "ignore_user",  // 通过或忽略
          u_id: companyNumber,  // 传递公司编号
        },
      ];

      const actionMessage = actionType === 'approve' ? '通过该条数据' : '忽略该条数据';
      const successMessage = actionType === 'approve' ? '通过成功!' : '忽略成功!';
      const cancelMessage = actionType === 'approve' ? '已取消通过' : '已取消忽略';

      // 弹窗确认
      this.$confirm(`此操作将会${actionMessage}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定后发起请求
        this.$ajax
          .post("http://10.3.16.166:7003/api/pbl/localPost", params)
          .then((res) => {
            console.log(res);  // 打印成功响应
            this.$message({
              type: 'success',
              message: successMessage
            });

            // 如果是通过操作，调用已通过处理函数
            if (actionType === 'approve') {
              this.ajax_move_to_approved(companyNumber);
            } else {
              // 如果是忽略操作，调用已拒绝处理函数
              this.ajax_move_to_rejected(companyNumber);
            }
          })
          .catch((err) => {
            // 处理失败的响应
            this.$message.error("处理失败");
            console.error("请求失败，错误信息：", err);
          });
      }).catch(() => {
        // 取消操作后的提示
        this.$message({
          type: 'info',
          message: cancelMessage
        });
      });
    },

    // 在已拒绝区域点击移动至待审核
    ajax__move_to_pending_from_rejected(companyNumber) {
      let params = [
        {
          functionName: "move_to_pending",  // 移动至待审核的操作
          u_id: companyNumber,  // 传递公司编号
        },
      ];

      const successMessage = '已移动至待审核!';

      // 弹窗确认
      this.$confirm(`此操作将会将该条数据移回待审核, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发起请求
        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_move_to_pending(companyNumber);  // 数据移回待审核区域
          })
          .catch((err) => {
            this.$message.error("处理失败");
            console.error("请求失败，错误信息：", err);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移动至待审核'
        });
      });
    }

  },
  mounted() {
    this.ajaxpending(); // 组件挂载后调用 ajaxpending 方法
    this.ajaxapproved(); // 组件挂载后调用 ajaxapproved 方法
    this.ajaxrefused(); // 组件挂载后调用 ajaxrefused 方法
    this.ajaxAll(); // 组件挂载后调用 ajaxAll 方法
  },
}

</script>

<style scoped>
.content {
  width: 100%;
  /* position: relative; */
}

/* 账号审核标题样式 */
.title_examine{
 width: 97%;
 height: 100px;
 background-color: #fff;
 border-radius: 10px 10px 10px 10px;
}
/* 搜索框容器样式 */
.search-container {
  position: absolute;
  /* 设置为绝对定位 */
  right: -420px;
  /* 右对齐 */
  top: -50px;
  /* 根据需要调整顶部位置 */
}

/* 搜索框样式 */
.Search input {
  border: none;
  /* 去掉边框 */
  padding: 0 10px;
  /* 添加内边距 */
  padding-left: 15px;
  /* 增加左内边距以移动文字 */
  font-size: 18px;
  /* 增大字体大小 */
  outline: none;
  /* 去掉聚焦时的轮廓 */
  color: black;
}

/* 搜索框按钮样式 */
.search-button {
  position: absolute;
  /* 设置为绝对定位 */
  right: 10px;
  /* 右对齐，距离右边10px */
  height: 40px;
  /* 设置按钮高度与输入框一致 */
  border: none;
  /* 去掉边框 */
  background: none;
  /* 去掉背景 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
  padding: 0;
  /* 去掉内边距 */
}

/* 搜索框图标样式 */
.search-icon {
  width: 40px;
  /* 设置图标宽度 */
  height: 40px;
  /* 设置图标高度 */
  opacity: 0.5;
  /* 设置透明度 */
}

.table-container {
  padding: 30px;
  /* 可选：添加一些内边距 */
}

.el-table {
  border: 1px solid #dcdfe6;
  /* 设置表格边框 */
}

.el-table th,
.el-table td {
  border: 1px solid #dcdfe6;
  /* 设置单元格边框 */
  height: 80px;
}

/* 设置表头背景颜色 */
.el-table th {
  background-color: #f5f7f9 !important;
  /* 设置表头背景颜色 */
  height: 60px;
}

.address-column {
  margin: 0;
  /* 调整边距 */
  padding: 5px;
  /* 调整填充 */
}

/*审核框架 */
.examine {
  width: 55%;
  height: 50px;
  margin-top: 20px;
  /* border: 1px solid black; */
}

.examine_title1,
.examine_title2,
.examine_title3,
.examine_title4 {
  width: 15%;
  height: 50px;
  float: left;
}

.examine_title1 p,
.examine_title2 p,
.examine_title3 p,
.examine_title4 p {
  margin-top: 10px;
  margin-left: -20px;
}

/* 新增账户对话框样式 */
.add-account-button {
  margin-top: 20px;
  /* 添加顶部间距 */
  padding: 10px 20px;
  /* 添加内边距 */
  background-color: transparent;
  /* 去掉按钮背景 */
  color: black;
  /* 设置字体颜色为黑色 */
  border-radius: 4px;
  /* 设置圆角 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
  font-size: 18px;
  /* 增大字体 */
  display: flex;
  /* 使用 Flexbox 布局 */
  border: none;
  align-items: center;
  /* 垂直居中对齐 */
}

.add-icon {
  width: 20px;
  /* 设置小图片的宽度 */
  height: 20px;
  /* 设置小图片的高度 */
  margin-right: 8px;
  /* 图片与文字之间的间距 */
}

/* 对话框内容样式 */
.modal-content {
  display: flex;
  flex-direction: column;
}

/* 标题样式 */
.modal-header {
  display: flex;
  gap: 80px;
  /* 设置元素之间的固定间距 */
  justify-content: center;
  /* 居中对齐所有元素 */
  align-items: center;
  /* 垂直居中对齐 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
}

/* 组织标题样式 */
.org-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.org-title h3 {
  margin-right: 10px;
  font-weight: bold;
}

/* dialog搜索框容器 */
.dialogsearch-container input {
  border: none;
  /* 去掉边框 */
  padding: 0 10px;
  /* 添加内边距 */
  padding-left: 15px;
  /* 增加左内边距以移动文字 */
  font-size: 18px;
  /* 增大字体大小 */
  outline: none;
  /* 去掉聚焦时的轮廓 */
  color: black;
  border: 1px solid black;
}




/* dialog搜索框按钮样式 */
.dialogsearch-button {
  position: absolute;
  /* 设置为绝对定位 */
  right: 310px;
  /* 右对齐，距离右边310px */
  height: 40px;
  /* 设置按钮高度与输入框一致 */
  border: none;
  /* 去掉边框 */
  background: none;
  /* 去掉背景 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
  padding: 0;
  /* 去掉内边距 */
}


/* 复选框容器样式 */
.checkbox-container {
  display: flex;
  flex-direction: row;
  /* 水平排列 */
  gap: 10px;
  /* justify-content: space-between; 在两排之间留出空间 */
  margin-top: 100px;
  /* 添加顶部间距 */
}


/* 复选框组样式 */
.checkbox-group {
  float: right;
  margin-left: 140px;
  /* border: 1px solid red; */
  height: 400px;
  width: 350px;
  padding-top: 20px;
}

/* 复选框在右侧样式 */
.checkbox-left {
  flex-direction: row-reverse;
  /* 选择框在右侧 */
  display: flex;
  /* 使用 Flexbox */
  align-items: center;
  /* 垂直居中 */
  position: relative;
  /* 为下划线定位 */
  padding-top: 15px;
  /* 设置文本与下划线之间的间距 */
}

/*复选框文本样式 */
.checkbox-left::after {
  content: '';
  display: block;
  width: 150%;
  height: 1px;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: -12%;
}

hr {
  margin: 20px 0;
  /* 上下间距 */
  border: 1px solid #dcdfe6;
  /* 分隔线颜色 */
}

/* dialog学校复选框样式 */
.checkbox-group span.el-checkbox__inner {
  position: absolute;
  right: -125px;
  width: 20px;
  height: 20px;
}

/* dialog组织下拉框复选框样式 */
.checkbox-company span.el-checkbox__inner {
  width: 20px;
  height: 20px;
}

/* 复选框在右侧样式 */
.checkbox-company {
  float: right;
  margin-left: 140px;
  /* border: 1px solid red; */
  height: 400px;
  width: 350px;
  padding-top: 20px;
}

.checkbox-right {
  align-items: center;
  /* 垂直居中 */
  position: relative;
  /* 为下划线定位 */
  padding-bottom: 5px;
  /* 设置文本与下划线之间的间距 */
  padding-top: 15px;
}

.checkbox-right::after {
  content: '';
  /* 创建伪元素 */
  display: block;
  /* 使其成为块级元素 */
  width: 80%;
  /* 下划线宽度，调整为所需的宽度 */
  height: 1px;
  /* 下划线高度 */
  background-color: black;
  /* 下划线颜色 */
  position: absolute;
  /* 绝对定位 */
  bottom: 0;
  /* 距离底部 */
  left: 8%;
  /* 调整下划线的水平位置，设置为10% */
}

/* 为 select 添加自定义下拉箭头 */
.select_right {
  border: none;
  /* 去掉边框 */
  outline: none;
  /* 去掉聚焦时的轮廓线 */
}

/* 公司下拉菜单 */
.company_checkbox {
  position: absolute;
  /* 设置为绝对定位 */
  width: 278px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(239, 239, 239);
  margin-left: 28px;
  margin-top: 6px;
  z-index: 200;
  padding: 10px 0;
  /* 给下拉菜单加一点内边距，避免内容太紧 */
}

/* 每个下拉项的容器，使用flexbox布局 */
.com_check {
  display: flex;
  /* 使用flex布局 */
  justify-content: space-between;
  /* 让文本和复选框两端对齐 */
  align-items: center;
  /* 让文本和复选框垂直居中对齐 */
  padding: 5px 20px;
  /* 给复选框加点内边距，避免紧凑 */
  position: relative;
  /* 确保伪元素的定位是相对当前元素 */
  margin-bottom: 10px;
  /* 给每个复选框之间留点空隙 */
}

/* 复选框下的下划线 */
.com_check::after {
  content: '';
  /* 创建伪元素 */
  display: block;
  /* 使其成为块级元素 */
  width: 100%;
  /* 下划线宽度与复选框相同 */
  height: 1px;
  /* 下划线高度 */
  background-color: rgb(214, 214, 214);
  /* 下划线颜色 */
  position: absolute;
  /* 绝对定位 */
  bottom: 0;
  /* 距离底部 */
  left: 0;
  /* 距离左边 */
}

/* 新增学校按钮 */
.com_but {
  width: 275px;
  height: 35px;
  margin-top: 10px;
  /* 给按钮与上面的选项留一点空隙 */
  border: none;
  background-color: rgb(255, 255, 255);
  /* 按钮背景色 */
  outline: none;
  color: rgb(98, 98, 98);
  text-align: left;
  text-indent: 20px;
  /* 左侧文字缩进 */
  font-size: 15px;
  padding-bottom: 5px;
  /* 设置文本与下划线之间的间距 */
}

/* 给每个下拉项之间加点空隙 */
.checkbox-right {
  margin-bottom: 10px;
  /* 给每个项之间留点空隙 */
}





/* 弹窗部分的样式 */
.confirmation-dialog .el-dialog {
  position: absolute;
  top: 20%;
  left: 40%;
}

/* 弹窗内容部分的样式 */
.modal-content .el-overlay .el-dialog {
  text-align: center;
  padding: 20px;
}

/* 弹窗标题部分的样式 */

/* 是否通知申请人弹窗标题部分的样式 */
.confirmation-modal {
  position: fixed;
  /* 使用固定定位 */
  transform: translate(-50%, -50%);
  /* 使其真正居中 */
  background-color: rgba(255, 255, 255, 0.9);
  /* 背景颜色 */
  border: 1px solid #ccc;
  /* 边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 阴影效果 */
  padding: 20px;
  /* 内边距 */
  z-index: 2000;
  /* 确保在其他元素之上 */
}

/* 是否通知申请人弹窗标题部分按钮的样式 */
.button-container {
  display: flex;
  /* 使用flex布局 */
  justify-content: space-around;
  /* 按钮之间的间距 */
  margin-top: 120px;
  /* 按钮与文本之间的间距 */
}


/* 分页功能的样式 */
.el-pagination {
  margin-top: 50px;
  /* 调整分页组件的顶部向上方距离50px */
}

/* 设置分页按钮的宽度 */
.el-pagination .el-pagination__prev,
.el-pagination .el-pagination__next {
  width: 60px;
  /* 设置上一页和下一页按钮的宽度 */
}

/* 设置页码按钮的宽度 */
.el-pagination .el-pager li {
  width: 50px;
  /* 设置每个页码按钮的宽度 */
}

/* 设置分页大小选择框的宽度 */
.el-pagination .el-select {
  width: 80px;
  /* 设置分页大小选择框的宽度 */
}

/*取消dialog学校最后一个的margin值 */
.el-checkbox {
  margin-right: none !important;
}
.cell{
  position: absolute;
}
.el-checkbox span {
    margin-left: 3px;
}
/* 取消 ElTableColumn 默认的 inline-block 和 vertical-align 样式 */
.el-scrollbar__view {
  display: block !important;
  /* 或者 display: flex; 根据你的需求 */
}
</style>