<template>
  <!-- 背景层，覆盖整个页面 -->
  <div>
    <!-- 头部区域 -->
    <div class="title_examine">
      <p style="font-size: 30px;font-weight: 400;float: left;margin-left: 30px;padding-top: 20px">账号列表</p>
    </div>
    <!-- 学习名称组织名称表单区域 -->
    <el-dialog :visible.sync="isOrgFormVisible" :before-close="close_table" custom-class="table" width="920px">
      <!-- 自定义头部 -->
      <div class="el_header" style=" width: 104.6%;height: 80px;text-align: center;background: #454545;margin-top: -60px;float: left;margin-left: -20px;">
        <span class="el_title">移动选择</span>
        <button type="button" aria-label="Close" class="el_close" @click="form_clost">
          <i></i>
        </button>
      </div>
      <!-- 搜索框区域 -->
      <div class="input-container">
        <input type="text" v-model="searchQuery" placeholder="搜索学校" class="table_find" @keyup.enter="ajax_school_name(searchQuery, school.type)" />
        <i class="el-icon-search" @click="ajax_school_name(searchQuery, school.type)"></i>
        <el-form :model="school" ref="form" style="float: left;margin-left: 10px;width: 200px;height: 30px;margin-top: 1px;">
          <el-select v-model="school.OrgId" placeholder="请选择组织" class="custom-select">
            <!-- 动态生成 <el-option> -->
            <el-option
              v-for="(org, index) in organizations"
              :key="index"
              :label="org.name"
              :value="org.id">
              {{ org.name }}
            </el-option>
          </el-select>
        </el-form>
      </div>
      <div class="table_down">
        <div v-if="cn_org">
          <div class="checkbox-container">
            <!-- 循环渲染每个学校 -->
            <div v-for="(school, index) in cn_school" :key="index" class="checkbox_comment">
              <div class="checkbox-left">
                <label class="checkbox-label">
                  <!-- 学校名称，显示 school.name -->
                  <a>{{ school.name }}</a>
                </label>
              <!-- 单选框，使用 v-model 绑定到一个变量 -->
              <input type="radio" class="checkbox_input_org" name="school_selection" :value="school.name" v-model="selectedSchool">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isOrgFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_school_dialog = true">新增学校</el-button>
        <el-button type="primary" @click="add_org_dialog = true">新增组织</el-button>
        <el-button type="primary" @click="ajax_confirm">确认移动</el-button>
      </div>
    </el-dialog>
    <!-- 新增账户弹窗 -->
    <el-dialog :visible.sync="isTableUseVisible" :before-close="close_table" custom-class="add_account" width="700px">
      <!-- 自定义头部 -->
      <div class="el_header">
        <span class="el_title">新增账户</span>
          <i  @click="form_clost"></i>
      </div>
      <div class="el-dialog__body"> 
        <form data-v-3a331e10="" class="el-form">
          <div data-v-3a331e10="" class="el-form-item">
            <label class="el-form-item__label" style="width: 100px;">学生姓名</label>
            <div class="el-form-item__content" style="margin-left: 5px;">
              <span data-v-3a331e10="">
                <div data-v-3a331e10="" class="add_input el-input el-input--suffix">
                  <input type="text" autocomplete="off" placeholder="请输入学生姓名" class="el-input__inner">
                </div>
              </span>
            </div>
          </div>
          <div data-v-3a331e10="" class="el-form-item">
            <label class="el-form-item__label" style="width: 100px;">学生姓名</label>
            <div class="el-form-item__content" style="margin-left: 5px;">
              <span data-v-3a331e10="">
                <div data-v-3a331e10="" class="add_input el-input el-input--suffix">
                  <input type="text" autocomplete="off" placeholder="请输入学生姓名" class="el-input__inner">
                </div>
              </span>
            </div>
          </div>
          <div data-v-3a331e10="" class="el-form-item">
            <label class="el-form-item__label" style="width: 100px;">选择组织</label>
            <div class="el-form-item__content" style="margin-left: 5px;">
              <el-select v-model="school.type" placeholder="请选择组织" class="custom-select">
                <!-- 动态生成 <el-option> -->
                <el-option  :value="1">组织1</el-option>
              </el-select>
            </div>
          </div>
          <div data-v-3a331e10="" class="el-form-item">
            <label class="el-form-item__label" style="width: 100px;">选择学校</label>
            <div class="el-form-item__content" style="margin-left: 5px;">
              <el-select v-model="school.type" placeholder="请选择" class="custom-select">
                <!-- 动态生成 <el-option> -->
                  <el-option  :value="1">学校1</el-option>
              </el-select>
            </div>
          </div>
        </form> 
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="el-dialog__footer">
        <el-button @click="isTableUseVisible = false">取 消</el-button>
        <el-button type="primary">确认</el-button>
      </div>
    </el-dialog>
    <!-- 新增学校弹窗 -->
    <el-dialog :visible.sync="add_school_dialog" :before-close="close_add_school" custom-class="add_account" width="700px">
    <!-- 自定义头部 -->
    <div class="el_header">
      <span class="el_title">新增学校</span>
      <i @click="form_clost"></i>
    </div>
    <div class="el_dialog_school_content">
      <form class="el-form">
        <!-- 学校名称 -->
        <div class="el-form-item" style="margin-top: 15px;">
          <label class="el-form-item__label" style="width: 100px;">学校名称</label>
          <div class="el-form-item__content" style="margin-left: 5px;">
            <span>
              <div class="add_input el-input el-input--suffix">
                <input v-model="sch_name" type="text" autocomplete="off" placeholder="学校名称" class="el-input__inner">
              </div>
            </span>
          </div>
        </div>
        <!-- 地区 -->
        <div class="el-form-item">
          <label class="el-form-item__label" style="width: 100px;">地区</label>
          <div class="el-form-item__content" style="margin-left: 5px;">
            <span>
              <div class="add_input el-input el-input--suffix">
                <input v-model="region" type="text" autocomplete="off" placeholder="请输入地区" class="el-input__inner">
              </div>
            </span>
          </div>
        </div>
        <!-- 学校编码 -->
        <div class="el-form-item">
          <label class="el-form-item__label" style="width: 100px;">学校编码</label>
          <div class="el-form-item__content" style="margin-left: 5px;">
            <span>
              <div class="add_input el-input el-input--suffix">
                <input v-model="schoolCode" type="text" autocomplete="off" placeholder="请输入编码" class="el-input__inner">
              </div>
            </span>
          </div>
        </div>
        <!-- 学校类型 -->
        <div class="el-form-item">
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <el-radio v-model="schoolType" label="1">普通学校</el-radio>
              <el-radio v-model="schoolType" label="2">协同学校</el-radio>
            </span>
          </div>
        </div>
        <!-- 登录权限 -->
        <div class="el-form-item">
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <el-radio v-model="loginPermission" label="1">允许登录</el-radio>
              <el-radio v-model="loginPermission" label="2">不可登录</el-radio>
            </span>
          </div>
        </div>
        <!-- 上级组织 -->
        <div class="el-form-item">
          <label class="el-form-item__label" style="width: 100px;">上级组织</label>
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <div class="add_input el-input el-input--suffix">
                <el-form :model="school" ref="form" style="float: left; margin-left: 20px; width: 200px; height: 30px; margin-top: -65px;">
                  <el-select v-model="school.parentOrgId" placeholder="请选择组织" class="custom-select">
                    <el-option
                      v-for="(org, index) in organizations"
                      :key="index"
                      :label="org.name"
                      :value="org.id">
                      {{ org.name }}
                    </el-option>
                  </el-select>
                </el-form>
              </div>
            </span>
          </div>
        </div>
      </form>
    </div>
    <!-- 按钮区域 -->
    <div slot="footer" class="el-dialog__footer">
      <el-button @click="add_school_dialog = false">取 消</el-button>
      <el-button type="primary" @click="ajax_add_school">确认</el-button>
    </div>
  </el-dialog>
      <!-- 新增组织弹窗 -->
      <el-dialog :visible.sync="add_org_dialog" :before-close="close_add_org" custom-class="add_account" width="700px">
      <!-- 自定义头部 -->
      <div class="el_header">
        <span class="el_title">新增组织</span>
        <i @click="form_clost"></i>
      </div>
      <div class="el_dialog_org_content">
        <form class="el-form">
          <!-- 组织名称 -->
          <div class="el-form-item" style="margin-top: 15px;">
            <label class="el-form-item__label" style="width: 100px;">组织名称</label>
            <div class="el-form-item__content" style="margin-left: 5px;">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="orgName" type="text" autocomplete="off" placeholder="组织名称" class="el-input__inner">
                </div>
              </span>
            </div>
          </div>
          <!-- 地区 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px;">随机码</label>
            <div class="el-form-item__content" style="margin-left: 5px;">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="randomCode" type="text" autocomplete="off" placeholder="请输入随机码" class="el-input__inner">
                </div>
              </span>
            </div>
          </div>
          <!-- 登录权限 -->
          <div class="el-form-item">
            <div class="el-form-item__content" style="margin-left: 100px;">
              <span>
                <el-radio v-model="radio" label="1">允许登录</el-radio>
                <el-radio v-model="radio" label="2">不可登录</el-radio>
              </span>
            </div>
          </div>
        </form>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="add_org_dialog = false">取 消</el-button>
        <el-button type="primary" @click="ajax_add_org">确认</el-button>
      </div>
    </el-dialog>
    <!-- 内容区域 -->
    <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;width: 100%;float: left;">
        <el-table :data="paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" stripe :header-cell-style="headerCellStyle">
          <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="300" header-align="center" align="center" />
          <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="300" header-align="center" align="center" />
          <el-table-column show-overflow-tooltip prop="name" label="姓名" width="300" header-align="center" align="center" />
          <el-table-column show-overflow-tooltip prop="account" label="账户" width="300" header-align="center" align="center" />
          <el-table-column  label="操作" width="300" header-align="center"  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(row.userid)">移动</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" stripe :header-cell-style="headerCellStyle">
          <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>
import { API_CONFIG } from '@/common/apiConfig';
export default {
  name: 'HelloWorld',
  components: {
  },
  data() {
    return { 
      // 控制下拉菜单的显示与隐藏
      dropdownVisible: false,
      checked: true,
      showCompany: false, // 默认隐藏
      // 响应式数据
      //移动弹窗
      isOrgFormVisible: false,
      //新增账户
      isTableUseVisible: false,
      //新增组织
      add_org_dialog:false,
      //新增组织的变量定义
      orgName: '',       // 组织名称
      u_create: '',    // 创建人
      randomCode:'' ,//随机码（可以为空）
      uLogin: '1',         // 登录状态 (1 或 2)
      radio:'1',
      //新增学校参数的定义
      sch_name:'', //学校名称
      region:'',  //地区
      schoolType:'1', //学校单选框类型
      schoolCode:'', //学校编码
      loginPermission:"1",//是否允许登录
      //学校弹窗
      add_school_dialog : false,
      isCompanyDropdownVisible: false,
      companyListVisibility: [false, false, false],
      open_content: true,
      add_button: true,
      stop_content: false,
      open: true, 
      stop: false,
      // 用来存储选中的学校名称
      selectedSchool: "",
      // 启用区域分页
      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: ''
        },
      //移动组织初始化
      cn_org:true,
      hk_org:false,
      com_org:false,
      // 用于存放从后台获取的组织数据
      organizations: [],  
      // 用于存放从后台获取的学校数据
      cn_school: [],
      searchQuery: "",  // 用来存储输入框的值
      dialogVisible: true,
      school: {
        OrgId: null, // 初始化 OrgId 为 null 或适当的默认值
      },
      // 用来存储传递的参数
      ajaxParams: null,
      check_user_id: "", // 存放当前选择的用户的ID
    };
  },
  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(userid) {
      this.check_user_id = userid;  // 将选中的userid存储到check_user_id中
      this.isOrgFormVisible = true; // 显示区域
      console.log("选中的用户ID：", this.check_user_id); // 打印出当前的选中用户ID
    },
    // 移动关闭按钮
    close_table() {
      this.isOrgFormVisible = false;
      this.isTableUseVisible = false;
    },
    // 新增账户
    nextStep() {
      this.isTableUseVisible = true;
    },
    //新增账户关闭
    form_clost(){
      this.isTableUseVisible = false;
    },
    //新增组织关闭
    close_add_org(){
      this.add_org_dialog = false;
    },
    //新增学校关闭
    close_add_school(){
      this.add_school_dialog = 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;
    },
    //移动按钮中中国大陆区域
    cn_orgization(){
      this.cn_org = true;
      this.hk_org = false;
      this.com_org = false;
    },
    //移动按钮中香港区域
    hk_orgization(){
      this.cn_org = false;
      this.hk_org = true;
      this.com_org = false;
    },
    //移动按钮中外国区域
    com_orgization(){
      this.cn_org = false;
      this.hk_org = false;
      this.com_org = true;
    },
    // 表头的背景色
    headerCellStyle() {
      return { backgroundColor: '#f1f1f1' };
    },
    // 已启用
    ajax_user_open() {
      const params = [API_CONFIG.ajaxstart]; // 使用配置中的接口参数
      this.$ajax.post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // 假设 res.data[0] 是返回的用户数据数组
          this.tableData = res.data[0].map(user => ({
            company_name: user.org_name || '暂无',     // 组织名称
            company_number: user.org_id || '暂无',     // 组织编号
            name: user.user_name || '暂无',         // 姓名
            account: user.account_name  || '暂无',  // 账户
            userid:user.user_id,
            role: user.admin_role || 0,                  // 角色，假设 1 为管理员，0 为普通用户
            school:user.s_id,
            action: user.admin_role === 1 
              ? '已设置管理员' 
              : '设置管理员'                      // 根据 role 字段设置按钮文字
          }));
          // 打印映射后的用户信息
          // console.log("启用的用户信息:", res.data);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);  // 打印更详细的错误信息
        });
    },
    //停用
    ajax_user_stop() {
      const params = [API_CONFIG.ajaxend]; // 使用配置中的接口参数
      this.$ajax.post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // 假设 res.data[0] 是返回的用户数据数组
          this.tableData_stop = res.data[0].map(user => ({
            company_name: user.org_name || '暂无',     // 组织名称
            company_number: user.org_id || '暂无',     // 组织编号
            name: user.user_name || '暂无',         // 姓名
            account: user.account_name  || '暂无',  // 账户
            userid:user.user_id,
          })); 
          // 打印映射后的用户信息
          // 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: API_CONFIG.userstate.functionName,  // 调用存储过程的名称
          u_id: userid,  // 将传入的userid设置为 u_id
        },
      ];
      // 弹窗提示确认
      this.$confirm(`此操作将会${actionMessage}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 在用户点击确定后，发起 AJAX 请求
        this.$ajax.post(API_CONFIG.baseUrl, params)
          .then(() => {
            // 提示操作成功
            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: API_CONFIG.ajax_admin.functionName,  // 存储过程的名称
          u_id: userid,
        },
      ];

      this.$ajax.post(API_CONFIG.baseUrl, 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);
        // 获取返回的信息
        let updatedMessage = res.data[0][0].message; // 假设 res.data[0][0] 是正确的

        if (updatedMessage == 2) {
          // 如果返回信息是2，提示用户不是老师类型
          this.$message.error("该用户不是老师类型，无法设置为管理员");
        } else {
          // 如果更新成功，显示成功提示并调用 ajax_user_stop 和 ajax_user_open
          this.$message({
            type: 'success',
            message: '已成功执行!',
          });
          // // 只有在成功执行时调用这两个函数
          // this.ajax_user_stop();
          // this.ajax_user_open();
        }
      }).catch((error) => {
        // 请求失败的处理
        console.error("请求失败:", error);
        this.$message({
          type: 'error',
          message: '操作失败，请稍后再试',
        });
      });
    }).catch(() => {
      // 取消操作时的提示
      this.$message({
        type: 'info',
        message: '已取消操作',
      });
    });
  },
  // 学校查询
  ajax_school() {
    const params = [API_CONFIG.ajax_school]; // 使用配置中的接口参数
    this.$ajax.post(API_CONFIG.baseUrl, params)
      .then((res) => {
        // console.log("返回的数据为：", res.data);  // 检查返回的数据
        if (res.data && Array.isArray(res.data[0])) {
          // 将 name 和 org 都存入 cn_school 数组中
          this.cn_school = res.data[0].map(item => ({
            name: item.name,
            id: item.id
          }));
        }
      })
      .catch((err) => {
        this.$message.error("查询失败");
        console.error("请求失败，错误信息：", err);
      });
  }, 
  //组织查询
  ajax_org() {
    const params = [API_CONFIG.ajax_org]; // 使用配置中的接口参数
    this.$ajax.post(API_CONFIG.baseUrl, params)
      .then((res) => {
        // console.log("返回的数据为：", res.data);  // 检查返回的数据
        if (res.data && Array.isArray(res.data[0])) {
          // 使用 map() 提取所有组织名称
          this.organizations = res.data[0].map(item => ({
              name: item.name,
              id: item.id
          }));
        }
        // console.log("返回的结果为：",this.organizations);
      })
      .catch((err) => {
        this.$message.error("查询失败");
        console.error("请求失败，错误信息：", err);
      });
  },
  //关键词查询
  ajax_school_name(searchQuery) {
    // 获取选择的组织ID
    const orgId = this.school.OrgId || "";  // 如果没有选择组织，则为空字符串
    // 检查 searchQuery 是否为空
    if (!searchQuery) {
      this.$message.warning('请输入搜索内容');
      return;
    }

    let params = [
      {
        functionName: API_CONFIG.ajax_school_name.functionName,  // 调用存储过程的名称
        u_name: searchQuery,  // 用户输入的搜索关键词
        u_org: orgId  // 传入的组织 ID
      }
    ];

    this.$ajax.post(API_CONFIG.baseUrl, params)
      .then((res) => {
        // console.log('返回的学校数据:', res.data);  // 打印返回的数据

        // 检查是否查询到有效数据
        if (res.data && Array.isArray(res.data[0]) && res.data[0].length > 0) {
          // 只有在查询到学校数据且数组不为空时才更新 cn_school
          this.cn_school = res.data[0].map(item => ({
            name: item.name,
            id: item.id
          }));
          // 查询成功且更新后，显示成功消息
          this.$message.success('成功查询到了学校');
        } else {
          // 如果没有找到匹配的学校，保持原有的 cn_school 数组内容
          this.$message.warning('没有找到匹配的学校');
        }

        // 清空选择框的选择状态
        this.$nextTick(() => {
          // 通过清空绑定的 v-model 的值来清除选择框的选择状态
          this.searchQuery = '';  // 清空搜索框内容
          this.selectedSchool='';
        });
      })
      .catch((err) => {
        this.$message.error("查询失败");
        console.error("请求失败，错误信息：", err);
      });
  },
  //新增学校
  ajax_add_school() {
    // 校验学校名称是否为空
    if (!this.sch_name || this.sch_name.trim() === "") {
      this.$message.error("学校名称不能为空！");
      return;
    }

    // 构建请求参数
    let params = [
      {
        functionName: API_CONFIG.ajax_add_school.functionName,  // 调用存储过程的名称
        u_name: this.sch_name,  // 学校名称，绑定到 orgName
        u_org: this.school.parentOrgId || "",  // 选择的组织的 ID，绑定到 school.parentOrgId，如果没有选择则为空
        u_dest: this.region || "",  // 地区，绑定到 region，如果为空则传空字符串
        u_type: this.schoolType || "",  // 学校类型，绑定到 schoolType，如果没有选择则为空
        u_code: this.schoolCode || "",  // 学校编码，绑定到 schoolCode，如果为空则传空字符串
        u_isLogin: this.loginPermission === '1' ? 1 : 2,  // 是否允许登录，默认传 2（不允许登录）如果没有选择
      }
    ];

    // 发起请求
    this.$ajax.post(API_CONFIG.baseUrl, params)
      .then(() => {
        this.$message({
          type: 'success',
          message: '已成功执行!',
        });
        // 刷新学校列表
        this.ajax_school();
        // 关闭弹窗
        this.add_school_dialog = false;
        // 清空输入框、下拉菜单选择和单选框
        this.sch_name = '';           // 清空学校名称
        this.school.parentOrgId = ''; // 清空组织选择
        this.region = '';             // 清空地区选择
        this.schoolType = '1';        // 清空学校类型选择
        this.schoolCode = '';        // 清空学校编码
        this.loginPermission = '1';   // 清空登录权限的选择

      })
      .catch((err) => {
        this.$message.error("插入失败");
        console.error("请求失败，错误信息：", err);
      });
  },
  //新增组织
  ajax_add_org() {
    // 获取弹窗中的输入内容
    let orgName = this.orgName;  // 组织名称
    let randomCode = this.randomCode || '';  // 随机码（可为空）
    let uLogin = this.radio;  // 获取复选框选中的值（1 或 2）

    // 验证组织名称不能为空
    if (!orgName) {
      this.$message.error("组织名称不能为空");
      return;
    }

    // 构造请求参数
    let params = [
      {
        functionName: API_CONFIG.ajax_add_org.functionName,  // 调用存储过程的名称
        u_name: orgName,  // 组织名称
        u_create: "0",  // u_create 固定为0
        u_code: randomCode,  // 随机码（可以为空）
        u_login: uLogin  // 登录状态
      }
    ];

    // 发起请求
    this.$ajax.post(API_CONFIG.baseUrl, params)
      .then(() => {
        this.$message({
            type: 'success',
            message: '已成功执行!',
          });
          // 刷新组织列表
          this.ajax_org();
          //关闭弹窗
          this.add_org_dialog = false;
          // 清空输入框、下拉菜单选择和单选框
          this.orgName = '';           // 清空学校名称
          this.randomCode = '';             // 清空地区选择
          this.uLogin = '1';        // 清空学校类型选择
      })
      .catch((err) => {
        this.$message.error("插入失败");
        console.error("请求失败，错误信息：", err);
      });
  },
  //确认移动
  ajax_confirm() {
    // 获取选择的组织ID，确保 orgId 在调用之前已经定义
    const orgId = this.school.OrgId || "";  // 如果没有选择组织，则为空字符串

    // 获取选中的学校对象
    const selectedSchoolObject = this.cn_school.find(school => school.name === this.selectedSchool);

    // 判断学校ID是否为空
    if (!selectedSchoolObject || !selectedSchoolObject.id) {
      this.$message({
        type: 'warning',
        message: '请选择你要移动的学校!',
      });
      return; // 学校ID为空时，阻止后续操作
    }

    // 构造请求参数
    let params = [
      {
        functionName: API_CONFIG.ajax_confirm.functionName,  // 调用存储过程的名称
        u_id: this.check_user_id,  // 使用this.check_user_id来获取用户id
        o_id: orgId || "",  // 选择的组织的 ID，绑定到 school.parentOrgId，如果没有选择则为空
        s_id: selectedSchoolObject.id  // 选中的学校的id
      }
    ];

    // 发起请求
    this.$ajax.post(API_CONFIG.baseUrl, params)
      .then(() => {
        this.$message({
          type: 'success',
          message: '移动成功!',
        });
        this.isOrgFormVisible = false; // 隐藏区域
        // 在此之后再进行输出
        console.log("选择的用户id为：", this.check_user_id);
        console.log("选择的组织id为：", orgId);
        console.log("选择的学校id为：", selectedSchoolObject.id);
        this.ajax_user_open();  // 如果是在启用区域，停用
      })
      .catch((err) => {
        this.$message.error("移动失败");
        console.error("请求失败，错误信息：", err);
      });
  },
},
  mounted() {
      this.ajax_user_stop();  // 如果是在启用区域，停用
      this.ajax_user_open();  // 如果是在停用区域，启用
      this.ajax_org();  // 组件创建时，立即调用 ajax_org 获取数据
      this.ajax_school();  // 组件创建时，立即调用 ajax_org 获取数据
  },
}
</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: auto;
  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--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
}
/* 表单头高度 */
.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;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: black;
  font-weight: bold;
  margin-left: -1450px;
  margin-top: 375px;
  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; */
}
/* 头部 */
.el_header{
  width: 106.1%;
  height: 80px;
  text-align: center;
  background: #454545;
  margin-top: -60px;
  float: left;
  margin-left: -20px;
}
.el_title{
  font-size: 18px !important;
  color: #fff !important;
  line-height: 80px;
}
/* 取消按钮样式 */
.el_close{
  position: absolute;
  top: 35px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
/* 移动弹窗的选择区域 */
.table_down{
  width: 100%;
  height: 450px;
  /* border: 1px solid red; */
  margin-top: 80px;
  /* 添加滚动条 */
  overflow-y: auto; /* 当内容超出时，显示垂直滚动条 */
  max-height: 450px; /* 设置最大高度以限制显示区域 */
}
/* 头部区域 */
.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;
  cursor: pointer;
}
/* X号推出弹窗按钮 */
.table_close{
  color: #999;
  position: absolute;
  font-size: 25px;
  float: left;
  margin-left: 420px;
  cursor: pointer;
  margin-top: 10px;
}
/* 输入框容器*/
.input-container {
  position: absolute;
  width: 90%;
  float: left;
  margin-top: 32px;
  /* border: 1px solid red; */
}
/* 搜索框 */
.table_find {
  width: 190px; /* 设置容器的宽度 */
  flex-grow: 1; /* 让输入框自适应宽度 */
  height: 40px;
  padding-right: 30px; /* 为右侧图标留出空间 */
  padding-left: 10px; /* 可选，输入框内的左侧间距 */
  border: 1px solid rgb(189, 189, 189);
  font-size: 15px;
  outline: none;
  color: black;
  cursor: pointer;
  float: left;
  border-radius: 10px;
}
/* 按钮选择区域 */
.check_box_content{
  width: 90%;
  height: 45px;
  float: left;
  margin-top: 64px;
  border: 1px solid red;
}
/* 按钮样式 */
.check_box_content .el-button{
  float: left;
  margin-top: 5px;
}
.input-container i[data-v-227179ae] {
  font-size: 25px;
  color: black;
  height: 15px;
  font-weight: bold;
}
/* 搜索放大镜符号 */
.el-icon-search {
  font-size: 25px;
  position: absolute;
  margin-top: 6px;
  color: black;
  font-weight: bold;
  cursor: pointer;
  margin-left: -330px;
}
/* 自定义 el-select 的外部样式 */
.custom-select {
  width: 220px; /* 设置宽度 */
  font-size: 14px; /* 设置字体大小 */
}

/* 修改 el-input__inner 样式 */
.custom-select .el-input__inner {
  height: 30px; /* 修改输入框的高度 */
  font-size: 16px; /* 修改字体大小 */
  padding-left: 15px; /* 修改左边的内边距 */
  border-radius: 6px; /* 设置圆角 */
  border: 1px solid #dcdfe6; /* 设置边框 */
}

/* 如果需要修改选项的样式，可以使用 .el-select-dropdown__item */
.custom-select .el-select-dropdown__item {
  font-size: 14px; /* 修改下拉框选项的字体大小 */
  padding: 12px; /* 修改选项的内边距 */
}

.custom-select .el-select-dropdown__item.selected {
  background-color: #409EFF; /* 设置选中项的背景色 */
  color: #fff; /* 设置选中项的字体颜色 */
}
/* 弹窗选择区域 */
.checkbox-container {
  margin-top: 0px;
  float: left;
  margin-left: 80px;
  /* border: 1px solid red; */
  height: auto;
  width: 90%;
}
/* .checkbox_comment样式 */
.checkbox_comment {
  position: relative; /* 为复选框和下划线提供定位 */
  width: 350px;
  height: 50px;
  margin-top: 10px;
  display: flex; /* 使用flexbox对齐 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 确保文本和复选框分别位于两端 */
  float: left;
}

/* 下划线 */
.checkbox_comment::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 13%;
  width: 250px;
  height: 2px;
  background-color: rgb(137, 137, 137);
}
/* .checkbox-left部分 */
.checkbox-left {
  flex-grow: 1; /* 使该部分占据剩余空间 */
  display: flex;
  align-items: center;
}

.checkbox-left a {
  color: #000000;
  font-size: 14px;
  margin-left: 70px; /* Adjust the spacing between text and checkbox */
  float: left;
  white-space: nowrap; /* Prevent line breaks */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for overflow text */
  max-width: 240px; /* Set a maximum width to trigger ellipsis */
}
/* 去除原生复选框样式 */
.checkbox_input {
  -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;
}
.checkbox_input:checked {
  background-color: #007bff; /* 选中时背景颜色为蓝色 */
  border-color: #007bff;     /* 边框颜色为蓝色 */
}
/* 选中时的白色勾号 */
.checkbox_input: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);
}
/* 去除原生复选框样式 */
.checkbox_input_org {
  -webkit-appearance: none;  /* 去除Safari等浏览器默认样式 */
  -moz-appearance: none;     /* 去除Firefox的默认样式 */
  appearance: none;          /* 去除默认样式 */
  width: 20px;               /* 设置复选框的宽度 */
  height: 20px;              /* 设置复选框的高度 */
  border: 1.5px solid #000000;    /* 默认边框颜色 */
  cursor: pointer;           /* 鼠标悬停时显示为可点击状态 */
  position: absolute;         /* 使用绝对定位，确保其位于右侧 */
  right: 15px;                /* 右侧间距 */
}
/* 组织表的选择框样式 */
/* 选中时的样式 */
.checkbox_input_org:checked {
  background-color: #007bff; /* 选中时背景颜色为蓝色 */
  border-color: #007bff;     /* 边框颜色为蓝色 */
}

/* 选中时的白色勾号 */
.checkbox_input_org: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);
}
/* 组织名称 */
.checkbox-company {
  margin-top: 60px; /* 可选：设置顶部间距 */
  float: left;
  /* border: 1px solid red; */
  height: auto;
  width: 350px;
}
/* 分页区域 */
.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;
}
/* 取消按钮样式 */
::v-deep .el-dialog__headerbtn{
  position: absolute;
  top: 35px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 20px;
}
/* 输入框 */
.form_input{
  width: 400px;
}
.el-form {
  float: left;
  margin-left: 66px;
  width: 60%;
  /* border: 1px solid red; */
}
/* 确认跟取消区域 */
.form_tool{
  margin-top: 20px;
  float: left;
  margin-left: 90px;
}
/* 按钮样式 */
.form_tool .el-button{
  width: 100px;
}
/* 添加账户的容器 */
.el-dialog__body {
  color: #606266;
  font-size: 14px;
  height: 180px;
}
/* 新增组织的内容容器 */
.el_dialog_org_content {
  color: #606266;
  font-size: 14px;
  height: 120px;
}
/* 新增学校的内容容器 */
.el_dialog_school_content {
  color: #606266;
  font-size: 14px;
  height: 300px;
}
/* 新增学校按钮 */
.add_school{
  float: left;
  margin-top: 40px;
  margin-left: 100px;
}
/* 确认移动按钮 */
.add_run{
  float: right;
  margin-top: 40px;
  margin-right: 100px;
}
/* 使用v-deep深度，进入元素设置表格行的背景色 */
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #f1f1f1;
}
.el-form-item {
  margin-bottom: 22px;
  /* border: 1px solid black; */
  float: left;
}
.el-form-item__label {
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  margin-left: 20px;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  float: left;
}
.el-dialog {
  position: relative;
  margin: 0 ;
  background: #FFF;
  border-radius: 2px;
  box-sizing: border-box;
  width: 50%;
  height: auto;
}
/* 弹窗底部 */
.el-dialog__footer {
  padding: 40px 20px 0px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>