<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <div class="left_title">访客预约</div>
    </div>
    <el-tabs
      v-model="visitorType"
      class="demo-tabs"
      @tab-change="visitorTypeClick"
    >
      <el-tab-pane label="学生家长预约" :name="1">学生家长预约</el-tab-pane>
      <el-tab-pane label="其他访客预约" :name="2">其他访客预约</el-tab-pane>
    </el-tabs>
    <div class="middle" v-if="visitorType == 1">
      <div class="filter">
        <div class="condition">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="可查询姓名、电话、受访者姓名、受访者接待部门、受访者电话、车牌号"
            placement="bottom-start"
          >
            <el-input
              :clearable="true"
              @clear="searchBtn"
              v-model="searchInput1.keyWord"
              style="width: 180px"
              placeholder="请输入关键字"
            />
          </el-tooltip>
        </div>
        <el-button
          color="rgba(0, 97, 255, 1)"
          type="primary"
          class="search condition"
          @click="searchBtn"
        >
          查询</el-button
        >
        <div class="condition">
          <span>状态&nbsp;&nbsp;</span>
          <el-select
            v-model="searchInput1.type"
            class="m-2"
            placeholder="请选择状态"
            style="width: 180px"
            @change="searchBtn"
          >
            <el-option label="全部" value="" />
            <el-option label="待审核" :value="1" />
            <el-option label="已拒绝" :value="2" />
            <el-option label="进校核销" :value="7" />
            <el-option label="出校核销" :value="8" />
            <el-option label="已完成" :value="9" />
          </el-select>
        </div>
        <div class="condition">
          <span>创建时间&nbsp;&nbsp;</span>
          <el-date-picker
            v-model="searchInput1.createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            style="width: 280px"
            @change="searchBtn"
          />
        </div>
        <div class="condition">
          <span>访问时间&nbsp;&nbsp;</span>
          <el-date-picker
            v-model="searchInput1.visitorTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            style="width: 280px"
            @change="searchBtn"
          />
        </div>
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <el-button
          type="primary"
          plain
          color="rgba(0, 97, 255, 1)"
          @click="subsectionClick"
          ><span>家长访客配置</span></el-button
        >
      </div>
    </div>
    <div class="scroll" v-if="visitorType == 1">
      <div class="footer" v-loading="loading">
        <el-table
          :row-class-name="tableRowClassName"
          :data="tableData1.list"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
            border: 0,
          }"
        >
          <el-table-column align="center" fixed prop="userName" label="姓名" />
          <el-table-column
            align="center"
            prop="userPhone"
            width="145"
            label="联系电话"
          />
          <el-table-column
            align="center"
            prop="userNumber"
            width="210"
            label="证件号"
          />
          <el-table-column align="center" prop="peerNum" label="同行人数" />
          <el-table-column
            align="center"
            width="100"
            prop="carNum"
            label="车牌号"
          />
          <el-table-column
            align="center"
            prop="visitReason"
            width="200"
            label="访问事由"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            width="250"
            label="图片"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 80px;
                "
              >
                <div v-viewer>
                  <img
                    v-for="i in row.image"
                    :src="i"
                    style="width: 60px; height: 60px; margin: 0 4px"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <template #default="scope">
              <span
                v-if="scope.row.statu == '1'"
                style="color: rgba(0, 97, 255, 1)"
                >待审核</span
              >
              <span
                v-if="scope.row.statu == '2'"
                style="color: rgba(212, 48, 48, 1)"
                >已拒绝</span
              >
              <span
                v-if="scope.row.statu == '7'"
                style="color: rgba(255, 87, 51, 1)"
                >进校核销</span
              >
              <span
                v-if="scope.row.statu == '8'"
                style="color: rgba(255, 87, 51, 1)"
                >出校核销</span
              >
              <span
                v-if="scope.row.statu == '9'"
                style="color: rgba(255, 87, 51, 1)"
                >已完成</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            width="180"
            label="创建时间"
          >
            <template #default="{ row }">
              {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="visitorTime"
            width="350"
            label="来访时间"
          >
            <template #default="{ row }">
              {{ dayjs(row.visitorTime).format("YYYY-MM-DD HH:mm:ss") }} -
              {{ dayjs(row.visitorDeadline).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="respondentName"
            label="受访者"
          />
          <el-table-column
            align="center"
            prop="departmentName"
            label="接待部门"
            width="120"
          />
          <el-table-column
            align="center"
            prop="respondentPhone"
            width="145"
            label="受访者电话"
          />
          <el-table-column
            align="center"
            prop="source"
            width="145"
            label="来源"
          >
            <template #default="{ row }">
              <span>{{ row.source == 1 ? "小程序" : "大屏" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120"
          >
            <template #default="scope">
              <div class="edit" v-if="scope.row.statu == '1'">
                <div class="look" @click="editClick(scope.row, 1)">审核</div>
              </div>
              <div
                class="edit"
                v-if="scope.row.statu == '7' || scope.row.statu == '8'"
              >
                <div class="look" @click="verificationClick(scope.row, 1)">
                  核销
                </div>
              </div>
              <div
                class="edit"
                v-if="scope.row.statu == '2' || scope.row.statu == '9'"
              >
                <el-popconfirm
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="删除后数据将无法恢复，确定对选中的访问数据进行删除吗？"
                  @confirm="del(scope.row, 1)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <div class="del">删除</div>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="pageSize">
        <span></span>
        <el-pagination
          background
          :current-page="currentPage1"
          :page-size="pageSize1"
          layout="total, prev, pager, next, jumper, slot"
          :total="total1"
          @update:current-page="handleCurrentChange1"
        />
      </div>
    </div>
    <div class="middle" v-if="visitorType == 2">
      <div class="filter">
        <div class="condition">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="可查询姓名、电话、受访者姓名、受访者接待部门、受访者电话、车牌号"
            placement="bottom-start"
          >
            <el-input
              :clearable="true"
              @clear="searchBtn"
              v-model="searchInput2.keyWord"
              style="width: 180px"
              placeholder="请输入关键字"
            />
          </el-tooltip>
        </div>
        <el-button
          color="rgba(0, 97, 255, 1)"
          type="primary"
          class="search condition"
          @click="searchBtn"
          >查询</el-button
        >
        <div class="condition">
          <span>状态&nbsp;&nbsp;</span>
          <el-select
            v-model="searchInput2.type"
            class="m-2"
            placeholder="请选择状态"
            style="width: 180px"
            @change="searchBtn"
          >
            <el-option label="全部" value="" />
            <el-option label="待审核" :value="1" />
            <el-option label="已拒绝" :value="2" />
            <el-option label="已完成" :value="9" />
          </el-select>
        </div>
        <div class="condition">
          <span>创建时间&nbsp;&nbsp;</span>
          <el-date-picker
            v-model="searchInput2.createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            style="width: 280px"
            @change="searchBtn"
          />
        </div>
        <div class="condition">
          <span>访问时间&nbsp;&nbsp;</span>
          <el-date-picker
            v-model="searchInput2.visitorTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            style="width: 280px"
            @change="searchBtn"
          />
        </div>
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <el-button
          type="primary"
          plain
          color="rgba(0, 97, 255, 1)"
          @click="restsClick"
          ><span>其他访客配置</span></el-button
        >
      </div>
    </div>
    <div class="scroll" v-if="visitorType == 2">
      <div class="footer" v-loading="loading">
        <el-table
          :row-class-name="tableRowClassName"
          :data="tableData2.list"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
            border: 0,
          }"
        >
          <!-- <el-table-column align="center" fixed type="selection" /> -->
          <el-table-column align="center" fixed prop="userName" label="姓名" />
          <el-table-column
            align="center"
            prop="userPhone"
            width="145"
            label="联系电话"
          />
          <el-table-column
            align="center"
            prop="userNumber"
            width="210"
            label="证件号"
          />
          <el-table-column align="center" prop="peerNum" label="同行人数" />
          <el-table-column
            align="center"
            width="100"
            prop="carNum"
            label="车牌号"
          />
          <el-table-column
            align="center"
            prop="visitReason"
            width="200"
            label="访问事由"
            show-overflow-tooltip
          />
          <!-- <el-table-column
            align="center"
            width="210"
            label="图片"
            show-overflow-tooltip
          >
            <template #default={row}>
              <div v-for="i in row.image" style="display:flex;justify-content:center;align-items:center;height:80px">
                <img @click="imgClick(i)" :src="i" style="width:60px;height:60px;margin:0 4px"/>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="status" label="状态">
            <template #default="scope">
              <span
                v-if="scope.row.statu == '1'"
                style="color: rgba(0, 97, 255, 1)"
                >待审核</span
              >
              <span
                v-if="scope.row.statu == '2'"
                style="color: rgba(212, 48, 48, 1)"
                >已拒绝</span
              >
              <span
                v-if="scope.row.statu == '9'"
                style="color: rgba(255, 87, 51, 1)"
                >已完成</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            width="180"
            label="创建时间"
          >
            <template #default="{ row }">
              {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column align="center" width="350" label="来访时间">
            <template #default="{ row }">
              {{ dayjs(row.visitorTime).format("YYYY-MM-DD HH:mm:ss") }} -
              {{ dayjs(row.visitorDeadline).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="respondentName"
            label="受访者"
          />
          <el-table-column
            align="center"
            prop="departmentId"
            label="接待部门"
          />
          <el-table-column
            align="center"
            prop="respondentPhone"
            width="145"
            label="受访者电话"
          />
          <el-table-column
            align="center"
            prop="source"
            width="145"
            label="来源"
          >
            <template #default="{ row }">
              <span>{{ row.source == 1 ? "小程序" : "大屏" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120"
          >
            <template #default="scope">
              <div class="edit" v-if="scope.row.statu == '1'">
                <div class="look" @click="editClick(scope.row, 2)">审核</div>
              </div>
              <div
                class="edit"
                v-if="scope.row.statu == '2' || scope.row.statu == '9'"
              >
                <el-popconfirm
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="删除后数据将无法恢复，确定对选中的访问数据进行删除吗？"
                  @confirm="del(scope.row, 2)"
                  @cancel="cancelEvent"
                >
                  <template #reference>
                    <div class="del">删除</div>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="pageSize">
        <span></span>
        <el-pagination
          background
          :current-page="currentPage2"
          :page-size="pageSize2"
          layout="total, prev, pager, next, jumper, slot"
          :total="total2"
          @update:current-page="handleCurrentChange2"
        />
      </div>
    </div>

    <!-- 其他访客配置 -->
    <el-dialog
      class="restsDialog"
      v-model="restsVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="其他访客配置"
      align-center
      width="600"
      :before-close="restsCancel"
    >
      <el-form
        ref="restsRef"
        :model="restsRuleForm"
        :rules="restsRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <p class="title">小程序设置</p>
        <el-form-item label="" prop="appAuditConfig">
          <el-radio-group v-model="restsRuleForm.appAuditConfig">
            <el-radio :value="1">需要审核</el-radio>
            <el-radio :value="9">不需要审核</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="title">是否和门禁联动</p>
        <el-form-item label="" prop="accessConfig">
          <el-radio-group v-model="restsRuleForm.accessConfig">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="title">是否和车闸联动</p>
        <el-form-item label="" prop="accessConfig">
          <el-radio-group v-model="restsRuleForm.carConfig">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="restsConfirm(restsRef)"
        >
          确认
        </el-button>
        <el-button @click="restsCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 访客配置（家长） -->
    <el-dialog
      class="subsectionDialog"
      v-model="subsectionVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="家长访客配置"
      align-center
      width="1100"
      :before-close="cancelSubsection"
    >
      <div class="middle">
        <div class="filter">
          <!-- 年级 -->
          <div class="condition" v-if="classId == 0">
            <span class="title">年级 : </span>
            <el-select
              v-model="patriarchInput.grade"
              placeholder="请选择年级"
              style="width: 160px"
              @change="gradeChange"
              :clearable="false"
            >
              <el-option v-for="i in gradeData" :label="i.name" :value="i.id">
              </el-option>
            </el-select>
          </div>
          <!-- 班级 -->
          <div class="condition" v-if="classId == 0">
            <span class="title">班级 : </span>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="请先选择年级"
              placement="top"
            >
              <el-select
                v-model="patriarchInput.class"
                placeholder="请选择班级"
                style="width: 160px"
                @change="searchBtn"
                :clearable="false"
              >
                <el-option
                  v-for="i in classData"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-tooltip>
          </div>

          <!-- 年级 -->
          <div class="condition" v-if="classId != 0">
            <span class="title">年级 : </span>
            <el-select
              v-model="patriarchInput.grade"
              placeholder="请选择年级"
              style="width: 160px"
            >
              <el-option v-for="i in gradeData" :label="i.name" :value="i.id">
              </el-option>
            </el-select>
          </div>
          <!-- 班级 -->
          <div class="condition" v-if="classId != 0">
            <span class="title">班级 : </span>
            <el-select
              v-model="patriarchInput.class"
              placeholder="请选择班级"
              style="width: 160px"
              @change="searchBtn"
            >
              <el-option v-for="i in classData" :label="i.name" :value="i.id" />
            </el-select>
          </div>
        </div>
      </div>
      <div class="selObject">
        <!-- <el-button
          type="primary"
          color="rgba(0, 97, 255, 1)"
          plain
          @click="patriarchClick"
          >增加</el-button
        > -->
      </div>
      <el-table
        :row-class-name="tableRowClassName"
        :data="subsectionData.list"
        :header-cell-style="{
          background: 'rgba(240, 243, 247, 1)',
          height: '50px',
        }"
      >
        <el-table-column width="80" align="center" type="index" label="序号" />
        <el-table-column
          width="160"
          align="center"
          prop="gradeName"
          label="年级"
        />
        <el-table-column
          width="160"
          align="center"
          prop="className"
          label="班级"
        />
        <el-table-column align="center" prop="time" label="创建时间" />
        <el-table-column align="center" prop="status" label="操作">
          <template #default="{ index, row }">
            <div class="option">
              <div class="edit" @click="patriarchClick(row)">编辑</div>
              <!-- <div class="edit" @click="subsectionDel(row)">删除</div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageSize">
        <span></span>
        <el-pagination
          background
          :current-page="subsectionPage"
          :page-size="subsectionSize"
          layout="total, prev, pager, next, jumper, slot"
          :total="subsectionTotal"
          @update:current-page="subsectionCurrentChange"
        />
      </div>
    </el-dialog>

    <!-- 添加家长访客配置 -->
    <el-dialog
      class="patriarchDialog"
      v-model="patriarchVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="家长访客配置修改"
      align-center
      width="650"
      :before-close="patriarchCancel"
    >
      <el-form
        ref="patriarchRef"
        :model="patriarchRuleForm"
        :rules="patriarchRules"
        label-width="90px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <el-form-item label="年级 :" prop="gradeName">
          <!-- <el-select
            v-model="patriarchRuleForm.grade"
            placeholder="请选择年级"
            style="width: 500px"
            clearable
          >
            <el-option v-for="i in gradeData" :label="i.name" :value="i.id" />
          </el-select> -->
          <span style="font-weight: 800">{{
            patriarchRuleForm.gradeName
          }}</span>
        </el-form-item>
        <el-form-item label="班级 :" prop="className">
          <!-- <el-select
            v-model="patriarchRuleForm.class"
            placeholder="请选择班级"
            style="width: 500px"
            clearable
          >
            <el-option v-for="i in classData" :label="i.name" :value="i.id" />
          </el-select> -->
          <span style="font-weight: 800">{{
            patriarchRuleForm.className
          }}</span>
        </el-form-item>
        <p class="title">访客预约小程序审批流程设置</p>
        <el-form-item label="" prop="appAuditConfig">
          <el-radio-group v-model="patriarchRuleForm.appAuditConfig">
            <el-radio :value="1">需要审核</el-radio>
            <el-radio :value="4">不需要审核</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="appPushConfig">
          <el-radio-group v-model="patriarchRuleForm.appPushConfig">
            <el-radio :value="5">需要推送</el-radio>
            <el-radio :value="3">不需要推送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="appCancelConfig">
          <el-radio-group v-model="patriarchRuleForm.appCancelConfig">
            <el-radio :value="6">需要核销</el-radio>
            <el-radio :value="9">不需要核销</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="title">访客预约终端审批流程设置</p>
        <el-form-item label="" prop="screenAuditConfig">
          <el-radio-group v-model="patriarchRuleForm.screenAuditConfig">
            <el-radio :value="1">需要审核</el-radio>
            <el-radio :value="4">不需要审核</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="screenPushConfig">
          <el-radio-group v-model="patriarchRuleForm.screenPushConfig">
            <el-radio :value="5">需要推送</el-radio>
            <el-radio :value="3">不需要推送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="screenCancelConfig">
          <el-radio-group v-model="patriarchRuleForm.screenCancelConfig">
            <el-radio :value="6">需要核销</el-radio>
            <el-radio :value="9">不需要核销</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="title">是否和门禁联动</p>
        <el-form-item label="" prop="accessConfig">
          <el-radio-group v-model="patriarchRuleForm.accessConfig">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="title">是否和车闸联动</p>
        <el-form-item label="" prop="accessConfig">
          <el-radio-group v-model="patriarchRuleForm.carConfig">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="patriarchConfirm(patriarchRef)"
        >
          确认
        </el-button>
        <el-button @click="patriarchCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 审核按钮 -->
    <el-dialog
      class="editDialog"
      v-model="editVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="审核"
      align-center
      width="600"
      :before-close="cancelEdit"
    >
      <ul>
        <li>
          访客类型：<span>{{
            editRuleForm.visitorType == 1 ? "家长" : "其他"
          }}</span>
        </li>
        <li>
          访客姓名：<span>{{ editRuleForm.userName }}</span>
        </li>
        <li>
          访客手机号：<span>{{ editRuleForm.userPhone }}</span>
        </li>
        <li>
          来访时间：<span>{{ editRuleForm.visitorTime }}</span>
        </li>
        <li>
          证件号：<span>{{ editRuleForm.userNumber }}</span>
        </li>
        <li>
          访问事由：<span>{{ editRuleForm.visitReason }}</span>
        </li>
        <li>
          车牌号：<span>{{ editRuleForm.carNum }}</span>
        </li>

        <li v-if="editRuleForm.respondentPhone">
          受访人员：<span
            >{{ editRuleForm.respondentName }}（{{
              editRuleForm.respondentPhone
            }}）</span
          >
        </li>
        <li v-else>
          受访人员：<span>{{ editRuleForm.respondentName }}</span>
        </li>
      </ul>
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmEdit(4)"
        >
          同意
        </el-button>
        <el-button @click="confirmEdit(2)" color="rgba(212, 48, 48, 1)"
          >拒绝</el-button
        >
      </div>
    </el-dialog>
    <!-- 勾选删除 -->
    <el-dialog
      class="closeAccount"
      v-model="selDelVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="提示"
      align-center
      width="500"
      :before-close="cancelSelDel"
    >
      <div class="content">
        <img src="@/assets/images/warning.png" alt="" />
        <span>删除后数据将无法恢复，确定对选中的访问数据进行删除吗？</span>
      </div>
      <div class="option">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmCloseAccount"
        >
          确认
        </el-button>
        <el-button @click="cancelSelDel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const loading = ref(false);

const visitorType = ref(1); // 访客预约类型
const searchInput1 = reactive({
  keyWord: "", // 关键字
  type: "", // 状态
  createTime: "", // 创建时间
  visitorTime: "", // 来访时间
}); // 搜索按钮数据
const searchInput2 = reactive({
  keyWord: "", // 关键字
  type: "", // 状态
  createTime: "", // 创建时间
  visitorTime: "", // 来访时间
}); // 搜索按钮数据

const currentPage1 = ref(1); // 当前页
const pageCount1 = ref(10);
const total1 = ref(4); // 当前总数
const tableData1 = reactive({
  list: [],
});

const currentPage2 = ref(1); // 当前页
const pageCount2 = ref(10);
const total2 = ref(4); // 当前总数
const tableData2 = reactive({
  list: [],
});

const classId = ref(); // 判断访客家长是超级管理员(0)还是班主任
const gradeId = ref(); // 判断访客家长是超级管理员(0)还是班主任
// 访客配置（家长）///////////////////////////////////
const subsectionVisible = ref(false);
const subsectionData = reactive({ list: [] });
const subsectionPage = ref(1);
const subsectionSize = ref(10);
const subsectionTotal = ref(10);

// 增加家长访客配置////////////////////////////////////
const patriarchVisible = ref(false);
const patriarchInput = reactive({
  class: "",
  grade: "",
});
const patriarchRef = ref();
const patriarchRuleForm = reactive({
  accessConfig: "", // 门禁配置 0:推送到门禁，1:不推送到门禁
  carConfig: "", // 车闸配置
  appAuditConfig: "", // 小程序审核配置 1:需要审核，4:不需要审核
  appPushConfig: "", // 小程序推送配置 5:需要推送，3:不需要推送
  appCancelConfig: "", // 小程序核销配置 6:需要核销，，9:不需要核销
  classId: "", // smart class表的id
  className: "", // 班级
  gradeName: "", // 年级
  id: "", // 家长访客预约配置
  screenAuditConfig: "", // 大屏序审核配置 1:需要审核， 4:不需要审核
  screenPushConfig: "", // 大屏序推送配置 5:需要推送，3:不需要推送
  screenCancelConfig: "", // 大屏核销配置 6:需要核销，9:不需要核销
});
const patriarchRules = reactive({
  gradeName: [{ required: true, message: "年级不能为空", trigger: "blur" }],
  className: [{ required: true, message: "班级不能为空", trigger: "blur" }],
  appAuditConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  appPushConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  appCancelConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  screenAuditConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  screenPushConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  screenCancelConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  accessConfig: [
    { required: true, message: "当前选择项不能为空", trigger: "blur" },
  ],
  carConfig: [
    { required: true, message: "当前选择项不能为空", trigger: "blur" },
  ],
});
const gradeData = ref(); // 年级数据
const classData = ref(); // 班级数据

// 其他访客配置 、、、、、、、、、、、、、、、、、、
const restsVisible = ref(false);
const restsRef = ref();
const restsRuleForm = reactive({
  appAuditConfig: "", // 小程序审核配置 1:需要审核，4:不需要审核
  accessConfig: "", // 门禁配置 0:推送到门禁，1:不推送到门禁
  carConfig: "",
  id: "",
});
const restsRules = reactive({
  appAuditConfig: [
    { required: true, message: "当前选项不能为空", trigger: "blur" },
  ],
  accessConfig: [
    { required: true, message: "当前选择项不能为空", trigger: "blur" },
  ],
  carConfig: [
    { required: true, message: "当前选择项不能为空", trigger: "blur" },
  ],
});

// 审核功能
const titleDialog = ref("");
const editVisible = ref(false);
const editRef = ref();
const flags = ref(1); // 判断审核是学生家长审核还是其他审核
const editRuleForm = reactive({
  userName: "", // 访客姓名
  userPhone: "", // 访客电话
  userNumber: "", // 访客证件号
  visitorTime: "", // 来访时间
  visitReason: "", // 访问事由
  carNum: "", //车牌号
  respondentName: "", //受访学生：
  respondentPhone: "", // 受访人员
  visitorType: "", // 访客类型
  id: "",
});

// 删除弹窗
const selDelVisible = ref(false);

// 预约记录分页数据
const getList = async () => {
  loading.value = true;
  if (visitorType.value == 1) {
    let data = {
      currentPage: currentPage1.value,
      pageCount: pageCount1.value,
      type: visitorType.value, // 学生家长预约
      keyWord: searchInput1.keyWord,
      status: searchInput1.type, // 状态
      // managerId: sessionStorage.getItem("token"),
    };
    if (searchInput1.createTime) {
      data.startTime = searchInput1.createTime[0];
      data.endTime = searchInput1.createTime[1];
    }
    if (searchInput1.visitorTime) {
      data.visitorStartTime = searchInput1.visitorTime[0];
      data.visitorEndTime = searchInput1.visitorTime[1];
    }
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/getPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    // console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "家长访客预约");
    if (res.data.code == 200) {
      loading.value = false;
      tableData1.list = JSON.parse(eds.decryptDes(res.data.data)).list;
      total1.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
      // ElMessage({
      //   type: "success",
      //   showClose: true,
      //   message: res.data.message,
      //   center: true,
      // });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (visitorType.value == 2) {
    let data = {
      currentPage: currentPage2.value,
      pageCount: pageCount2.value,
      type: visitorType.value, // 学生家长预约
      keyWord: searchInput2.keyWord,
      status: searchInput2.type, // 状态
      // managerId: sessionStorage.getItem("token"),
    };
    if (searchInput2.createTime) {
      data.startTime = searchInput2.createTime[0];
      data.endTime = searchInput2.createTime[1];
    }
    if (searchInput2.visitorTime) {
      data.visitorStartTime = searchInput2.visitorTime[0];
      data.visitorEndTime = searchInput2.visitorTime[1];
    }
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/getPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "其他访客预约");
    if (res.data.code == 200) {
      loading.value = false;
      tableData2.list = JSON.parse(eds.decryptDes(res.data.data)).list;
      total2.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
      // ElMessage({
      //   type: "success",
      //   showClose: true,
      //   message: res.data.message,
      //   center: true,
      // });
    } else {
      loading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 切换学生家长预约 || 其他访客预约
const visitorTypeClick = (val) => {
  getList();
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);

// 判断为班主任 还是 超级管理员
const getAdminId = async () => {
  // 获取所管理的班级的id（0是所有班级）
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartAuthorGroup/getClassById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      userHead: sessionStorage.getItem("userhead"),
    },
  });
  // console.log(
  //   res,
  //   JSON.parse(eds.decryptDes(res.data.data)),
  //   "获取所管理的班级的id（0是所有班级）"
  // );
  if (res.data.code == 200) {
    let classIds = JSON.parse(eds.decryptDes(res.data.data)).schoolClass;
    classId.value = classIds;
    adminClassDataList();
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 年级数据下拉
const adminClassDataList = async () => {
  console.log(classId.value == 1);
  if (classId.value == 0) {
    let grade = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartGrade/querySmartGrades",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      // params: data,
    });
    console.log(
      grade,
      JSON.parse(eds.decryptDes(grade.data.data)),
      "年级下拉数据"
    );
    let resData = JSON.parse(eds.decryptDes(grade.data.data));
    gradeData.value = resData;
    patriarchInput.grade = resData[0].id;
    adminClassInfoList(patriarchInput.grade).then(() => {
      patriarchInput.class = classData.value[0].id;
      getList();
    });
  } else {
    let grade = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartClass/getClassId",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: {
        schoolClass: classId.value,
      },
    });
    console.log(
      grade,
      JSON.parse(eds.decryptDes(grade.data.data)),
      "年级下拉数据"
    );
    let data = JSON.parse(eds.decryptDes(grade.data.data));
    gradeData.value = [
      {
        name: data.gradeName,
        id: data.gradeId,
      },
    ];
    classData.value = [
      {
        name: data.className,
        id: data.classId,
      },
    ];
    patriarchInput.grade = data.gradeId;
    patriarchInput.class = data.classId;
    getList();
  }
};
// 管理员 改变年级选择
const gradeChange = (value) => {
  console.log(value);
  if (value) {
    adminClassInfoList(value).then(() => {
      patriarchInput.class = classData.value[0].id;
      getList();
    });
  } else {
    classData.value = [];
    patriarchInput.class = "";
  }
};
// 管理员 班级数据下拉
const adminClassInfoList = async (value) => {
  let data = {
    gradeId: value,
  };
  let classs = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartClass/querySmartClasss",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });

  if (classs.data.code == 200) {
    console.log(
      classs,
      JSON.parse(eds.decryptDes(classs.data.data)),
      "班级下拉数据"
    );
    classData.value = JSON.parse(eds.decryptDes(classs.data.data));
  } else {
    classData.value = [];
  }
};

// 访客配置（家长）
const subsectionClick = async () => {
  subsectionVisible.value = true;
  let ress = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartVisitorParentsConfig/getClassId",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: {
      page: subsectionPage.value,
      size: subsectionSize.value,
      classId: patriarchInput.class,
      gradeId: patriarchInput.grade,
    },
  });
  // console.log(
  //   ress,
  //   JSON.parse(eds.decryptDes(ress.data.data)),
  //   "家长访客配置展示"
  // );
  // console.log(ress, "家长访客配置展示");
  if (ress.data.code == 200) {
    let data = JSON.parse(eds.decryptDes(ress.data.data));
    data.list.forEach((item) => {
      let time = dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss");
      item.time = time;
    });
    subsectionTotal.value = data.totalCount;
    subsectionData.list = data.list;
  }
};
const cancelSubsection = () => {
  subsectionVisible.value = false;
  subsectionPage.value = 1;
};
const subsectionCurrentChange = (value) => {
  subsectionPage.value = value;
  subsectionClick();
};

// 增加家长访客配置 （-------------------------------------------）
const patriarchClick = (row) => {
  console.log(row, "家长访客配置编辑");
  patriarchVisible.value = true;
  patriarchRuleForm.accessConfig = row.accessConfig; // 门禁配置 0:推送到门禁，1:不推送到门禁
  patriarchRuleForm.appAuditConfig = row.appAuditConfig; // 小程序审核配置 1:需要审核，4:不需要审核
  patriarchRuleForm.appCancelConfig = row.appCancelConfig; // 小程序核销配置 6:需要核销，，9:不需要核销
  (patriarchRuleForm.appPushConfig = row.appPushConfig), // 小程序推送配置 5:需要推送，3:不需要推送
    (patriarchRuleForm.classId = row.classId); // smart class表的id
  patriarchRuleForm.className = row.className; // 班级
  patriarchRuleForm.gradeName = row.gradeName; // 年级
  patriarchRuleForm.id = row.id; // 家长访客预约配置
  patriarchRuleForm.screenAuditConfig = row.screenAuditConfig; // 大屏序审核配置 1:需要审核， 4:不需要审核
  patriarchRuleForm.screenCancelConfig = row.screenCancelConfig; // 大屏核销配置 6:需要核销，9:不需要核销
  patriarchRuleForm.screenPushConfig = row.screenPushConfig; // 大屏序推送配置 5:需要推送，3:不需要推送
};
const patriarchConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        id: patriarchRuleForm.id,
        classId: patriarchRuleForm.classId,
        appAuditConfig: patriarchRuleForm.appAuditConfig,
        appPushConfig: patriarchRuleForm.appPushConfig,
        appCancelConfig: patriarchRuleForm.appCancelConfig,
        screenAuditConfig: patriarchRuleForm.screenAuditConfig,
        screenPushConfig: patriarchRuleForm.screenPushConfig,
        screenCancelConfig: patriarchRuleForm.screenCancelConfig,
        accessConfig: patriarchRuleForm.accessConfig,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/wanzai/api/smartVisitorParentsConfig/update",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "确定家长访客配置修改");
      if (res.data.code == 200) {
        patriarchVisible.value = false;
        subsectionClick();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const patriarchCancel = () => {
  patriarchVisible.value = false;
  patriarchRef.value.resetFields();
  patriarchRuleForm.accessConfig = ""; // 门禁配置 0:推送到门禁，1:不推送到门禁
  patriarchRuleForm.appAuditConfig = ""; // 小程序审核配置 1:需要审核，4:不需要审核
  patriarchRuleForm.appCancelConfig = ""; // 小程序核销配置 6:需要核销，，9:不需要核销
  patriarchRuleForm.appPushConfig = ""; // 小程序推送配置 5:需要推送，3:不需要推送
  patriarchRuleForm.classId = ""; // smart class表的id
  patriarchRuleForm.className = ""; // 班级
  patriarchRuleForm.gradeName = ""; // 年级
  patriarchRuleForm.id = ""; // 家长访客预约配置
  patriarchRuleForm.screenAuditConfig = ""; // 大屏序审核配置 1:需要审核， 4:不需要审核
  patriarchRuleForm.screenCancelConfig = ""; // 大屏核销配置 6:需要核销，9:不需要核销
  patriarchRuleForm.screenPushConfig = ""; // 大屏序推送配置 5:需要推送，3:不需要推送
};

// 其他访客配置 （-------------------------------------------）
const restsClick = async () => {
  restsVisible.value = true;
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartVisitorRestsConfig/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "其他访客配置");
  if (res.data.code == 200) {
    let data = JSON.parse(eds.decryptDes(res.data.data));
    restsRuleForm.id = data.id;
    restsRuleForm.appAuditConfig = data.auditConfig;
    restsRuleForm.accessConfig = data.accessConfig;
  }
};
const restsConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        id: restsRuleForm.id,
        auditConfig: restsRuleForm.appAuditConfig,
        accessConfig: restsRuleForm.accessConfig,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/wanzai/api/smartVisitorRestsConfig/update",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "其他访客配置修改");
      if (res.data.code == 200) {
        restsClick();
        restsVisible.value = false;
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const restsCancel = () => {
  restsVisible.value = false;
  restsRef.value.resetFields();
};

//审核按钮  （-------------------------------------------）
const editClick = async (row, flag) => {
  // titleDialog.value = "编辑";
  console.log(row, "审核");
  flags.value = flag;
  editVisible.value = true;
  editRuleForm.userName = row.userName;
  editRuleForm.userPhone = row.userPhone;
  editRuleForm.userNumber = row.userNumber;
  editRuleForm.visitorTime = dayjs(row.visitorTime).format(
    "YYYY-MM-DD HH:mm:ss"
  );
  editRuleForm.visitReason = row.visitReason;
  editRuleForm.carNum = row.carNum;
  editRuleForm.respondentName = row.respondentName;
  editRuleForm.respondentPhone = row.respondentPhone;
  editRuleForm.visitorType = row.visitorType;
  editRuleForm.id = row.id;
};
const confirmEdit = async (flag) => {
  // 学生家长审核
  if (flags.value == 1) {
    let data = {
      id: editRuleForm.id,
      type: flag,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/parentsAudit",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "家长访问预约审核");
    if (res.data.code == 200) {
      editVisible.value = false;
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (flags.value == 2) {
    let data = {
      id: editRuleForm.id,
      type: flag,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/restsAudit",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "其他访问预约审核");
    if (res.data.code == 200) {
      editVisible.value = false;
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
const cancelEdit = () => {
  editVisible.value = false;
  // editRef.value.resetFields();
};

// 核销
const verificationClick = async (row, flag) => {
  if (flags.value == 1) {
    let data = {
      id: row.id,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/verification",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res, "家长访问核销");
    if (res.data.code == 200) {
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

//删除按钮
const del = async (row, flag) => {
  if (flag == 1) {
    let data = {
      id: row.id,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/deleteSmartVisitorById",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    if (res.data.code == 200) {
      if (tableData1.list.length == 1 && currentPage1.value != 1) {
        currentPage1.value = currentPage1.value - 1;
      }
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (flag == 2) {
    let data = {
      id: row.id,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartVisitor/deleteSmartVisitorById",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    if (res.data.code == 200) {
      if (tableData2.list.length == 1 && currentPage2.value != 1) {
        currentPage2.value = currentPage2.value - 1;
      }
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
const cancelEvent = () => {};

// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  // selectData.list = val;
};
//导出功能
// const importExcel = async () => {
//   if (searchInput.createTime == null) {
//     searchInput.createTime = "";
//   }
//   let data = new FormData();
//   data.set("car_number", searchInput.carnumber);
//   data.set("create_time", searchInput.createTime);
//   let res = await axios({
//     method: "post",
//     url: api.value + "/carBook/cinfotoExcel.action",
//     headers: {
//        token: sessionStorage.getItem("token"),
// user_head: sessionStorage.getItem("userhead"),
//     },
//     data: data,
//   });
//   // console.log(res, "导出账号");
//   if (res.data.code == 200) {
//     // const elt = document.createElement("a");
//     // elt.setAttribute(
//     //   "href",
//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
//     // );
//     // elt.setAttribute("download", "file.png");
//     // elt.style.display = "none";
//     // document.body.appendChild(elt);
//     // elt.click();
//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
//     console.log("获得地址数据:", downloadPath);
//     var downloadLink = document.createElement("a");
//     downloadLink.style.display = "none"; // 使其隐藏
//     downloadLink.href = downloadPath;
//     downloadLink.download = "";
//     downloadLink.click();
//     document.body.appendChild(downloadLink);
//     document.body.removeChild(downloadLink);
//     ElMessage({
//       type: "success",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   } else {
//     ElMessage({
//       type: "error",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   }
// };
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange1 = (value) => {
  // console.log(value);
  currentPage1.value = value;
  getList();
};
// 分页
const handleCurrentChange2 = (value) => {
  // console.log(value);
  currentPage2.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  getAdminId();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
    .left_title {
      height: 60px;
      line-height: 60px;
    }
  }
  :deep(.el-tabs) {
    margin: 0 30px;
    .el-tabs__header {
      margin: 0;
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .el-tabs__item {
          box-shadow: none;
        }
      }
    }
    .el-tabs__content {
      display: none;
    }
  }
  .middle {
    width: calc(100% - 60px);
    margin: 0 auto;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 25px 10px 0;

        :deep(.el-input .el-input__inner) {
          font-size: 14px;
        }

        span {
          margin: 0 10px 0 0;
        }
      }
    }

    .gongneng {
      margin: 10px 0 10px 0;
    }

    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }

    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }

    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }

    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }
  .scroll {
    flex: 1;
    overflow: auto;

    .footer {
      width: calc(100% - 60px);
      height: calc(100% - 64px);
      margin: 0 auto;
      .el-table--fit {
        height: 100%;

        :deep(.el-table__header-wrapper) {
          background-color: #000;
          font-size: 14px;

          tr {
            // color: #000;
          }
        }
        :deep(.el-table__row):nth-child(2n) {
          // .el-table-fixed-column--left {
          //   background-color: rgba(240, 243, 247, 1);
          // }
          // .el-table-fixed-column--right {
          //   background-color: rgba(240, 243, 247, 1);
          // }
          td {
            background-color: rgba(240, 243, 247, 1);
          }
        }

        :deep(.el-table__row) {
          height: 50px;
          font-size: 14px;
          // color: #000;
          td {
            padding: 0;
            // border: 0;
          }
          &:hover {
            td {
              background-color: rgba(223, 236, 254, 1);
            }
          }
        }

        .el-button--primary {
          margin-left: 5px;
        }

        :deep(.el-table__body .even) {
          background-color: #fff;
        }

        :deep(.el-table__body .odd) {
          background-color: rgba(240, 243, 247, 1);
          // .el-table_1_column_1 {
          //   background-color: rgba(240, 243, 247, 1);
          // }
          // .el-table_1_column_2 {
          //   background-color: rgba(240, 243, 247, 1);
          // }
        }

        :deep(.edit) {
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(111, 182, 184, 1);
        }

        :deep(.look) {
          padding: 0 10px;
          cursor: pointer;
          color: rgba(30, 125, 251, 1);
        }

        .del {
          padding: 0 10px;
          color: rgba(212, 48, 48, 1);
          cursor: pointer;
        }

        // :deep(.look):hover {
        //   color: red;
        // }
        // :deep(.del):hover {
        //   color: red;
        // }
      }
    }
  }
  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 30px;
    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }

  // 访客配置（家长）
  :deep(.subsectionDialog) {
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 0 30px;
      .selObject {
        padding: 10px 0;
      }
      .el-table--fit {
        height: 500px;
        .el-table__header-wrapper {
          font-size: 14px;
          .cell {
            color: #000;
          }
        }

        .el-table__row {
          height: 50px;
          font-size: 14px;
          color: #000;

          td {
            padding: 0;
          }
          .option {
            display: flex;
            align-items: center;
            justify-content: center;
            .edit {
              color: rgba(0, 97, 255, 1);
              cursor: pointer;
              // padding-right: 10px;
            }
          }
        }
      }
      .pageSize {
        margin-top: 15px;
      }
      .options {
        margin: 30px 20px 0 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;

        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  // 添加家长访客配置
  :deep(.patriarchDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px;
      .el-form {
        .title {
          color: #000;
          font-weight: 800;
        }
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  // 其他访客配置
  :deep(.restsDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px;
      .el-form {
        .title {
          color: #000;
          font-weight: 800;
        }
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
  // 编辑按钮
  :deep(.editDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px;
      ul {
        margin: 0;
        padding: 0;
        li {
          list-style: none;
          color: #000;
          font-weight: 400;
          font-size: 16px;
          margin-bottom: 10px;
        }
      }
      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }
  // 注销账号
  :deep(.closeAccount) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      // height: 200px;
      // display: flex;
      // flex-direction: column-reverse;
      .content {
        height: 80px;
        font-size: 16px;
        padding: 20px 30px;
        display: flex;
        img {
          width: 25px;
          height: 25px;
          margin: 0 8px 0 0;
        }
      }
      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>
