<template>
  <div class="contentInfo">
    <div v-if="goBack">
      <button class="scroll-to-top" v-if="isVisible" @click="scrollToTop">
        ↑
      </button>
      <div class="card-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="card" :body-style="{ padding: '20px' }">
              <div slot="header" class="card-header">全部用户</div>
              <div class="card-content">
                <div class="cardContien">
                  <p class="cardContien1">
                    <span class="cardContien2">{{ schoolInfo.schoolUserCountAll }}&nbsp;</span>所
                  </p>
                  <div style="background:rgba(46, 100, 250, 0.1);" class="cardInfo">
                    <i class="el-icon-user-solid" style="color:#2e64fa"></i>
                  </div>
                </div>

              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card" :body-style="{ padding: '20px' }">
              <div slot="header" class="card-header">正式用户</div>
              <div class="card-content">
                <div class="cardContien">
                  <p class="cardContien1">
                    <span class="cardContien2">{{ schoolInfo.schoolUserCountOfficial }}&nbsp;</span>所
                  </p>
                  <div style="background:rgba(57, 115, 210, 0.1);" class="cardInfo">
                    <svg t="1725428318639" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="14027" width="18" height="18">
                      <path
                        d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
                        p-id="14028" fill="#3973D2"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card" :body-style="{ padding: '20px' }">
              <div slot="header" class="card-header">体验用户</div>
              <div class="card-content">
                <div class="cardContien">
                  <p class="cardContien1">
                    <span class="cardContien2">{{ schoolInfo.schoolUserCountTryOut }}&nbsp;</span>所
                  </p>
                  <div style="background:rgba(83, 184, 237, 0.1);" class="cardInfo">
                    <svg t="1725427715541" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="10285"
                      data-spm-anchor-id="a313x.search_index.0.i3.5e143a814uvGB4" width="18" height="18">
                      <path
                        d="M950.5 340.1L848.9 161.4c-13.1-23-38.6-37.4-66.4-37.4H241.3c-27.8 0-53.3 14.4-66.4 37.4L73.4 340.1c-13.1 23.1-11.5 51.2 4.2 72.9l341.8 472.1c44.4 61.3 140.7 61.3 185.1 0l46.4-64.1 82.6-114L852 543.3l74.2-102.5 20-27.7c15.8-21.7 17.4-49.8 4.3-73z m-248 226.5L568.7 751.4c-13 17.9-34.2 28.6-56.7 28.6-22.6 0-43.8-10.7-56.7-28.6L321.4 566.6c-11.6-16.1-8-38.5 8-50.1 16.1-11.6 38.5-8 50.1 8L512 707.4l132.4-182.9c11.6-16.1 34.1-19.6 50.1-8 16.1 11.6 19.7 34 8 50.1z"
                        fill="#53B8ED" p-id="10286" data-spm-anchor-id="a313x.search_index.0.i2.5e143a814uvGB4"
                        class="selected"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card" :body-style="{ padding: '20px' }">
              <div slot="header" class="card-header">冻结用户</div>
              <div class="card-content">
                <div class="cardContien">
                  <p class="cardContien1">
                    <span class="cardContien2">{{ schoolInfo.schoolUserCountFreeze }}&nbsp;</span>所
                  </p>
                  <div style="background:rgba(239, 192, 79, 0.1);" class="cardInfo">
                    <svg t="1725428219572" class="icon" viewBox="0 0 1170 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="12861" width="18" height="18">
                      <path
                        d="M1162.741203 957.806329L622.439934 22.098446a44.031591 44.031591 0 0 0-76.360433 0L5.997659 957.806329A44.031591 44.031591 0 0 0 43.885307 1024h1080.748821a44.031591 44.031591 0 0 0 38.033933-66.193671zM555.149131 340.120636h58.4406a28.818018 28.818018 0 0 1 28.525449 31.304852l-29.403155 307.636001a28.598592 28.598592 0 0 1-56.977757 0l-29.256871-306.831437a28.598592 28.598592 0 0 1 28.671734-32.182558z m89.964879 498.171374a21.942653 21.942653 0 0 1-22.16208 20.918663H545.640648a21.942653 21.942653 0 0 1-22.088938-20.918663v-59.903444a21.942653 21.942653 0 0 1 22.088938-22.088937h77.23814a21.942653 21.942653 0 0 1 22.088937 22.088937v59.976586z"
                        fill="#E59335" p-id="12862" data-spm-anchor-id="a313x.search_index.0.i26.5e143a814uvGB4"
                        class="selected"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="infoTable">
        <div class="filters-group" ref="filterData">
          <div class="tag-group" v-for="(filterItem, index) in filtersData" :key="index">
            <div class="tag-group-title">{{ filterItem?.name }}</div>
            <div class="tag-item" v-for="item in filterItem?.list" :key="item?.value"
              @click="selectItem(index, item?.value, filterItem, item?.id)"
              :class="item?.value == filterItem?.value ? 'active' : ''">
              {{ item?.label }}
            </div>
          </div>
        </div>
      </div>
      <div class="infoTable">
        <div style="padding:10px;margin-top:10px;">
          <div class="cardContien">
            <div style=" color:#303133;font-size:16px;padding:8px">
              <el-input v-model="queryStr" placeholder="请输入学校名称或账号" class="inputQuery"
                @input="getStatisticalSchoolInfo">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <div class="butonStyle">
              <el-button icon="el-icon-refresh" @click="getStatisticalSchoolInfo(true)">刷新</el-button>
              <el-button style="border:1px solid #EFC04F;color:#E29623" @click="frozen">冻结</el-button>
              <el-button style="border:1px solid #2e64fa;color:#2e64fa"
                @click="addCourseName">开通科目</el-button>
              <el-button type="primary" @click="addUserName">新增用户</el-button>
            </div>
          </div>
        </div>
        <div style="padding:0 10px;" class="schoolList">
          <el-table :data="tableStatisticalSchoolInfo" stripe style="border-radius:6px;" tooltip-effect="dark"
            @selection-change="handleSelectionChange">
            <!-- <el-table-column type="expand"
              v-if="tableStatisticalSchoolInfo.some(item => item.schoolInfoManagerList?.length > 0)">
              <template slot-scope="props">
                <div v-if="props.row.schoolInfoManagerList.length > 0">
                  <el-form class="demo-table-expand">
                    <el-form-item label="管理员:">
                      <span>{{ props.row.userTenantName }}</span>
                    </el-form-item>
                    <el-form-item label="类 型:">
                      <span>{{ props.row.userType }}</span>
                    </el-form-item>
                    <el-form-item label="账 号:">
                      <el-button v-for="(item, index) in props.row.userTenantCode.split('，')" :key="item" type="text"
                        @click="enteringSchool(props.row.schoolInfoManagerList[index])">{{ item }}</el-button>
                    </el-form-item>
                    <el-form-item label="重置密码:">
                      <el-button type="text" v-for="(item, index) in props.row.schoolInfoManagerList" :key="item"
                        style="color:#2e64fa;font-size:14px;" @click="resetPassword(item)">重置密码</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column type="selection" width="45" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="60" align="center" fixed="left"></el-table-column>
            <el-table-column prop="tenantId" label="账号" align="center" min-width="60" fixed="left" show-overflow-tooltip :cell-class-name="'ellipsis-tooltip'">
              <template slot-scope="scope">
                  <span >{{ scope.row.tenantId }}</span>
            </template>
            </el-table-column>
            <el-table-column label="学校名称" min-width="140" align="left" prop="tenantName" fixed="left" show-overflow-tooltip :cell-class-name="'ellipsis-tooltip'">
              <template slot-scope="scope">
                <span class="school_style" @click="enteringSchool(scope.row)">{{ scope.row.tenantName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="areaName" label="区域" min-width="120" sortable align="center" show-overflow-tooltip :cell-class-name="'ellipsis-tooltip'">
              <template slot-scope="scope">
                <!-- <div ref="provinceName" class="truncate-text" style="display: inline-block; max-width: 100%;">
                  <el-tooltip class="item" effect="dark" :content="`${scope.row.provinceName + scope.row.areaName}`"
                    placement="top">
                    <span>{{ scope.row.provinceName }}{{ scope.row.areaName }}</span>
                  </el-tooltip>
                </div> -->
                <span>{{ scope.row.provinceName }}{{ scope.row.areaName }}</span>
              </template>
            </el-table-column>
           
            <el-table-column prop="startDate" sortable label="开始时间" min-width="100" align="center" show-overflow-tooltip :cell-class-name="'ellipsis-tooltip'">
              <template slot-scope="scope">
                <!-- <div ref="startDate" class="truncate-text" style="display: inline-block; max-width: 100%;">
                  <el-tooltip  class="item" effect="dark" :content="`${scope.row.startDate}`" placement="top">
                    <span>{{ scope.row.startDate }}</span>
                  </el-tooltip>
                </div> -->
                <span>{{ scope.row.startDate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endDate" sortable label="结束时间" min-width="100" align="center" show-overflow-tooltip :cell-class-name="'ellipsis-tooltip'">
              <template slot-scope="scope">
                <!-- <div ref="endDate" class="truncate-text" style="display: inline-block; max-width: 100%;">
                  <el-tooltip  class="item" effect="dark" :content="scope.row.endDate" placement="top">
                    <span>{{ scope.row.endDate }}</span>
                  </el-tooltip>
                </div> -->
                <span>{{ scope.row.endDate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remainingDays" sortable label="剩余天数" min-width="62" align="center" />
            <el-table-column prop="status" label="状态" align="center" min-width="80">
              <template slot-scope="scope">
                <div>
                  <span :class="statusClass[scope.row.status]?.class1"></span>&nbsp;<span>{{
                    statusClass[scope.row.status]?.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="examNum" sortable label="正在考试" min-width="62" align="center"/>
            <el-table-column prop="onlineTeachers" sortable label="教师在线" min-width="62" align="center"/>
            <el-table-column prop="onlineStudents" sortable label="学生在线" min-width="62" align="center"/>
            <el-table-column label="操作" align="center" width="280" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" :style="{ color: scope.row.status == 3 ? '#3E6FF5' : '#E29623', fontSize: '14px' }"
                  @click="frozen(scope.row, scope.row.status)">{{ scope.row.status == 3 ? '解冻' : '冻结' }}</el-button><!-- /*解冻#3E6FF5*/ -->
                <el-button type="text" style="color:#2e64fa;font-size:14px;"
                  @click="editItem('edit', scope.row)">编辑</el-button>
                
                <el-button type="text" style="color:#2e64fa;font-size:14px;"
                  @click="jurisdiction(scope.row)">权限</el-button>
                <el-button type="text" style="color:#2e64fa;font-size:14px;" @click="resetPassword(scope.row)">重置密码</el-button>
                <el-button type="text" style="color:#2e64fa;font-size:14px;" @click="enteringSchool(scope.row)">进入学校</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tablePageBox iflexJustRight"></div>
          <!-- <div class="tablePageBox iflexJustRight" v-show="tableStatisticalSchoolInfo.length>0">
            <el-pagination
              @current-change="changePage"
              background
              layout="prev, pager, next"
              :page-size="pageData.pageSize"
              :total="pageData.total">
            </el-pagination>
          </div>     -->
        </div>
      </div>
      <!-- 新增用户 -->
      <el-dialog :title="userInfoData.title" width="540px" :visible.sync="userInfoData.dialogShow">
        <el-form :model="userInfoData" label-width="100px" :rules="userInfoDataDataRules" ref="userInfoData">
          <!-- <el-form-item label="账号:" prop="tenantCode">
            <el-input v-model="userInfoData.tenantCode" type="number" placeholder="学校管理员账号，不输入就自动生成" size="small" :disabled="this.topPageEdit=='edit'?true:false" @input="validateInput"/>
          </el-form-item> -->
          <el-form-item label="学校名称:" prop="schoolName">
            <el-input v-model="userInfoData.schoolName" placeholder="请输入学校名称" size="small" class="inputStyle"/>
          </el-form-item>
          <el-form-item label="区域:" prop='province'>
            <el-row>
              <el-col :span="8">
                <el-select :popper-append-to-body="false" v-model="userInfoData.province" @change="handleProvinceChange" placeholder="请选择"
                  style="width:105px;" size="small">
                  <el-option v-for="(item, index) in provinces" :key="item.provinceCode" :label="item.provinceName"
                    :value="item.provinceCode">
                  </el-option>
                </el-select>
                <span>&nbsp;省</span>
              </el-col>
              <el-col :span="7">
                <el-select :popper-append-to-body="false" v-model="userInfoData.city" placeholder="请选择" style="width:95px;" size="small"
                  @change="handleCityChange">
                  <el-option v-for="(item, idx) in cities" :key="item.cityCode" :label="item.cityName"
                    :value="item.cityCode">
                  </el-option>
                </el-select>
                <span>&nbsp;市</span>
              </el-col>
              <el-col :span="9">
                <el-select :popper-append-to-body="false" v-model="userInfoData.area" placeholder="请选择" style="width:95px;" size="small"
                  :disabled="!areas.length">
                  <el-option v-for="(item, index) in areas" :key="item.areaCode" :label="item.areaName"
                    :value="item.areaCode">
                  </el-option>
                </el-select>
                <span>&nbsp;区/县</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="用户:">
            <el-radio-group v-model="userRadiouseDisabled">
              <el-radio :label="1">正式用户</el-radio>
              <el-radio :label="0">体验用户</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="有效时间:">
            <el-date-picker v-model="valueTime" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              style="width:182px;">
            </el-date-picker>
            <span style="padding-left:3px;padding-right:3px;">至</span>
            <el-date-picker v-model="valueTime1" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              style="width:182px;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="运维负责人:" prop="userName">
            <SelectChecked :options="options" @selectedVal="selectedVal" ref="selectChecked" />
            <!-- <el-input v-model="userInfoData.userName" placeholder="请输入管理员名称" size="small"/> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button  @click="userInfoData.dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="confirmUserInfo">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 重置密码 -->
      <el-dialog title="重置密码" width="450px" :visible.sync="editPassWordData.dialogShow">
        <el-form :model="editPassWordData" label-width="90px" :rules="editPassWordDataRules" ref="editPassWordData">
          <el-form-item label="重置方式:">
            <el-radio-group v-model="radiouseDisabled" @input="checkPassword">
              <el-radio :label="1">使用新密码</el-radio>
              <el-radio :label="0">重置为默认密码</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="radiouseDisabled ? '新密码:' : '默认密码:'" prop="randomPassword" ref="defaultPass1">
            <el-input v-model="editPassWordData.randomPassword" :disabled="checkPass" v-show="radiouseDisabled" />
            <p style="font-size: 12px;color:#909399;text-align:left;" v-show="!radiouseDisabled">默认密码：学校编号@123456</p>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="editPassWordData.dialogShow = false">取 消</el-button>
          <el-button size="small" style="background:#2e64fa;color:#fff" @click="confirmPassWord">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 开通科目 -->
      <el-dialog title="科目列表" :visible.sync="courseDialogVisible" @close="handleClose" width="600px">
        <div class="eTagClass">
            <el-tag :key="tag.id" v-for="tag in dynamicTags" closable :disable-transitions="false"
              @close="handleCloseTag(tag)" class="courseClss">
              {{ tag.courseName }}
            </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" :style="{ width: inputWidth }" @input="adjustWidth">
            <template #append>
              <el-button
                icon="el-icon-check"
                @click="handleInputConfirm"
                size="mini"
                type="text"
              ></el-button>
            </template>
          </el-input>
          <el-button class="button-new-tag" v-if="!inputVisible"  type="primary" plain @click="showInput" icon="el-icon-plus">添加</el-button>
          <el-button class="button-new-tag1" v-if="inputVisible"  @click="showInput1" icon="el-icon-close">取消</el-button>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="courseDialogVisible = false">取 消</el-button>
          <el-button size="small" style="background:#2e64fa;color:#fff" @click="courseDialogVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 权限管理 -->
      <el-dialog :title="oneSchoolName.tenantName+' 权限管理'" :visible.sync="jurisdictionDialogVisible" @close="handleClose1" width="718px">
        <vxe-toolbar ref="xToolbar1">
          <template #buttons>
            <div class="leftHeadBox">
              <el-radio-group  v-model="subTabNames" @change="checkChange" size="mini" style="margin-left: 10px;">
                <el-radio-button v-for="item in gradeClassArr" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
              </el-radio-group>
            </div>
          </template>
        </vxe-toolbar>
        <div v-if="subTabNames == '1'">
          <!-- 开通模块的内容 -->
          <p>这是“开通模块”的内容</p>
        </div>
        <div v-else-if="subTabNames == '2'">
          <!-- 开通年级的内容 -->
          <el-tree ref="tree" :data="dataGrade" show-checkbox node-key="id" :default-expanded-keys="expandedKeys"
            :default-checked-keys="checkedKeys" :props="defaultProps" :default-expand-all="true" :expand-on-click-node="false">
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="jurisdictionDialogVisible = false">取 消</el-button>
          <el-button size="small" style="background:#2e64fa;color:#fff" @click="adminAddSchoolManyGradeInfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import citys from './city/citys';
import { setToken } from '@/utils/auth'
import SelectChecked from './SelectChecked.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'CardLayout',
  components: {
    SelectChecked
  },
  data() {
    return {
      filtersData: [
        { name: "城市：", value: 0, list: [] },
        // { },
        // { name: "类型：", value: 0, list: [] },
        // { name: "状态：", value: 0, list: [] },
      ],
      queryStr: "",
      tableStatisticalSchoolInfo: [],
      schoolInfo: {
        schoolUserCountAll: "",
        schoolUserCountFreeze: "",
        schoolUserCountOfficial: "",
        schoolUserCountTryOut: ""
      },
      multipleSelection: [],
      radiouseDisabled: 1,
      userRadiouseDisabled: 1,
      editPassWordData: {
        dialogShow: false,
        id: "",
        username: "",
        randomPassword: "",
      },
      userInfoData: {
        title: "",
        dialogShow: false,
        id: "",
        userName: "",
        schoolName: "",
        randomPassword: "",
        province: '',
        city: '',
        area: '',
        // tenantCode:""
      },
      editPassWordDataRules: {
        randomPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
      },
      userInfoDataDataRules: {
        userName: [
          { required: true, message: '请选择运维负责人', trigger: 'blur' },
        ],
        schoolName: [
          { required: true, message: '请输入学校名称', trigger: 'blur' },
        ],
        province: [{ required: true, message: '请选择省份', trigger: 'change' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }]
      },
      checkPass: false,
      valueTime: '',
      valueTime1: '',
      courseDialogVisible: false,
      jurisdictionDialogVisible: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      provinces: citys, // Provinces list
      cities: [], // Cities list
      areas: [], // Area
      statusClass: {
        "1": { name: "正式", class1: 'spanColor color1' },
        "2": { name: "体验", class1: 'spanColor color2' },
        "3": { name: "冻结", class1: 'spanColor color3' },
      },
      topPageEdit: null,
      goBack: true,
      setTemplete: false,
      setGrade: false,
      dataGrade: [{ id: 0, gradeName: "年级管理", gradeList: [] },
      ],
      defaultProps: {
        children: 'gradeList',
        label: 'gradeName'
      },
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        current: 1,
      },
      oneSchoolName: {},
      expandedKeys: [],
      checkedKeys: [],
      userId: null,
      isVisible: false,
      options: [],
      subTabNames: "2",
      gradeClassArr:[
        {
          label:"开通模块",
          value:"1"
        },
        {
          label:"开通年级",
          value:"2"
        }
      ],
      rowsData:{},
      inputWidth: '75px'
    }
  },
  created() {
    this.provinces = citys;
  },
  computed: {
    ...mapGetters('adminUser', ['adminInfo']),
  },
  watch: {
    inputValue() {
      this.adjustWidth(); // 当 inputValue 改变时调整宽度
    }
  },
  mounted() {
    this.initData();
    this.getFiltersData();
    this.getAllListGrade();
    let contentInfo = document.querySelector('.contentInfo')?.parentElement;
    if (contentInfo) {
      contentInfo.addEventListener('scroll', this.handleScroll);
    }
    this.$nextTick(()=>{
      this.$refs.filterData.firstElementChild.nextElementSibling.style.padding=0;
    })
  },
  beforeDestroy() {
    let contentInfo = document.querySelector('.contentInfo')?.parentElement;
    if (contentInfo) {
      contentInfo.removeEventListener('scroll', this.handleScroll);
    }
  },
  methods: {
    adjustWidth() {
      console.log(this.inputValue)
      // 计算内容的宽度
      const span = document.createElement('span');
      span.style.visibility = 'hidden'; // 隐藏的 span
      span.style.whiteSpace = 'nowrap'; // 不换行
      span.innerText = this.inputValue || '新标签'; // 使用当前输入值，或者用默认值
      document.body.appendChild(span); // 将 span 添加到文档中
      this.inputWidth = Math.max(75, span.offsetWidth+ 20)+'px'; // 计算宽度并加上额外的填充
      document.body.removeChild(span); // 移除 span
    },
    checkChange(value) {
      if(value==2){
        this.expandAllNodes();
        this.adminQuerySchoolAllGradeInfoList();
      }
      // 这里可以添加其他需要在切换时触发的逻辑
    },
    scrollToTop() {
      let contentInfo = document.querySelector('.contentInfo')?.parentElement;
      if (contentInfo) {
        contentInfo.scrollTo({ top: 0, behavior: 'smooth' });
      }
    },
    handleScroll() {
      let contentInfo = document.querySelector('.contentInfo')?.parentElement;
      if (contentInfo) {
        this.isVisible = contentInfo.scrollTop > 200; // 滚动超过200px时显示按钮
      }
      // this.isVisible = window.scrollY > 200; // 滚动超过200px时显示按钮
    },
    initData() {
      this.getStatisticalSchoolNumber();
      this.getProvinceList();
      this.getuserInfosList();
      setTimeout(() => {
        this.getAreaList(this.filtersData[0].id)
        this.getStatisticalSchoolInfo();
      }, 300)
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return `${year}-${month}-${day}`;
    },
    confirmUserInfo() {
      if (!this.userInfoData.city) {
        this.$message.warning('请选择市！');
        return;
      }
      if (!this.userInfoData.area && this.areas.length > 0) {
        this.$message.warning('请选择区！');
        return;
      }
      this.$refs.userInfoData.validate(valid => {
        if (valid) {
          let startDate = this.valueTime
          let endDate = this.valueTime1;
          let provin = this.provinces.find(a => a.provinceCode == this.userInfoData.province)
          let city = this.cities.find(a => a.cityCode == this.userInfoData.city)
          let area = this.areas.find(a => a.areaCode == this.userInfoData.area)
          let param = {
            "id": this.userInfoData.id,
            // "tenantCode": this.userInfoData.tenantCode,
            "areaCode": this.userInfoData.area,
            "areaName": area.areaName || '',
            "cityCode": this.userInfoData.city,
            "cityName": city.cityName,
            endDate,
            "provinceCode": this.userInfoData.province,
            "provinceName": provin.provinceName,
            startDate,
            "status": this.userRadiouseDisabled ? 1 : 2,
            "tenantName": this.userInfoData.schoolName,
            "adminUserInfoList": [],
            "username": this.userInfoData.userName,
          }
          let arr = this.userInfoData.userName.split(",");
          let userNames = new Set(arr);
          this.options.filter(item => userNames.has(item.value)).forEach(item => {
            param.adminUserInfoList.push({
              adminUserName: item.value,
              userType: 2,
              username: item.label
            });
          });
          if (this.topPageEdit == 'edit') {
            param["tenantCode"]=this.rowsData.tenantCode,
            param["tenantId"]=this.rowsData.tenantId,
            this.$api.user.UpdateCloseSchoolUserStatus(param).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.initData();
                this.userInfoData.dialogShow = false;
              }
            }).catch(error => {
              console.error(error);
            });
          } else {
            this.$api.user.createSchoolInfo(param).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.initData();
                this.userInfoData.dialogShow = false;
              }
            }).catch(error => {
              console.error(error);
            });
          }
        } else {
          console.log('验证失败!');
          return false;
        }
      })
    },
    handleProvinceChange(provinceCode) {
      const selectedProvince = this.provinces.find(p => p.provinceCode == provinceCode);
      if (selectedProvince) {
        this.cities = selectedProvince.mallCityList;
        this.areas = [];
        this.userInfoData.city = '';
        this.userInfoData.area = '';
      }
    },
    handleCityChange(cityCode) {
      const selectedCity = this.cities.find(c => c.cityCode == cityCode);
      if (selectedCity) {
        this.areas = selectedCity.mallAreaList;
        this.userInfoData.area = '';
      }
    },
    validateInput() {
      // 只允许6位数字
      if (this.userInfoData.tenantCode.length > 5) {
        this.userInfoData.tenantCode = this.userInfoData.tenantCode.slice(0, 5);
      }
    },
    getFiltersData() {
      let d = {
        name: "状态：",
        value: 0,
        id: '',
        list: [
          {
            label: '全部',
            value: 0,
            id: '',
          },
          {
            label: '正式用户',
            value: 1,
            id: 1,
          },
          {
            label: '体验用户',
            value: 2,
            id: 2,
          },
          {
            label: '冻结用户',
            value: 3,
            id: 3,
          }
        ]
      };
      this.$set(this.filtersData, 3, d)
    },
    getStatisticalSchoolNumber() {
      let params = this.adminInfo?.data?.roles?.includes('SuperAdmin') ? {} : { phoneNo: this.adminInfo?.data?.phoneNo };
      this.$api.user.getStatisticalSchoolNumber(params).then((res) => {
        if (res.code == 200) {
          this.schoolInfo = res.data;
        }
      }).catch(err => {
        console.error(err); // 处理错误
      });
    },
    getProvinceList() {
      this.$api.user.getProvinceList().then((res) => {
        if (res.code == 200) {
          let obj = { name: "城市：", value: 0, id: "", list: [{ label: '全部', value: 0, id: "" }] };
          if (res.data && res.data.length > 0) {
            res.data.forEach(ele => {
              obj.list.push({ label: ele.areaname, value: ele.areacode, id: ele.id })
            });
          }
          // obj.value = obj.list[1].value;
          // obj.id = obj.list[1].id;
          this.$set(this.filtersData, 0, obj)
        }
      }).catch(err => err)
    },
    getStatisticalSchoolInfo(refresh) {
      if (refresh) {
        this.pageData = {
          pageNum: 1,
          pageSize: 10,
          total: 0,
          current: 1,
        }
      }
      let { pageNum, pageSize } = this.pageData;
      let userType,phoneNo;
      if(this.filtersData[2]?.value==''){
        userType = ''
        phoneNo=''
      }else if(this.filtersData[2]?.value==1){
        userType = 1
        phoneNo=''
      }else{
        userType = 2
        phoneNo=this.filtersData[2]?.value
      }
      let param = {
        provinceCode: this.filtersData[0]?.value ? this.filtersData[0]?.value : "",
        areaCode: this.filtersData[1]?.value ? this.filtersData[1]?.value : "",
        keyWord: this.queryStr,
        status: this.filtersData[3]?.value ? this.filtersData[3]?.value : '',
        userType,
        phoneNo
        // pageNum,
        // pageSize
      }
      // if (!this.adminInfo.data.roles.includes('SuperAdmin')) {
      //   param['phoneNo'] = this.adminInfo.data.phoneNo
      // }
      this.$api.user.getStatisticalSchoolInfo(param).then((res) => {
        if (res.code == 200) {
          this.tableStatisticalSchoolInfo = res.data;
          // this.tableStatisticalSchoolInfo = res.data.map(element => {
          //   const schoolInfoManagerList = element.schoolInfoManagerList || [];
          //   return {
          //     ...element,
          //     userTenantName: schoolInfoManagerList.map(ele => ele.tenantName).join('，'),
          //     userTenantCode: schoolInfoManagerList.map(ele => ele.tenantCode).join('，'),
          //     userType: schoolInfoManagerList.map(ele => ele.userType == 2 ? '运维人员' : '学校管理员').join('，'),
          //   };
          // });
        }
      }).catch(err => {
        console.error(err); // 更好地处理错误
      });

    },
    changePage(e) {
      this.pageData.pageNum = e;
      this.getStatisticalSchoolInfo();
    },
    selectItem(index, val, item, id) {
      if (this.filtersData[index].value == val) return;
      this.filtersData[index].value = val;
      this.filtersData[index].id = id;
      if (index == 0) {
        if(this.filtersData[0].id){
          this.getAreaList(this.filtersData[0].id);
          this.$refs.filterData.firstElementChild.nextElementSibling.style.padding='8px 0';
        }else{
          this.filtersData[1] = {};
          this.$nextTick(()=>{
            this.$refs.filterData.firstElementChild.nextElementSibling.style.padding=0;
          })
        }
      }
      this.getStatisticalSchoolInfo();
    },
    getAreaList(id) {
      let param = {
        areaCode: id
      }
      if(!id) return;
      let obj1 = { name: "区域：", value: 0, id: '', list: [{ label: "全部", value: 0, id: '' }] };
      this.filtersData[1] = { name: "区域：", value: 0, id: '', list: [{ label: "全部", value: 0, id: '' }] };
      this.$api.user.getAreaList(param).then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            for (let el of res.data) {
              obj1['list'].push({ label: el.areaname, value: el.areacode, id: el.id })
            }
            this.$set(this.filtersData, 1, obj1);
            // this.getStatisticalSchoolInfo();
          }
        }
      }).catch(err => err)
    },
    //获取所有年级
    getAllListGrade() {
      this.$api.user.getAllListGrade().then((res) => {
        if (res.code == 200) {
          this.dataGrade[0].gradeList = res.data

        }
      }).catch(err => console.log(err))
    },
    //年级默认全展开
    expandAllNodes() {
      this.$nextTick(() => {
        let tree = this.$refs.tree;
        if (tree) {
          let expandAll = (nodes) => {
            nodes.forEach(node => {
              this.$nextTick(() => {
                tree.store.nodesMap[node.id].expand();
                if (node.gradeList) {
                  expandAll(node.gradeList);
                }
              });
            });
          };
          expandAll(this.dataGrade);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addCourseName() {
      this.$api.user.getAllListCourse().then(res => {
        if (res.code == 200 && res.data) {
          this.dynamicTags = res.data;
          this.courseDialogVisible = true;
          this.adjustWidth();
        }
      }).catch(err => console.log(err))
    },
    handleCloseTag(tag) {
      this.$api.user.deleteCourseInfo({ ids: [tag.id] }).then(res => {
        if (res.code == 200) {
          this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
          this.addCourseName();
          this.$message.success(res.msg);
        }
      })
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showInput1() {
      this.inputVisible = false;
      this.inputValue ="";
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //科目添加确定
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        let param = {
          "courseCode": this.dynamicTags.length,
          "courseName": inputValue,
          "coverImageUrl": "",
          "sort": this.dynamicTags.length
        };
        this.$api.user.addCourseInfo(param).then(res => {
          if (res.code == 200) {
            this.addCourseName();
            // this.$message.success(res.msg);
          }
        })
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    handleClose() {
      this.courseDialogVisible = false;
    },
    handleClose1() {
      this.jurisdictionDialogVisible = false;
    },
    //冻结数据
    frozen(rowData, type) {
      if (!rowData.status) {
        if (this.multipleSelection.length > 0) {
          this.$confirm(`确认要冻结所选数据?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass:'page_dialog',
            left: true
          }).then(() => {
            let param = { ids: [] };
            this.multipleSelection.map(a => param.ids.push(a.tenantAdminUserId));
            this.$api.user.adminUpdateCloseSchoolUserStatus(param).then((res) => {
              if (res.code == 200) {
                this.getStatisticalSchoolInfo();
                this.getStatisticalSchoolNumber();
                this.$message({
                  type: 'success',
                  message: '冻结成功!'
                });

              }
            }).catch()

          }).catch(() => {
            //取消         
          });
        } else {
          this.$message.warning('未选中需要冻结的学校');
        }
      } else {
        if (type == 3) {
          this.$confirm(`确认要解冻所选数据?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass:'page_dialog',
            left: true
          }).then(() => {
            let param = { ids: [rowData.tenantAdminUserId] }
            this.$api.user.adminOpenUpdateSchoolUserStatus(param).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '解冻成功!'
                });
                this.getStatisticalSchoolInfo();
                this.getStatisticalSchoolNumber();
              }
            }).catch()

          }).catch(() => {
            //取消         
          });
        } else {
          this.$confirm(`确认要冻结所选数据?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass:'page_dialog',
            left: true
          }).then(() => {
            let param = { ids: [rowData.tenantAdminUserId] }
            this.$api.user.adminUpdateCloseSchoolUserStatus(param).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '冻结成功!'
                });
                this.getStatisticalSchoolInfo();
                this.getStatisticalSchoolNumber();
              }
            }).catch()

          }).catch(() => {
            //取消         
          });
        }
      }
    },
    //获取类型
    getAdminUserInfo(){
      setTimeout(()=>{
        if(this.adminInfo?.data?.roles?.includes('SuperAdmin')){
            let list = JSON.parse(JSON.stringify(this.options));
            let d = {
              name: "类型：",
              value: 0,
              id:'',
              list
            };
            d.list[0].value=0;
            let newObject = {
                label: '学校管理员',
                value: 1,
                id: 1,
              };
            // 在位置 1 插入对象
            d.list.splice(1, 0, newObject);
          this.$set(this.filtersData, 2, d)
        }else{
            let d = {
            name: "类型：",
            value: this.adminInfo?.data?.phoneNo,
            id: 2,
            list: [
              {
                label: '运维人员'+this.adminInfo?.username,
                value: this.adminInfo?.data?.phoneNo,
                id: 2,
              }
            ]
          };
          this.$set(this.filtersData, 2, d)
        }
      },1000)
    },
    //获取所有运维负责人
    getuserInfosList() {
      this.options = [
        {
          value: 'all',
          label: '全部',
          id:'',
          check: false
        }]
      this.$api.user.getuserInfosList().then(res => {
        if (res.code == 200) {
          res.data.forEach((a,index) => {
            this.options.push({
              value: a.phoneNo,
              label: a.nickname,
              check: false,
              id:index+2
            })
          })
          this.getAdminUserInfo();
        }
      })
    },
    editItem(type, rowData) {
      this.rowsData=rowData;
      this.topPageEdit = type;
      this.handleProvinceChange(rowData.provinceCode);
      this.handleCityChange(rowData.cityCode);
      // this.getuserInfosList()
      let userName=[];
      let userName1=[];
      rowData.schoolInfoManagerList?.forEach(ele => {
        if(ele.phoneNo){
          userName.push(ele.phoneNo)
          userName1.push({value:ele.phoneNo,label:ele.tenantName})
        }
      })
      this.userInfoData = {
        title: "编辑用户",
        dialogShow: true,
        id: rowData.id,
        userName: userName.join(','),
        schoolName: rowData.tenantName,
        province: rowData.provinceCode,
        city: rowData.cityCode,
        area: rowData.areaCode,
        tenantCode:rowData.tenantCode,
        tenantId:rowData.tenantId,
      };
      if (this.topPageEdit == 'edit') {
        // 将 options 转换为哈希表以便快速查找
        const optionsMap = new Map(this.options.map(item => [`${item.value}_${item.label}`, item]));
        for (let element of userName1) {
            const key = `${element.value}_${element.label}`;
            const item = optionsMap.get(key); // 快速查找
            if (item) {
                item.check = true;
                setTimeout(()=>{
                  this.$refs.selectChecked.isCheck(item);
                },200)
            }
        }
      }
      this.userRadiouseDisabled = rowData.status == 1 ? 1 : 0
      this.valueTime = rowData.startDate;
      this.valueTime1 = rowData.endDate;
      if (this.$refs["userInfoData"] !== undefined) {
        this.$refs["userInfoData"].resetFields();
      }
    },
    async enteringSchool(rowData) {
      try {
        // 请求学校管理员用户信息
        let { data: userInfo } = await this.$api.user.querySchoolAdminUserAndPwd({ userId: rowData.tenantAdminUserId });
        if (userInfo) {
          // 设置 Token 和存储密码
          setToken(userInfo.tokenValue);
          this.$store.dispatch('user/SET_TOKEN', userInfo.tokenValue);
          this.$store.commit('user/SET_USEAR_INFOLOGIN', userInfo);
          // 获取重定向 URL
          let directUrl = this.$route.query.redirect;
          let url = directUrl ? directUrl : '/#/userInfo';

          // 在新窗口打开 URL
          window.open(url, '_blank');

        } else {
          this.$message({
            message: '用户信息请求失败',
            type: 'warning'
          });
        }
      } catch (err) {
        console.error(err);
        this.$message({
          message: '操作失败',
          type: 'warning'
        });
      }
    },
    selectedVal(value) {
      // 注意这里如果有全部的话，要去掉全部
      value.forEach((item, idx) => {
        if (item == 'all') {
          value.splice(idx, 1)
        }
      })
      this.userInfoData.userName = value.join(',')
    },
    jurisdiction(rowData) {
      this.oneSchoolName = rowData;
      if(this.subTabNames=='2'){
        this.expandAllNodes();
        this.adminQuerySchoolAllGradeInfoList();
      }
      this.jurisdictionDialogVisible = true;
      // this.goBack = false;
      // this.activate(1)
    },
    resetPassword(rowData) {
      this.userId = rowData.tenantAdminUserId;
      this.editPassWordData.randomPassword = "";
      this.editPassWordData.dialogShow = true;
    },
    addUserName() {
      this.topPageEdit = '';
      this.userInfoData = {
        title: "新增用户",
        dialogShow: true,
        id: "",
        userName: "",
        schoolName: "",
        randomPassword: "",
        province: '',
        city: '',
        area: '',
        // tenantCode:""
      }
      this.valueTime = this.formatDate(new Date());
      const currentDate = new Date();
      // 计算后一天
      const nextDay = new Date(currentDate);
      nextDay.setMonth(currentDate.getMonth() + 1);

      // 格式化为 YYYY-MM-DD 的字符串
      this.valueTime1 = nextDay.toISOString().split('T')[0];
      // this.getuserInfosList()
      this.$refs.selectChecked?.clearSelection();
      this.$refs.userInfoData?.resetFields();
    },
    checkPassword() {
      this.checkPass = !this.checkPass;
      let error = this.$refs.defaultPass1.$el.querySelector(".el-form-item__error");
      this.editPassWordData.randomPassword = this.radiouseDisabled ? this.editPassWordData.randomPassword : '';
      if (this.checkPass) {
        this.editPassWordDataRules.randomPassword[0].required = false;
        this.editPassWordDataRules.randomPassword[0].message = "";
        if (error) {
          error.style.display = "none";
        }

      } else {
        this.editPassWordDataRules.randomPassword[0].required = true;
        this.editPassWordDataRules.randomPassword[0].message = "请输入新密码";
        if (error) {
          error.style.display = "block";
        }
      }
    },
    confirmPassWord() {
      let param = {
        userId: this.userId,
      };
      param["password"] = this.editPassWordData.randomPassword;
      this.$api.user.resetSchoolAdminPwd(param).then((res) => {
        if (res.code == 200) {
          this.$message.success("重置成功");
        }

      }).catch((err) => {
        console.log(err)
      })
      this.editPassWordData.dialogShow = false;
    },
    //保存更新开通的年级
    adminAddSchoolManyGradeInfo() {
      let ids = this.$refs.tree.getCheckedKeys();
      let param = {
        schoolTenantId: this.oneSchoolName.tenantId,
        ids
      }
      this.$api.user.adminAddSchoolManyGradeInfo(param).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.adminQuerySchoolAllGradeInfoList();
          this.jurisdictionDialogVisible = false
        }
      }).catch(err => console.log(err))
    },
    //查询学校开通的年级
    adminQuerySchoolAllGradeInfoList() {
      let param = {
        schoolTenantId: this.oneSchoolName.tenantId
      }
      this.checkedKeys = [];
      this.$api.user.adminQuerySchoolAllGradeInfoList(param).then((res) => {
        if (res.code == 200) {
          res.data.forEach(node => this.collectIds(node, this.checkedKeys));
          this.$refs.tree.setCheckedKeys(this.checkedKeys);

        }
      }).catch(err => console.log(err))
    },
    collectIds(node, ids = []) {
      if (node.gradeInfoId && !node.gradeRelationInfoList) {
        ids.push(node.gradeInfoId);
      }
      if (node.gradeRelationInfoList && Array.isArray(node.gradeRelationInfoList)) {
        node.gradeRelationInfoList.forEach(child => this.collectIds(child, ids));
      }
      return ids;
    },

  }
}
</script>

<style scoped lang="scss">
.card,
.infoTable {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.card-content {
  font-size: 14px;
  color: #666;
}

:deep() .el-card__header {
  border-bottom: 0px;
}

.infoTable {
  margin-top: 20px;
}

.cardInfo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  display: inline-block;
}

.menu {
  display: flex;
  flex-direction: column;
  width: 130px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 20px;
}

.menu-item {
  padding: 22px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  color: #606266;
  font-size: 16px;
  margin-bottom: 5px;
}

.menu-item:hover {
  background-color: #eaf0ff;
  border-radius: 6px;
  color: #fff;
}

.menu-item.active {
  background-color: #2e64fa;
  border-radius: 6px;
  color: #fff;
}

.menu-item:last-child {
  border-bottom: none;
}

.filters-group {
  padding: 10px;

  .tag-group {
    flex-flow: wrap;
    padding: 8px 0;

    .tag-group-title {
      padding: 0 0 0 8px;
      width:auto;
      height: auto;
      color: #303133;
      font-size: 14px;
      text-align: left;
      line-height: 30px;
      font-weight: 600;
      letter-spacing: 0em;
    }

    display: flex;

    .tag-item {
      margin-right: 8px;
      padding: 0 8px;
      line-height: 30px;
      border-radius: 2px;
      background: #fff;
      color: #909399;
      cursor: pointer;
      font-size: 14px;
      &:hover,
      &.active {
        background: rgba(46, 100, 250, 0.1);
        color: #2e64fa;
      }
    }
  }

}

:deep() .el-radio.is-checked .el-radio__inner {
  border-color: #2e64fa;
  background-color: #2e64fa;
}

:deep() .el-radio__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  /* border-color: #2e64fa;
    background-color: #2e64fa;*/
}

:deep() .el-table thead {
  color: #303133;
  font-weight: 500;
  font-size: 16px;
  height: 52px;
}

:deep() .el-table tr th.el-table__cell {
  background: #f0f2f5;
}

:deep() .el-table .el-table__cell {
  padding: 8px 0;
}

:deep() .el-table tbody td {
  color: rgba(0, 0, 0, .9);
  font-weight: 400;
  font-size: 14px;
  height: 52px;
}

:deep() .el-table--border .el-table__cell {
  border-right: none;
}

:deep() .el-table__header-wrapper th {
  border-left: none;
  border-right: none;
  border-bottom: none;
}

:deep() .el-dialog__headerbtn .el-dialog__close {
  color: #909399;
}

:deep() .el-checkbox.is-checked .el-checkbox__inner {
  border-color: #2e64fa;
  background-color: #2e64fa;
}

:deep() .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #2e64fa;
  background-color: #2e64fa;
}

:deep() .el-checkbox.is-checked .el-checkbox__inner::after {
  background-color: #2e64fa;
}

:deep() .el-table .descending .sort-caret.descending {
  border-top-color: #2e64fa;
}

:deep() .el-table .ascending .sort-caret.ascending {
  border-bottom-color: #2e64fa;
}

:deep() .el-message-box__wrapper .el-message-box .el-message-box__btns .el-button.el-button--default.el-button--small.el-button--primary {
  background: #2e64fa !important;
  border-color: #2e64fa !important;
}

:deep() .el-message-box__wrapper .el-message-box .el-message-box__btns .el-button--primary span {
  color: #fff;
}

:deep() .el-radio__input.is-checked+.el-radio__label {
  color: #303133;
}

.el-main {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sideBar {
  width: 200px !important;
  margin-top: 20px;

  .sideBarCon {
    background-color: #fff;
  }

  .el-dropdown-menu__item,
  .el-menu-item {
    font-size: 14px;
  }

  .elMenuUser .is-active {
    background: #ecf5ff;
  }
}

.backInfo {
  border: 1px solid #dcdfe6;
  background: #fff;
  width: 160px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 36px;
  border-radius: 4px;
  line-height: 36px;
  margin-left: 10px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  cursor: pointer;
}

.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%; /* 限制最大宽度 */
}

.spanColor {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
}

.color1 {
  background: #3973D2;
}

.color2 {
  background: #53b8ed;
}

.color3 {
  background: #e59335;
}

.tablePageBox {
  padding: 10px;
}

:deep() input[type="number"] {
  padding-right: 1px;
  -moz-appearance: textfield;
}

:deep() input::-webkit-outer-spin-button,
:deep() input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:deep() .el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  height: 36px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border:1px solid #2e64fa;
  background: rgba(0, 0, 0, 0);
  width:75px;
}
.button-new-tag1 {
  height: 36px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(0, 0, 0, 0);
  width:75px;
}
.button-new-tag.el-button,.button-new-tag1.el-button{
  padding-left: 10px;
  margin-bottom: 20px
}
.input-new-tag {
  margin-right: 20px;
  vertical-align: bottom;
  margin-bottom: 20px
}
:deep() .input-new-tag.el-input.el-input-group--append .el-input__inner{
  border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
:deep() .input-new-tag .el-input-group__append{
  background: rgba(0, 0, 0, 0);
  border: 0;
  width: 0px !important;
  height: 0 !important;
  .el-button{
    background: rgba(0, 0, 0, 0);
    border: 0;
    width: 16px !important;
    height: 0 !important;
    margin-left: -42px;
    .el-icon-check{
      font-size: 16px;
      color:#2e64fa;
    }
  }
}
:deep() .el-dialog.is-fullscreen .el-dialog__header {
  background: #2e64fa;
}

:deep() .el-dialog.is-fullscreen .el-dialog__header .el-dialog__headerbtn {
  font-size: 25px;
}

:deep() .el-dialog.is-fullscreen .el-dialog__header .el-dialog__headerbtn .el-icon-close {
  color: #fff;
}

:deep() .el-dialog.is-fullscreen .el-dialog__header .el-dialog__title {
  color: #fff;
}

:deep() .el-tag {
  font-size: 13px;
}

:deep() .subTable tr th.el-table__cell {
  background: #2e64fa;
}

:deep() .subTable thead {
  font-size: 14px;
  color: #fff;
}

:deep() .subTable tbody td {
  height: 40px;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  transition: opacity 0.3s;
  opacity: 0.7;
  z-index: 99999;

  &:hover {
    opacity: 1;
  }
}

.demo-table-expand {
  font-size: 0;
  padding-left: 184px;
}

.demo-table-expand span {
  color: #606266;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf !important;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.cardContien {
  display: flex;
  justify-content: space-between;
}

.cardContien1 {
  display: inline-block;
  font-size: 17px;
  color: #666;
}

.cardContien2 {
  font-size: 34px;
  color: #303133;
  font-weight: 700;
  font-family: DIN Alternate
}
.inputQuery{width:240px;height: 36px; color: #c0c4cc; font-size: 14px;}
.el-icon-search{
  font-size: 16px;
}
.el-input-group__append button{
  width: 76px;
  height: 36px;
}
.butonStyle{line-height: 48px;}
.card-container .card{
  height: 120px;
}
.eTagClass{
  width: 568px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.eTagClass .el-tag{
  border:1px solid #2e64fa;
  font-size: 14px;
  height: 36px;
  line-height: 12px;
  margin-left: 0;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 10px 12px;
  :deep() .el-icon-close{
    font-size: 16px;
  }
}
:deep() .select-checked .el-select .el-input.el-input--suffix,:deep() .select-checked .el-select .el-input.el-input--suffix .el-input__inner{
  min-height: 36px !important;
}
:deep() .card-container .el-row .el-card__body{
  padding-top: 10px !important;
}
:deep() .el-radio-button__inner{
  width: 120px;
  font-size: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}
:deep() .vxe-toolbar{
  padding: 0;
}
:deep() .el-tree-node__expand-icon.expanded,  :deep() .el-tree-node__content > .el-tree-node__expand-icon{
    display: none;
}
:deep() .el-tree-node__children .el-tree-node__children{
  display: flex;
} 
:deep() .el-tree{
  margin-left: 10px;
}
:deep() .el-tree-node__content{
  color:#000;
  margin-top: 20px;
  font-weight: 500;
}
:deep() .el-tree-node__children .el-tree-node__children .el-tree-node__content{
  margin-top: 10px;
  color:#666;
}
:deep() .el-tree-node__label{
  font-size: 16px !important;
}
.inputStyle{
  width:384px;
}
:deep() .ellipsis-tooltip {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:deep() .school_style{
  color: #2E64FA;
  font-size:14px;
  cursor: pointer;
}
:deep() .el-table th.el-table__cell > .cell {
  padding:0;
}
:deep() .el-table th.el-table__cell > .cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:deep() .el-table .caret-wrapper{
  justify-content:center;
  left:-4px;
}
</style>