ihotel-manage/src/views/roomStatus/roomStatus.vue

<template>
  <div
    class="content-box"
    v-loading="roomLoading"
    element-loading-text="加载中..."
  >
    <div class="left">
      <div class="cameratxt">
        <el-popover
          placement="top-start"
          title="房间使用情况"
          :width="350"
          trigger="hover"
          effect="light"
          content="this is content, this is content, this is content"
        >
          <template #reference>
            <span class="cameratxt">房态管理</span>
          </template>
          <div v-for="i in roomList.list" :key="i">
            {{ i.name }} : 未使用 {{ i.freeCount }} 间 , 已使用
            {{ i.useCount }} 间
          </div>
        </el-popover>
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <el-dropdown v-if="flagBtn.kaidian == 1 || flagBtn.guandian == 1">
          <el-button type="primary" color="rgba(41, 109, 227, 1)">
            批量控制电</el-button
          >
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="clean(1)" v-if="flagBtn.kaidian == 1"
                >批量开电</el-dropdown-item
              >
              <el-dropdown-item @click="clean(2)" v-if="flagBtn.guandian == 1"
                >批量关电</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown v-if="flagBtn.kaifang == 1 || flagBtn.guanfang == 1">
          <el-button type="primary" color="rgba(41, 109, 227, 1)">
            <span>批量开/关房</span></el-button
          >
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="roomClose(1)"
                v-if="flagBtn.kaifang == 1"
                >批量开房</el-dropdown-item
              >
              <el-dropdown-item
                @click="roomClose(2)"
                v-if="flagBtn.guanfang == 1"
                >批量关房</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown v-if="flagBtn.zhijing == 1 || flagBtn.zhizang == 1">
          <el-button type="primary" color="rgba(41, 109, 227, 1)">
            <span>批量置脏/净</span></el-button
          >
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="roomDirtyClose(1)"
                v-if="flagBtn.zhizang == 1"
                >批量置脏</el-dropdown-item
              >
              <el-dropdown-item
                @click="roomDirtyClose(2)"
                v-if="flagBtn.zhijing == 1"
                >批量置净</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="scroll">
      <div class="middle">
        <div class="filter">
          <div class="condition">
            <el-input
              :clearable="true"
              @clear="searchBtn"
              v-model.trim="searchInput.keyWord"
              class="w-50 m-2"
              placeholder="请输入姓名或房间号"
              style="width: 230px"
            />
            <el-button
              style="margin-left: 20px"
              color="rgba(41, 109, 227, 1)"
              type="primary"
              class="search"
              @click="searchBtn"
              ><el-icon>
                <Search />
              </el-icon>
              <span>查询</span></el-button
            >
          </div>

          <div class="condition">
            <span>楼栋单元</span>
            <el-select
              style="width: 200px; margin-left: 20px"
              v-model="searchInput.buildingId"
              placeholder="请选择楼栋单元"
              @change="searchBtn"
              :clearable="true"
            >
              <el-option
                v-for="item in buildData"
                :key="item.id"
                :label="`${item.building}${item.element}`"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="condition">
            <span>房间类型</span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="searchInput.houseType"
              class="m-2"
              placeholder="请选择类型"
              :clearable="true"
              @change="houseTypeClick"
            >
              <el-option label="全日房" value="1" />
              <el-option label="钟点房" value="2" />
            </el-select>
          </div>
          <div class="condition">
            <span>房型 </span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="searchInput.houseId"
              class="m-2"
              placeholder="请选择房型"
              :clearable="true"
              @change="searchBtn"
            >
              <el-option
                :label="`${i.roomName}(${i.roomType == 1 ? '全' : '钟'})`"
                :value="i.id"
                v-for="i in roomTypeData"
                :key="i"
              />
            </el-select>
          </div>
          <div class="condition" v-if="switchDayIndex == 1">
            <span>房间状态 </span>
            <el-select
              style="width: 180px; margin-left: 20px"
              v-model="searchInput.status"
              class="m-2"
              placeholder="请选择房间状态"
              :clearable="true"
              @change="searchBtn"
            >
              <el-option label="空闲" value="1" />
              <el-option label="脏房" value="2" />
              <el-option label="预定" value="3" />
              <el-option label="入住" value="4" />
              <el-option label="锁定" value="5" />
              <el-option label="维修" value="6" />
            </el-select>
          </div>
        </div>
        <div class="changeItems">
          <div
            class="changeItem"
            :class="switchDayIndex == 1 ? 'changeItem_active' : ''"
            @click="switchDay(1)"
          >
            单日
          </div>
          <div
            class="changeItem"
            :class="switchDayIndex == 2 ? 'changeItem_active' : ''"
            @click="switchDay(2)"
          >
            日历
          </div>
          <el-button
            style="margin-left: 20px"
            color="rgba(41, 109, 227, 1)"
            type="primary"
            class="search"
            @click="searchBtn"
            ><span>刷新房态信息</span></el-button
          >
        </div>
      </div>
      <div class="footer" v-if="switchDayIndex == 1">
        <div class="floor" v-for="item in roomList.list" :key="item">
          <div class="title" v-if="item.roomlength">
            <span class="t1">{{ item.name }}</span
            ><span class="t2">/ 共{{ item.roomlength }}间</span>
          </div>
          <div class="roomList" v-if="item.vos">
            <div class="room" v-for="i in item.vos" :key="i">
              <el-popover
                popper-class="roominfoPopper"
                placement="bottom-start"
                :width="360"
                trigger="click"
                effect="light"
                :visible="i.visible"
              >
                <template #reference>
                  <div @click="itemClick(i)" style="position: relative">
                    <div class="roomNum" v-if="i.status">
                      <span
                        >{{ i.houseNumber
                        }}<span style="color: #1e7dfb">{{
                          i.roomType == 1 ? "（全）" : "（钟）"
                        }}</span></span
                      >
                      <span
                        class="status"
                        :style="`background-color:#0844f8`"
                        v-if="i.status == 1"
                        >空闲</span
                      >
                      <span
                        class="status"
                        :style="`background-color:#000000`"
                        v-if="i.status == 2"
                        >脏房</span
                      >
                      <span
                        class="status"
                        :style="`background-color: #bc6e0e`"
                        v-if="i.status == 3"
                        >预定</span
                      >
                      <span
                        class="status"
                        :style="`background-color: rgba(119, 26, 241, 1)`"
                        v-if="i.status == 4"
                        >入住</span
                      >
                      <span
                        class="status"
                        :style="`background-color:#de3f3f`"
                        v-if="i.status == 5"
                        >锁房</span
                      >
                      <span
                        class="status"
                        :style="`background-color: ${roomTypeColor[i.status]};`"
                        v-if="i.status == 6"
                        >维修</span
                      >
                    </div>
                    <div class="roomNum" v-else>
                      <span
                        >{{ i.houseNumber
                        }}<span style="color: #1e7dfb">{{
                          i.roomType == 1 ? "（全）" : "（钟）"
                        }}</span></span
                      >
                      <span
                        class="status"
                        :style="`background-color: ${roomTypeColor[1]};`"
                        v-if="i.houseStatus == 1"
                        >空闲</span
                      >
                      <span
                        class="status"
                        :style="`background-color: ${roomTypeColor[4]};`"
                        v-if="i.houseStatus == 2"
                        >脏房</span
                      >
                    </div>
                    <div
                      class="rLock"
                      style="font-weight: 600; font-size: 14px"
                    >
                      {{ i.reserveName }}
                    </div>
                    <div
                      class="rLock"
                      v-if="
                        i.status != null &&
                        i.houseStatus &&
                        i.status != 5 &&
                        i.status != 6
                      "
                    >
                      <span>入住：{{ i.reserveLiveTime }}</span>
                    </div>
                    <div class="rLock" v-if="i.status == 5 || i.status == 6">
                      <span>开始：{{ i.startTime }}</span>
                    </div>
                    <div
                      class="rLock"
                      v-if="
                        i.status != null &&
                        i.houseStatus &&
                        i.status != 5 &&
                        i.status != 6
                      "
                    >
                      <span>离店：{{ i.reserveLeaveTime }}</span>
                    </div>
                    <div class="rLock" v-if="i.status == 5 || i.status == 6">
                      <span>结束：{{ i.endTime }}</span>
                    </div>
                    <div style="position: absolute; right: 15px; bottom: 8px">
                      <img
                        title="关灯"
                        v-if="i.electricType == 1"
                        @click="bulbsClick(i)"
                        style="width: 22px; height: 22px; cursor: pointer"
                        src="../../assets/icons/bulbs.png"
                        alt=""
                      />
                      <img
                        title="开灯"
                        v-if="i.electricType == 2"
                        @click="bulbsClick(i)"
                        style="width: 20px; height: 20px; cursor: pointer"
                        src="../../assets/icons/bulb.png"
                        alt=""
                      />
                    </div>
                  </div>
                </template>
                <!-- 弹窗面板 -->
                <div class="roomInfo">
                  <img
                    class="close"
                    @click="closeItem(i)"
                    src="@/assets/icons/close.png"
                    alt=""
                  />
                  <div class="title">
                    <div class="i">{{ i.houseName }}</div>
                    <div v-if="i.status">
                      <div
                        class="setAside"
                        @click="setAside(i)"
                        v-if="i.status == 2 && flagBtn.zhijing == 1"
                      >
                        <img src="@/assets/icons/setAside.png" alt="" />
                        <span>置净</span>
                      </div>
                      <div
                        class="setAside"
                        @click="mess(i)"
                        v-if="i.status == 1 && flagBtn.zhizang == 1"
                      >
                        <img src="@/assets/icons/setAside.png" alt="" />
                        <span>置脏</span>
                      </div>
                    </div>
                    <div v-else>
                      <div
                        class="setAside"
                        @click="setAside(i)"
                        v-if="i.houseStatus == 2 && flagBtn.zhijing == 1"
                      >
                        <img src="@/assets/icons/setAside.png" alt="" />
                        <span>置净</span>
                      </div>
                      <div
                        class="setAside"
                        @click="mess(i)"
                        v-else-if="i.houseStatus != 2 && flagBtn.zhizang == 1"
                      >
                        <img src="@/assets/icons/setAside.png" alt="" />
                        <span>置脏</span>
                      </div>
                    </div>
                  </div>
                  <!-- 空闲 -->
                  <template v-if="i.status == 1">
                    <!-- 空闲房 -->
                    <div class="content">
                      <div class="lefts">
                        <div>
                          <span>电量 :</span>
                          <span>{{ faceplateInfo.electricQuantity }}</span>
                        </div>
                      </div>
                      <div class="rigths">
                        <div
                          @click="reserveClick(i)"
                          v-if="flagBtn.yuding == 1"
                        >
                          <img src="@/assets/icons/yuding.png" alt="" />
                          <span>预定</span>
                        </div>
                        <div
                          @click="maintainClick(i)"
                          v-if="flagBtn.weixiu == 1"
                        >
                          <img src="@/assets/icons/weixiu.png" alt="" />
                          <span>维修</span>
                        </div>
                        <div
                          @click="lockRoomClick(i)"
                          v-if="flagBtn.suofang == 1"
                        >
                          <img src="@/assets/icons/suofang.png" alt="" />
                          <span>锁房</span>
                        </div>
                        <!-- <div @click="logClick">
                          <img src="@/assets/icons/log.png" alt="" />
                          <span>日志</span>
                        </div> -->
                        <div class="roomType">
                          <div class="block">
                            <span v-if="i.roomType == 1">全</span>
                            <span v-if="i.roomType == 2">钟</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="i.status == null && i.houseStatus == 1">
                    <!-- 空闲房 -->
                    <div class="content" v-if="i.houseStatus == 1">
                      <div class="lefts">
                        <div>
                          <span>电量 :</span>
                          <span>{{ faceplateInfo.electricQuantity }}</span>
                        </div>
                      </div>
                      <div class="rigths">
                        <div
                          @click="reserveClick(i)"
                          v-if="flagBtn.yuding == 1"
                        >
                          <img src="@/assets/icons/yuding.png" alt="" />
                          <span>预定</span>
                        </div>
                        <div
                          @click="maintainClick(i)"
                          v-if="flagBtn.weixiu == 1"
                        >
                          <img src="@/assets/icons/weixiu.png" alt="" />
                          <span>维修</span>
                        </div>
                        <div
                          @click="lockRoomClick(i)"
                          v-if="flagBtn.suofang == 1"
                        >
                          <img src="@/assets/icons/suofang.png" alt="" />
                          <span>锁房</span>
                        </div>
                        <!-- <div @click="logClick">
                          <img src="@/assets/icons/log.png" alt="" />
                          <span>日志</span>
                        </div> -->
                        <div class="roomType">
                          <div class="block">
                            <span v-if="i.roomType == 1">全</span>
                            <span v-if="i.roomType == 2">钟</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>

                  <!-- 脏房 -->
                  <template v-if="i.status == 2">
                    <div class="content">
                      <div class="lefts">
                        <div>
                          <span>电量 :</span>
                          <span>{{ faceplateInfo.electricQuantity }}</span>
                        </div>
                      </div>
                      <div class="rigths">
                        <!-- <div @click="reserveClick">
                          <img src="@/assets/icons/yuding.png" alt="" />
                          <span>预定</span>
                        </div>
                        <div @click="checkInClick">
                          <img src="@/assets/icons/ruzhu.png" alt="" />
                          <span>入住</span>
                        </div>
                        <div @click="maintainClick">
                          <img src="@/assets/icons/weixiu.png" alt="" />
                          <span>维修</span>
                        </div>
                        <div @click="lockRoomClick">
                          <img src="@/assets/icons/suofang.png" alt="" />
                          <span>锁房</span>
                        </div> 
                        <div @click="logClick">
                          <img src="@/assets/icons/log.png" alt="" />
                          <span>日志</span>
                        </div> -->
                        <div class="roomType">
                          <div class="block">
                            <span v-if="i.roomType == 1">全</span>
                            <span v-if="i.roomType == 2">钟</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else-if="i.status == null && i.houseStatus == 2">
                    <!-- 脏房 -->
                    <div class="content" v-if="i.houseStatus == 2">
                      <div class="lefts">
                        <div>
                          <span>电量 :</span>
                          <span>{{ faceplateInfo.electricQuantity }}</span>
                        </div>
                      </div>
                      <div class="rigths">
                        <!-- <div @click="reserveClick">
                          <img src="@/assets/icons/yuding.png" alt="" />
                          <span>预定</span>
                        </div>
                        <div @click="checkInClick">
                          <img src="@/assets/icons/ruzhu.png" alt="" />
                          <span>入住</span>
                        </div>
                        <div @click="maintainClick">
                          <img src="@/assets/icons/weixiu.png" alt="" />
                          <span>维修</span>
                        </div>
                        <div @click="lockRoomClick">
                          <img src="@/assets/icons/suofang.png" alt="" />
                          <span>锁房</span>
                        </div> 
                        <div @click="logClick">
                          <img src="@/assets/icons/log.png" alt="" />
                          <span>日志</span>
                        </div> -->
                        <div class="roomType">
                          <div class="block">
                            <span v-if="i.roomType == 1">全</span>
                            <span v-if="i.roomType == 2">钟</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>

                  <!-- 预定 -->
                  <div class="content" v-if="i.status == 3">
                    <div class="lefts">
                      <div>
                        <span>预定 :</span>
                        <span>{{ faceplateInfo.name }}</span>
                      </div>
                      <div>
                        <span>入住时间 :</span>
                        <span>{{ faceplateInfo.liveTime }}</span>
                      </div>
                      <div>
                        <span>离店时间 :</span>
                        <span>{{ faceplateInfo.leaveTime }}</span>
                      </div>
                      <div>
                        <span>电量 :</span>
                        <span>{{ faceplateInfo.electricQuantity }}</span>
                      </div>
                    </div>
                    <div class="rigths">
                      <div
                        @click="reserveClick(i)"
                        v-if="i.roomType == 2 && flagBtn.yuding == 1"
                      >
                        <img src="@/assets/icons/yuding.png" alt="" />
                        <span>预定</span>
                      </div>
                      <div @click="checkInClick(i)" v-if="flagBtn.ruzhu == 1">
                        <img src="@/assets/icons/ruzhu.png" alt="" />
                        <span>入住</span>
                      </div>
                      <div
                        @click="roomChangeClick(i)"
                        v-if="flagBtn.huanfang == 1"
                      >
                        <img src="@/assets/icons/roomChange.png" alt="" />
                        <span>换房</span>
                      </div>
                      <!-- <div @click="maintainClick">
                        <img src="@/assets/icons/weixiu.png" alt="" />
                        <span>维修</span>
                      </div>
                      <div @click="lockRoomClick(i)">
                        <img src="@/assets/icons/suofang.png" alt="" />
                        <span>锁房</span>
                      </div> -->
                      <!-- <div
                        @click="reserveCancal(i)"
                        v-if="flagBtn.quxiaoyuding == 1"
                      >
                        <img src="@/assets/icons/close1.png" alt="" />
                        <span>取消预订</span>
                      </div> -->
                      <el-popconfirm
                        v-if="
                          (i.orderStatus == 2 || i.orderStatus == 3) &&
                          flagBtn.tuikuan == 1
                        "
                        width="220"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#f89626"
                        title="是否退款?"
                        @confirm="orderPayout(i)"
                      >
                        <template #reference>
                          <div class="look">
                            <img src="@/assets/icons/refundMoney.png" alt="" />
                            退款
                          </div>
                        </template>
                      </el-popconfirm>
                      <el-popconfirm
                        v-if="
                          flagBtn.quxiaoyuding == 1 &&
                          (i.orderStatus == 3 || i.orderStatus == 2)
                        "
                        width="220"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#f89626"
                        title="当前订单已付款，取消预定 '将不退款' ，是否继续?"
                        @confirm="reserveCancal(i)"
                      >
                        <template #reference>
                          <div class="look">
                            <img src="@/assets/icons/close1.png" alt="" />
                            取消预订
                          </div>
                        </template>
                      </el-popconfirm>
                      <el-popconfirm
                        v-else-if="
                          flagBtn.quxiaoyuding == 1 && i.orderStatus == 1
                        "
                        width="220"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#f89626"
                        title="是否取消预定?"
                        @confirm="reserveCancal(i)"
                      >
                        <template #reference>
                          <div class="look">
                            <img src="@/assets/icons/close1.png" alt="" />
                            取消预订
                          </div>
                        </template>
                      </el-popconfirm>
                      <!-- <div @click="logClick">
                        <img src="@/assets/icons/log.png" alt="" />
                        <span>日志</span>
                      </div> -->
                      <div class="roomType">
                        <div class="block">
                          <span v-if="i.roomType == 1">全</span>
                          <span v-if="i.roomType == 2">钟</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 已入住 -->
                  <div class="content" v-if="i.status == 4">
                    <div class="lefts">
                      <div>
                        <span>住客 :</span>
                        <span>{{ faceplateInfo.name }}</span>
                      </div>
                      <div>
                        <span>入住时间 :</span>
                        <span>{{ faceplateInfo.reserveLiveTime }}</span>
                      </div>
                      <div>
                        <span>离店时间 :</span>
                        <span>{{ faceplateInfo.leaveTime }}</span>
                      </div>
                      <div>
                        <span>付款 :</span>
                        <span>{{ faceplateInfo.roomPrice }}</span>
                      </div>
                      <div>
                        <span>已入住时间 :</span>
                        <span>{{ faceplateInfo.checkTime }}</span>
                      </div>
                      <div>
                        <span>电量 :</span>
                        <span>{{ faceplateInfo.electricQuantity }}</span>
                      </div>
                      <!-- <div>
                        <span>水 :</span>
                        <span>{{ checkInRuleForm.roomPrice }}</span>
                      </div>
                      <div>
                        <span>电 :</span>
                        <span>{{ checkInRuleForm.roomPrice }}</span>
                      </div>
                      <div>
                        <span>代缴 :</span>
                        <span>{{ checkInRuleForm.roomPrice }}</span>
                      </div>
                      <div>
                        <span>电量 :</span>
                        <span>{{ i.dianliang }}</span>
                      </div> -->
                    </div>
                    <div class="rigths">
                      <div
                        @click="checkOutClick(i)"
                        v-if="flagBtn.tuifang == 1"
                      >
                        <img
                          src="@/assets/icons/checkOut.png"
                          style="height: 20px"
                          alt=""
                        />
                        <span>退房</span>
                      </div>
                      <!-- <div @click="refundClick">
                        <img src="@/assets/icons/refund.png" alt="" />
                        <span>退款</span>
                      </div> -->
                      <div
                        @click="roomChangeClick(i)"
                        v-if="flagBtn.huanfang == 1"
                      >
                        <img src="@/assets/icons/roomChange.png" alt="" />
                        <span>换房</span>
                      </div>
                      <div
                        @click="lookPasword(i)"
                        v-if="i.lockStatus == 1 && flagBtn.chakanmima == 1"
                      >
                        <img src="@/assets/icons/sendPass.png" alt="" />
                        <span>查看密码</span>
                      </div>
                      <!-- <div @click="logClick">
                        <img src="@/assets/icons/log.png" alt="" />
                        <span>日志</span>
                      </div> -->
                      <div class="roomType">
                        <div class="block">
                          <span v-if="i.roomType == 1">全</span>
                          <span v-if="i.roomType == 2">钟</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 锁房 -->
                  <div class="content" v-if="i.status == 5">
                    <div class="lefts">
                      <div>
                        <span>开始 :</span>
                        <span>{{ faceplateInfo.startTime }}</span>
                      </div>
                      <div>
                        <span>结束 :</span>
                        <span>{{ faceplateInfo.endTime }}</span>
                      </div>
                      <div>
                        <span>电量 :</span>
                        <span>{{ faceplateInfo.electricQuantity }}</span>
                      </div>
                    </div>
                    <div class="rigths">
                      <div @click="unlockClick(i)" v-if="flagBtn.kaifang == 1">
                        <img src="@/assets/icons/key.png" alt="" />
                        <span>开房</span>
                      </div>
                      <!-- <div @click="logClick">
                        <img src="@/assets/icons/log.png" alt="" />
                        <span>日志</span>
                      </div> -->
                      <div class="roomType">
                        <div class="block">
                          <span v-if="i.roomType == 1">全</span>
                          <span v-if="i.roomType == 2">钟</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 维修 -->
                  <div class="content" v-if="i.status == 6">
                    <div class="lefts">
                      <div>
                        <span>开始 :</span>
                        <span>{{ faceplateInfo.startTime }}</span>
                      </div>
                      <div>
                        <span>结束 :</span>
                        <span>{{ faceplateInfo.endTime }}</span>
                      </div>
                      <div>
                        <span>电量 :</span>
                        <span>{{ faceplateInfo.electricQuantity }}</span>
                      </div>
                    </div>
                    <div class="rigths">
                      <div
                        @click="maintainCancel(i)"
                        v-if="flagBtn.quxiaoweixiu == 1"
                      >
                        <img src="@/assets/icons/close1.png" alt="" />
                        <span>取消维修</span>
                      </div>
                      <!-- <div @click="logClick">
                        <img src="@/assets/icons/log.png" alt="" />
                        <span>日志</span>
                      </div> -->
                      <div class="roomType">
                        <div class="block">
                          <span v-if="i.roomType == 1">全</span>
                          <span v-if="i.roomType == 2">钟</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <div class="footers" v-if="switchDayIndex == 2">
        <el-table :data="tableDate" :span-method="arraySpanMethod">
          <el-table-column prop="date" align="center" fixed="left">
            <template #header>
              <div class="calendar">
                <div class="date">
                  <div class="dateSel" @click="calendarClick">
                    <span>{{ calendarTime }}</span>
                    <el-icon>
                      <Calendar />
                    </el-icon>
                  </div>
                  <div class="nowDay" @click="nowDaySel">今</div>
                </div>
                <!-- <div class="dates" @click="calendarClick">
                  <span
                    >&lt;{{ calendarDate.date1 }} -
                    {{ calendarDate.date2 }}&gt;</span
                  >
                </div> -->
                <div class="block" v-show="false">
                  <el-date-picker
                    ref="timeRef"
                    v-model="calendarTime"
                    type="datetime"
                    placeholder="Pick a Date"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    popper-class="calendarTimes"
                    :clearable="false"
                    @change="changeCalendar"
                  >
                  </el-date-picker>
                </div>
              </div>
            </template>
            <!-- <el-table-column
              prop="houseName"
              align="center"
              label="房间类型"
              width="120"
              column-key="houseName"
              :filters="[
                { text: '单间', value: '单间' },
                { text: '帐篷气泡房', value: '帐篷气泡房' },
                { text: '豪华浴缸房', value: '豪华浴缸房' },
                { text: '标准间', value: '标准间' },
              ]"
              :filter-method="filterHandler"
            >
              <template #default="{ row }">
                <div class="roomNumber">{{ row.calendarPageVo.houseName }}</div>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="houseName"
              align="center"
              label="房间类型"
              width="120"
              column-key="houseName"
            >
              <template #default="{ row }">
                <div class="roomNumber">{{ row.calendarPageVo.houseName }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              align="center"
              label="房间号"
              width="120"
            >
              <template #default="{ row }">
                <div class="roomNumber">
                  <span>{{ row.calendarPageVo.houseNumber }}</span>
                  <!-- <img
                    src="@/assets/cleanRoom.png"
                    alt=""
                    v-if="row.numberStatus == 2"
                  /> -->
                </div>
                <!-- <div
                  class="roomNumbers"
                  @click="roomOption(row, 1)"
                  v-if="row.numberStatus == 2"
                >
                  <span>转净房</span>
                </div>
                <div class="roomNumbers" @click="roomOption(row, 2)" v-else>
                  <span>转脏房</span>
                </div> -->
              </template>
            </el-table-column>
          </el-table-column>

          <!-- <el-table-column
            align="center"
            width="120"
            v-for="i in dateTimes"
            :key="i.dateStr"
          >
            <template #header>
              <div class="calendar">
                <div
                  v-if="i.dateStr == nowdate"
                  style="
                    color: rgba(41, 109, 227, 1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                  "
                >
                  <span style="padding: 0 10px">今天</span>
                  <span> {{ i.week }}</span>
                </div>
                <div
                  v-else
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <span style="font-size: 14px; padding: 0 10px">{{
                    i.date
                  }}</span>
                  <span
                    v-if="i.holiday"
                    style="font-size: 12px; color: rgb(255, 168, 102)"
                    >{{ i.holiday }}</span
                  >
                  <span v-else style="color: #999; font-size: 14px">
                    {{ i.week }}</span
                  >
                </div>
              </div>
            </template>
            <el-table-column
              prop="houseName"
              align="center"
              :label="`剩${i.roomSum}间`"
              width="120"
            >
              <template #default="{ row }">
                <el-popover
                  popper-class="roomOption"
                  placement="right"
                  :width="400"
                  trigger="click"
                  v-if="i.dateStr >= nowdate"
                >
                  <template #reference>
                    <div class="contentBody">
                      关房 房型类型样式
                      <div v-if="row[i.dateStr].status == 2">
                        <div
                          v-if="row[i.dateStr].closeType == 1"
                          class="contentBodys contentBodys_closeType"
                        >
                          <img src="@/assets/blockUp.png" alt="" />
                          <span>停用</span>
                        </div>
                        <div
                          v-if="row[i.dateStr].closeType == 2"
                          class="contentBodys contentBodys_closeType"
                        >
                          <img src="@/assets/maintain.png" alt="" />
                          <span>维修</span>
                        </div>
                        <div
                          v-if="row[i.dateStr].closeType == 3"
                          class="contentBodys contentBodys_closeType"
                        >
                          <img src="@/assets/retain.png" alt="" />
                          <span>保留</span>
                        </div>
                      </div>
                      预定 入住 房型类型样式
                      <div
                        v-if="
                          row[i.dateStr].status == 5 ||
                          row[i.dateStr].status == 6
                        "
                        style="
                          background-color: rgba(9, 101, 98, 1);
                          color: #fff;
                        "
                      >
                        <div class="calendar">
                          {{ row[i.dateStr].orderUserName }}
                        </div>
                        <div class="calendar">
                          {{ row[i.dateStr].orderUserPhone }}
                        </div>
                        表格预定房间样式
                        <div
                          style="text-align: right"
                          class="calendar calendars"
                          v-if="row[i.dateStr].status == 5"
                        >
                          <span
                            style="
                              display: inline-block;
                              background-color: rgb(255, 87, 51);
                              color: #fff;
                              width: 23px;
                              text-align: center;
                              transform: scale(0.8);
                              border-radius: 2px;
                            "
                            >预</span
                          >
                        </div>
                        表格入住房间样式
                        <div
                          style="text-align: right"
                          class="calendar calendars"
                          v-if="row[i.dateStr].status == 6"
                        >
                          <span
                            style="
                              display: inline-block;
                              background-color: rgb(172, 51, 193);
                              color: #fff;
                              width: 23px;
                              text-align: center;
                              transform: scale(0.8);
                              border-radius: 2px;
                            "
                            >住</span
                          >
                        </div>
                      </div>
                      普通 房型类型样式
                      <div
                        v-if="
                          row[i.dateStr].status != 5 &&
                          row[i.dateStr].status != 6 &&
                          row[i.dateStr].status != 2
                        "
                      >
                        <div class="calendar">
                          {{ row[i.dateStr].numberName }}
                        </div>
                        <div class="calendar">
                          {{ row[i.dateStr].houseName }}
                        </div>
                        <div class="calendar">
                          ￥{{ row[i.dateStr].housePrice }}
                        </div>
                      </div>
                    </div>
                  </template>
                  点击弹出开房
                  <div class="popover" v-if="row[i.dateStr].status == 2">
                    <ul>
                      <li @click="openRoom(row[i.dateStr], i.dateStr)">开房</li>
                    </ul>
                  </div>
                  预订、入住 点击弹出信息
                  <div
                    class="popover"
                    v-if="
                      row[i.dateStr].status == 5 || row[i.dateStr].status == 6
                    "
                  >
                    <div class="roomInfo" v-if="row[i.dateStr].status == 5">
                      <div class="top">
                        <span>{{ row[i.dateStr].numberName }}</span>
                        <div class="status">已预订</div>
                      </div>
                      <div class="bottom">
                        <div class="li">
                          {{ row[i.dateStr].orderUserName }}&nbsp;{{
                            row[i.dateStr].orderUserPhone
                          }}
                        </div>
                        <div class="li">
                          入住日期 :{{ row[i.dateStr].orderStartTime }}
                        </div>
                        <div class="li">
                          离店日期 :{{ row[i.dateStr].orderEndTime }}
                        </div>
                        <div class="li">
                          订单号: {{ row[i.dateStr].orderNum }}
                        </div>
                        <div class="li">
                          订单金额:￥ {{ row[i.dateStr].orderPayAccount }}
                        </div>
                      </div>
                    </div>
                    <div class="roomInfo" v-if="row[i.dateStr].status == 6">
                      <div class="top">
                        <span>{{ row[i.dateStr].numberName }}</span>
                        <div class="status">已入住</div>
                      </div>
                      <div class="bottom">
                        <div class="li">
                          {{ row[i.dateStr].orderUserName }}&nbsp;{{
                            row[i.dateStr].orderUserPhone
                          }}
                        </div>
                        <div class="li">
                          入住日期 :{{ row[i.dateStr].orderStartTime }}
                        </div>
                        <div class="li">
                          离店日期 :{{ row[i.dateStr].orderEndTime }}
                        </div>
                        <div class="li">
                          订单号: {{ row[i.dateStr].orderNum }}
                        </div>
                        <div class="li">
                          订单金额:￥ {{ row[i.dateStr].orderPayAccount }}
                        </div>
                      </div>
                    </div>
                  </div>
                  普通样式
                  <div
                    class="popover"
                    v-if="
                      row[i.dateStr].status != 5 &&
                      row[i.dateStr].status != 6 &&
                      row[i.dateStr].status != 2
                    "
                  >
                    <ul>
                      <li @click="closeRoom(row[i.dateStr], i.dateStr)">
                        关房
                      </li>
                    </ul>
                  </div>
                </el-popover>
                <div
                  v-else
                  class="contentBody"
                  style="background-color: #f3f3f3; color: #ccc"
                >
                  <div
                    v-if="
                      row[i.dateStr].status != 5 && row[i.dateStr].status != 6
                    "
                  >
                    <div class="calendar">
                      {{ row[i.dateStr].numberName }}
                    </div>
                    <div class="calendar">{{ row[i.dateStr].houseName }}</div>
                    <div class="calendar">
                      ￥{{ row[i.dateStr].housePrice }}
                    </div>
                  </div>
                  预定或者入住样式
                  <div v-else style="background-color: #f3f3f3">
                    <div class="calendar" style="color: #ccc">
                      {{ row[i.dateStr].orderUserName }}
                    </div>
                    <div class="calendar" style="color: #ccc">
                      {{ row[i.dateStr].orderUserPhone }}
                    </div>
                    <div
                      style="text-align: right"
                      class="calendars"
                      v-if="row[i.dateStr].status == 5"
                    >
                      <span
                        style="
                          display: inline-block;
                          background-color: rgb(255, 87, 51);
                          color: #fff;
                          width: 23px;
                          text-align: center;
                          transform: scale(0.8);
                          border-radius: 2px;
                        "
                        >预</span
                      >
                    </div>
                    <div
                      style="text-align: right"
                      class="calendars"
                      v-if="row[i.dateStr].status == 6"
                    >
                      <span
                        style="
                          display: inline-block;
                          background-color: rgb(172, 51, 193);
                          color: #fff;
                          width: 23px;
                          text-align: center;
                          transform: scale(0.8);
                          border-radius: 2px;
                        "
                        >住</span
                      >
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table-column> -->

          <el-table-column
            v-for="(i, ind) in tableDateHeader"
            :key="i"
            prop="date"
            align="center"
          >
            <template #header>
              <el-popover
                placement="top-start"
                title="房间使用情况"
                :width="250"
                trigger="hover"
                effect="light"
                content="this is content, this is content, this is content"
              >
                <template #reference>
                  <span>{{ i.date }}</span>
                </template>
                <div>
                  <div v-for="item in i.freeNumbers" :key="item">
                    {{ item.room_name }}: 未使用{{ item.num }}间
                  </div>
                  <br />
                  <div v-for="item in i.useNumbers" :key="item">
                    {{ item.room_name }}: 已使用{{ item.num }}间
                  </div>
                </div>
              </el-popover>
            </template>
            <el-table-column
              prop="state"
              align="center"
              :label="i.count"
              width="120"
            >
              <template #default="{ row }">
                <div class="calendarRoom" @click="calendarRoomClick(row)">
                  <div class="name" v-if="row.houseStustaVos[ind].reserveName">
                    {{ row.houseStustaVos[ind].reserveName }}
                  </div>
                  <div class="name">{{ row.houseStustaVos[ind].price }}</div>
                  <span
                    class="status"
                    style="background: #0844f8; color: #fff; border-radius: 3px"
                    v-if="row.houseStustaVos[ind].status == 1"
                    >空闲</span
                  >
                  <span
                    class="status"
                    style="background: #000; color: #fff; border-radius: 3px"
                    v-if="row.houseStustaVos[ind].status == 2"
                    >脏房</span
                  >
                  <span
                    class="status"
                    style="background: #bc6e0e; color: #fff; border-radius: 3px"
                    v-if="row.houseStustaVos[ind].status == 3"
                    >预定</span
                  >
                  <span
                    class="status"
                    style="
                      background: rgba(119, 26, 241, 1);
                      color: #fff;
                      border-radius: 3px;
                    "
                    v-if="row.houseStustaVos[ind].status == 4"
                    >入住</span
                  >
                  <span
                    class="status"
                    style="background: #de3f3f; color: #fff; border-radius: 3px"
                    v-if="row.houseStustaVos[ind].status == 5"
                    >锁房</span
                  >
                  <span
                    class="status"
                    style="background: #6cc1d6; color: #fff; border-radius: 3px"
                    v-if="row.houseStustaVos[ind].status == 6"
                    >维修</span
                  >
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <!-- 批量控制水电 -->
      <el-dialog
        class="dialogClean"
        v-model="cleanDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="roomCloseTitle"
        align-center
        width="700"
        :before-close="cancelClean"
      >
        <div class="trees">
          <div class="tree">
            <div class="tree-left">
              <el-checkbox
                v-model="cleanRoomAllChecked"
                style="margin-left: 15px"
                @change="chooseAll"
                >全选</el-checkbox
              >
              <span style="margin-left: 165px"
                >{{ cleanRoomLiCount.length }} / {{ dataLength }}</span
              >
            </div>
            <el-tree
              :data="cleanDatas"
              show-checkbox
              node-key="id"
              ref="cleanRoomTree"
              :props="defaultProps"
              @check="checkcleanRoom"
              default-expand-all
            >
              <template #default="{ node, data }">
                <span
                  class="custom-tree-node"
                  style="
                    width: 200px;
                    display: flex;
                    justify-content: space-between;
                  "
                >
                  <span>{{ data.roomNumber }}</span>
                  <span style="color: #1e7dfa" v-if="data.roomType == 1">
                    全
                  </span>
                  <span style="color: #1e7dfa" v-if="data.roomType == 2">
                    钟
                  </span>
                </span>
              </template>
            </el-tree>
          </div>
          <div class="tree">
            <div class="tree-left">
              <p style="margin-left: 15px">
                已选 {{ cleanRoomLiCount.length }}
              </p>
            </div>
            <ul
              class="infinite-list"
              style="overflow: auto"
              infinite-scroll-immediate="false"
            >
              <li
                v-for="(i, index) in cleanRoomLiCount"
                :key="index"
                class="infinite-list-item"
              >
                <span style="margin-left: 19px">{{ i.roomNumber }}</span>
                <el-icon @click="cancelLiCheck(i)">
                  <Close />
                </el-icon>
                <!-- <i class="el-icon-close" @click="cancelCheck(i)"></i> -->
              </li>
            </ul>
          </div>
        </div>
        <div class="options">
          <el-button
            color="#296de3"
            class="queding"
            type="primary"
            @click="switchBatch"
          >
            确认
          </el-button>
          <el-button @click="cancelClean">取消</el-button>
        </div>
      </el-dialog>
      <!-- 批量开/关房 -->
      <!-- <el-dialog
        class="roomCloseDilog"
        v-model="roomCloseDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="roomCloseTitle"
        align-center
        width="700"
        :before-close="cancelRoomClose"
      >
        <div class="trees">
          <div class="tree">
            <div class="tree-left">
              <el-checkbox
                v-model="cleanRoomAllChecked"
                style="margin-left: 15px"
                @change="chooseAll"
                >全选</el-checkbox
              >
              <span style="margin-left: 165px"
                >{{ cleanRoomLiCount.length }} / {{ dataLength }}</span
              >
            </div>
            <el-tree
              :data="cleanDatas"
              show-checkbox
              node-key="id"
              ref="cleanRoomTree"
              :props="defaultProps"
              @check="checkcleanRoom"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node" style="width:200px;display:flex;justify-content:space-between">
                  <span>{{ data.roomNumber }}</span>
                 
                </span>
              </template>
            </el-tree>
          </div>
          <div class="tree">
            <div class="tree-left">
              <p style="margin-left: 15px">
                已选 {{ cleanRoomLiCount.length }}
              </p>
            </div>
            <ul
              class="infinite-list"
              style="overflow: auto"
              infinite-scroll-immediate="false"
            >
              <li
                v-for="(i, index) in cleanRoomLiCount"
                :key="index"
                class="infinite-list-item"
              >
                <span style="margin-left: 19px">{{i.houseName}} - {{ i.houseNumber }}</span>
                <el-icon @click="cancelLiCheck(i)">
                  <Close />
                </el-icon>
              </li>
            </ul>
          </div>
        </div>
        <div class="options">
          <el-button
            color="#296de3"
            class="queding"
            type="primary"
            @click="switchBatch"
          >
            确认
          </el-button>
          <el-button @click="cancelSwitchBatch">取消</el-button>
        </div>
      </el-dialog> -->
      <!-- 批量置脏/净房 -->
      <!-- <el-dialog
        class="roomCloseDilog"
        v-model="roomCloseDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="roomCloseTitle"
        align-center
        width="700"
        :before-close="cancelRoomClose"
      >
        <div class="first" v-show="firstShow">
          <div class="trees">
            <div class="tree">
              <div class="tree-left">
                <el-checkbox
                  v-model="roomCloseChecked"
                  style="margin-left: 15px"
                  @change="chooseAllRoomClose"
                  >全选</el-checkbox
                >
                <span style="margin-left: 165px"
                  >{{ roomCloseCount.length }} / {{ roomCloseDataLength }}</span
                >
              </div>
              <el-tree
                :data="roomCloseDatas"
                show-checkbox
                node-key="id"
                ref="roomCloseTree"
                :props="defaultProps"
                @check="checkRoomClose"
              ></el-tree>
            </div>
            <div class="tree">
              <div class="tree-left">
                <p style="margin-left: 15px">
                  已选 ( {{ roomCloseCount.length }} )
                </p>
              </div>
              <ul
                class="infinite-list"
                style="overflow: auto"
                infinite-scroll-immediate="false"
              >
                <li
                  v-for="(i, index) in roomCloseCount"
                  :key="index"
                  class="infinite-list-item"
                >
                  <span style="margin-left: 19px">{{ i.label }}</span>
                  <el-icon @click="cancelCheckRoomClose(i)">
                    <Close />
                  </el-icon>
                </li>
              </ul>
            </div>
          </div>
          <div class="options">
            <el-button
              color="rgba(9, 101, 98, 1)"
              class="queding"
              type="primary"
              @click="lastStep"
            >
              下一步
            </el-button>
            <el-button @click="cancelRoomClose(roomCloseTree)">取消</el-button>
          </div>
        </div>
        <div class="last" v-show="lastShow">
          <div class="hint">
            <span>房间转“停用房”或“维修房”后，将会影响入住率</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="入住率=间夜量/(总客房数-维修房数-停用房数-链接关房数)"
              placement="top"
            >
              <img src="@/assets/hint.png" alt="" />
            </el-tooltip>
          </div>
          <div class="roomUl">
            <div class="title">房间</div>
            <div class="delRoom">
              <ul>
                <li v-for="i in roomCloseCount">
                  <span>{{ i.label }}</span>
                  <div class="del" @click="closeRoomDel(i)"></div>
                </li>
              </ul>
            </div>
          </div>
          <div class="roomUl roomTime">
            <div class="title">日期</div>
            <div class="delRoom">
              <el-date-picker
                v-model="lastData.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择日期"
              />
            </div>
          </div>
          <div class="roomUl" v-if="roomCloseTitle == '批量关房'">
            <div class="title">关房类型</div>
            <div class="delRoom">
              <el-radio-group v-model="lastData.radio">
                <el-radio :label="1">停用房</el-radio>
                <el-radio :label="2">维修房</el-radio>
                <el-radio :label="3">保留房</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="roomUl textarea">
            <div class="title">备注</div>
            <div class="delRoom">
              <el-input
                v-model="lastData.textarea"
                :rows="3"
                type="textarea"
                placeholder="请输入内容 (选填)"
              />
            </div>
          </div>
          <div class="options">
            <el-button
              class="queding"
              color="rgba(9, 101, 98, 1)"
              @click="notarizeRoomClose(roomCloseTree)"
              >确认</el-button
            >
            <el-button @click="firstStep"> 上一步 </el-button>
          </div>
        </div>
      </el-dialog> -->

      <!-- 换房弹窗 -->
      <el-dialog
        class="roomChangeDialog"
        v-model="roomChangeVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        align-center
        width="1000"
      >
        <div class="titleHeader">
          <div class="title">
            <span
              >{{ roomChangeRuleForm.houseName }}
              {{ roomChangeRuleForm.houseNumber }}</span
            >
          </div>
          <div class="cancel" @click="cancelRoomChange" style="font-size: 20px">
            ×
          </div>
        </div>
        <div class="roomChangeBody">
          <div class="middles">
            <div class="changeItemss">
              <div
                class="changeNews"
                :class="roomChangeIndex == item.name ? 'changeNews_active' : ''"
                @click="changeRoom(item.name)"
                v-for="item in roomChangeItemList"
                :key="item"
              >
                {{ item.name }}
                <!-- <span>
                  ({{ roomChangeRuleForm.roomType == 1 ? "全" : "钟" }})</span
                > -->
              </div>
            </div>
          </div>
          <div class="room">
            <div class="floors">
              <div
                class="cards"
                v-for="item in roomChangeList.list"
                :key="item"
              >
                <div class="roomList" @click="roomCheck(item)">
                  <div class="roomNumber">{{ item.roomNumber }}</div>
                  <img
                    v-if="checkInd == item.id"
                    class="check"
                    src="@/assets/icons/roomCheck.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="roomChangeFooter">
          <!-- <div class="reason">
            <el-select
              v-model="value"
              class="m-2"
              style="width: 860px"
              placeholder="请选择原因"
            >
              <el-option label="房间灯光暗" value="1" />
              <el-option label="房间无电" value="2" />
            </el-select>
            <span class="reason_">换房原因 : </span>
          </div> -->
          <div class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              type="primary"
              @click="submitroomChange"
              :loading="roomChangeLoading"
              style="margin-right: 20px"
            >
              确定
            </el-button>
            <el-button @click="cancelRoomChange" style="margin: 0 20px 0 30px"
              >取消</el-button
            >
            <el-input
              clearable
              v-model.trim="roomChangeRuleForm.houseNumberNow"
              class="w-50 m-2"
              style="width: 180px"
            />
            <span class="title">新房号 : </span>

            <el-input
              clearable
              v-model.trim="roomChangeRuleForm.roomPriceNow"
              class="w-50 m-2"
              style="width: 80px"
            />
            <span class="title">新房价 : </span>
          </div>
        </div>
      </el-dialog>

      <!-- 预定弹窗 -->
      <el-dialog
        class="reserveDialog"
        v-model="reserveVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="17栋2单元2层01 今日房价：¥155 - 换房操作"
        align-center
        width="1000"
        :before-close="cancelReserve"
      >
        <div class="titleHeader">
          <div class="title">
            <span>{{ reserveRuleForm.title }}</span> <span>预定</span>
          </div>
          <div class="cancel" @click="cancelReserve" style="font-size: 20px">
            ×
          </div>
        </div>
        <div class="roomChangeBody">
          <div class="titles">
            <img src="@/assets/icons/info.png" alt="" />
            <span>订单信息</span>
          </div>
          <el-form
            ref="reserveRef"
            :model="reserveRuleForm"
            :rules="reserveRules"
            label-width="100px"
            class="reserveRuleForm"
            :size="formSize"
            label-position="left"
            status-icon
          >
            <el-form-item label="类型 :" prop="type">
              <el-select
                v-model="reserveRuleForm.type"
                class="m-2"
                placeholder="请选择类型"
                style="width: 150px"
                :disabled="true"
              >
                <el-option label="全日房" :value="1" />
                <el-option label="钟点房" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="预订人 :" prop="name">
              <el-input
                v-model.trim="reserveRuleForm.name"
                placeholder="请输入预订人"
                clearable
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item label="手机号码 :" prop="phone">
              <el-input
                v-model.trim="reserveRuleForm.phone"
                placeholder="请输入手机号码"
                clearable
                style="width: 150px"
              />
            </el-form-item>
            <!-- <el-form-item label="到店时间 :" prop="arrivalTime">
              <div class="block">
                <el-date-picker
                  v-model="reserveRuleForm.arrivalTime"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :prefix-icon="Calendar"
                  placeholder="选择到店时间"
                  style="width: 160px"
                />
              </div>
            </el-form-item> -->
            <!-- <el-form-item label="客类 :" prop="status">
              <el-select
                v-model="reserveRuleForm.status"
                class="m-2"
                placeholder="请选择客类"
                style="width: 150px"
              >
                <el-option label="教师" :value="1" />
                <el-option label="领导" :value="2" />
              </el-select>
            </el-form-item> -->
            <el-form-item
              v-if="reserveRuleForm.type == 1"
              label="预住日期 :"
              prop="liveTime"
            >
              <el-date-picker
                v-model="reserveRuleForm.liveTime"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                range-separator="-"
                start-placeholder="预抵时间"
                end-placeholder="预离时间"
                :size="size"
                style="width: 350px"
                @change="liveTimeClick"
                :clearable="false"
                :disabled-date="defaultTimeLiveTime"
              />
            </el-form-item>
            <el-form-item
              v-if="reserveRuleForm.type == 2"
              label="钟点时长 :"
              prop="roomLiveTime"
            >
              <el-select
                v-model="reserveRuleForm.roomLiveTime"
                class="m-2"
                placeholder="请选择类型"
                style="width: 150px"
                :disabled="true"
              >
                <el-option label="1小时" value="1" />
                <el-option label="2小时" value="2" />
                <el-option label="3小时" value="3" />
                <el-option label="4小时" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="reserveRuleForm.type == 2"
              label="预抵日期 :"
              prop="forecastTime"
            >
              <div class="block">
                <el-date-picker
                  v-model="reserveRuleForm.forecastTime"
                  type="datetime"
                  placeholder="选择预抵日期"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 220px"
                  @change="liveTimeClick"
                />
              </div>
            </el-form-item>
            <el-form-item
              v-if="reserveRuleForm.type == 2"
              label="预离日期 :"
              prop="preionizationTime"
            >
              <div class="block">
                <el-date-picker
                  v-model="reserveRuleForm.preionizationTime"
                  type="datetime"
                  placeholder="选择预离日期"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 220px"
                  :disabled="true"
                />
              </div>
            </el-form-item>
            <el-form-item label="房价 :" prop="roomPrice">
              <div class="block">
                <el-input
                  v-model.trim="reserveRuleForm.roomPrice"
                  :disabled="true"
                  placeholder="请输入房价"
                  clearable
                  style="width: 150px"
                />
              </div>
            </el-form-item>
            <el-form-item label="预定超时 :" prop="overtime">
              <div class="block">
                <el-date-picker
                  v-model="reserveRuleForm.overtime"
                  type="datetime"
                  placeholder="选择预定超时时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 220px"
                  :disabled-date="defaultTimeOvertime"
                />
              </div>
            </el-form-item>
          </el-form>
          <div class="titles">
            <img src="@/assets/icons/calendar.png" alt="" />
            <span>未来7天占用状态</span>
          </div>
          <div class="el-table">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td v-for="i in reserveData.list" :key="i">{{ i.date }}</td>
              </tr>
              <tr>
                <td v-for="i in reserveData.list" :key="i">{{ i.status }}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="roomChangeFooter">
          <div class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              type="primary"
              @click="reserveSubmitAdd(reserveRef)"
              style="margin-right: 20px"
            >
              预定
            </el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 入住弹窗 -->
      <el-dialog
        class="checkInDialog"
        v-model="checkInVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="17栋2单元2层01 今日房价：¥155 - 换房操作"
        align-center
        width="900"
        :before-close="cancelCheckIn"
      >
        <div class="titleHeader">
          <div class="title">
            <span>{{ checkInRuleForm.title }}</span>
          </div>
          <div class="cancel" @click="cancelCheckIn" style="font-size: 20px">
            ×
          </div>
        </div>
        <div class="roomChangeBody">
          <el-form
            ref="checkInRef"
            :model="checkInRuleForm"
            :rules="checkInRules"
            class="reserveRuleForm"
            :size="formSize"
            label-position="left"
            status-icon
          >
            <div class="titles">
              <img src="@/assets/icons/info.png" alt="" />
              <span>住客信息 </span>
            </div>
            <!-- <div class="operation">
              <el-button type="primary" color="rgba(41, 109, 227, 1)"
                >读身份证</el-button
              >
              <el-button type="primary" color="rgba(41, 109, 227, 1)"
                >新增客人</el-button
              >
              <el-button type="primary" color="rgba(41, 109, 227, 1)"
                >换房</el-button
              >
            </div>
            <div class="tags">
              <div
                class="changeItem"
                :class="changeIndex == 1 ? 'changeItem_active' : ''"
                @click="changeItem(1)"
              >
                张三
              </div>
              <div
                class="changeItem"
                :class="changeIndex == 2 ? 'changeItem_active' : ''"
                @click="changeItem(2)"
              >
                李四
              </div>
            </div> -->
            <div class="residentInfo">
              <el-form-item label="预订人 :" prop="name">
                <el-input
                  v-model.trim="checkInRuleForm.name"
                  placeholder="请输入预订人"
                  clearable
                  style="width: 150px"
                  :disabled="true"
                />
              </el-form-item>
              <!-- <el-form-item label="客类 :" prop="status">
                <el-select
                  v-model="checkInRuleForm.status"
                  class="m-2"
                  placeholder="请选择客类"
                  style="width: 150px"
                >
                  <el-option label="教师" :value="1" />
                  <el-option label="领导" :value="2" />
                </el-select>
              </el-form-item> -->
              <el-form-item label="手机号码 :" prop="phone">
                <el-input
                  v-model.trim="checkInRuleForm.phone"
                  placeholder="请输入手机号码"
                  clearable
                  style="width: 220px"
                  :disabled="true"
                />
              </el-form-item>
            </div>
            <div class="residentInfo">
              <el-form-item label="入住人 :" prop="checkName">
                <el-input
                  v-model.trim="checkInRuleForm.checkName"
                  placeholder="请输入姓名"
                  clearable
                  style="width: 150px"
                />
              </el-form-item>
              <el-form-item label="身份证号 :" prop="checkIdcard">
                <el-input
                  v-model.trim="checkInRuleForm.checkIdcard"
                  placeholder="请输入身份证号"
                  clearable
                  style="width: 220px"
                />
              </el-form-item>
            </div>
            <div class="titles">
              <img src="@/assets/icons/info.png" alt="" />
              <span>入住信息 </span>
            </div>
            <div class="checkIn">
              <el-form-item label="类型 :" prop="type">
                <el-select
                  v-model="checkInRuleForm.type"
                  class="m-2"
                  placeholder="请选择类型"
                  style="width: 150px"
                  :disabled="true"
                >
                  <el-option label="全日房" :value="1" />
                  <el-option label="钟点房" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="预抵日期 :" prop="forecastTime">
                <div class="block">
                  <el-date-picker
                    v-model="checkInRuleForm.forecastTime"
                    type="datetime"
                    placeholder="选择预抵日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 200px"
                    :disabled="true"
                  />
                </div>
              </el-form-item>
              <el-form-item label="预离日期 :" prop="preionizationTime">
                <div class="block">
                  <el-date-picker
                    v-model="checkInRuleForm.preionizationTime"
                    type="datetime"
                    placeholder="选择预抵日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 200px"
                    :disabled="true"
                  />
                </div>
              </el-form-item>

              <el-form-item label="房价 :" prop="roomPrice">
                <div class="block">
                  <el-input
                    v-model.trim="checkInRuleForm.roomPrice"
                    clearable
                    placeholder="请输入房价"
                    style="width: 150px"
                    :disabled="true"
                  />
                </div>
              </el-form-item>
              <el-form-item label="预住天数 :" prop="dayNum">
                <div class="block">
                  <el-input
                    v-model.trim="checkInRuleForm.dayNum"
                    placeholder="请输入预住天数"
                    clearable
                    style="width: 150px"
                    :disabled="true"
                  />
                </div>
              </el-form-item>
            </div>
            <div class="titles">
              <img src="@/assets/icons/electronicKey.png" alt="" />
              <span>电子钥匙 </span>
            </div>
            <div class="tags" v-if="lockShow">
              <div
                class="changeItem"
                :class="checkInIndex == 5 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(5)"
              >
                钥匙
              </div>
              <div
                class="changeItem"
                :class="checkInIndex == 1 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(1)"
              >
                密码
              </div>
              <div
                class="changeItem"
                :class="checkInIndex == 2 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(2)"
              >
                房卡
              </div>
              <div
                class="changeItem"
                :class="checkInIndex == 3 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(3)"
              >
                指纹
              </div>
              <div
                class="changeItem"
                :class="checkInIndex == 4 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(4)"
              >
                身份证卡
              </div>
            </div>
            <div class="tags" v-else>
              <div
                class="changeItem"
                :class="checkInIndex == 5 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(5)"
              >
                钥匙
              </div>
            </div>
            <div class="changeKeys" v-if="lockShow">
              <div class="icCard" v-if="checkInIndex != 1">
                <el-form-item
                  v-if="checkInIndex == 3"
                  label="指纹 :"
                  prop="fingerprintNum"
                >
                  <el-input
                    v-model="checkInRuleForm.fingerprintNum"
                    placeholder="请录入指纹"
                    style="width: 400px"
                    type="textarea"
                    rows="4"
                  />
                  <span
                    style="
                      color: rgba(0, 97, 255, 1);
                      margin-left: 10px;
                      cursor: pointer;
                    "
                    @click="readFingerprint"
                    >录入</span
                  >
                </el-form-item>
                <el-form-item
                  v-if="checkInIndex == 2 || checkInIndex == 4"
                  label="卡号 :"
                  prop="icCard"
                >
                  <el-input
                    v-model.trim="checkInRuleForm.icCard"
                    placeholder="请输入卡号"
                    style="width: 400px"
                    type="textarea"
                    rows="4"
                  >
                  </el-input>
                  <span
                    style="
                      color: rgba(0, 97, 255, 1);
                      margin-left: 10px;
                      cursor: pointer;
                    "
                    @click="readIcCard"
                    >读卡</span
                  >
                </el-form-item>
                <!-- <el-form-item label="生效日期 :" prop="effectiveTime">
                  <div class="block">
                    <el-date-picker
                      v-model="checkInRuleForm.effectiveTime"
                      type="datetime"
                      placeholder="选择生效日期"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      style="width: 200px"
                      @change="effectiveTimeChange"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="失效日期 :" prop="failureTime">
                  <div class="block">
                    <el-date-picker
                      v-model="checkInRuleForm.failureTime"
                      type="datetime"
                      placeholder="选择失效日期"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      style="width: 200px"
                      @change="failureTimeChange"
                    />
                  </div>
                </el-form-item>
                <el-radio-group
                  v-model="radioFingerprintDate"
                  @change="radioFingerprintChange"
                >
                  <el-radio label="一个星期">一个星期</el-radio>
                  <el-radio label="一个月">一个月</el-radio>
                  <el-radio label="半年">半年</el-radio>
                  <el-radio label="一年">一年</el-radio>
                  <el-radio label="长期">长期</el-radio>
                </el-radio-group> -->
              </div>
              <!-- <div class="keys" v-if="checkInIndex == 1">
                <el-tabs
                  v-model="checkInPassIndex"
                  class="demo-tabs"
                  @tab-change="checkInPassClick"
                >
                  <el-tab-pane label="时效密码" :name="1"> </el-tab-pane>
                  <el-tab-pane label="无网络密码" :name="2"> </el-tab-pane>
                  <el-tab-pane label="临时密码" :name="3"> </el-tab-pane>
                </el-tabs>
                <el-form-item label="密码 :" prop="pass">
                  <el-input
                    v-model="checkInRuleForm.pass"
                    placeholder="请输入6-8位数密码或者点击随机生成"
                    style="width: 400px"
                  >
                    <template #append>
                      <div @click="randomCipher">随机生成</div>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="生效日期 :" prop="effectiveTime">
                  <div class="block">
                    <el-date-picker
                      v-model="checkInRuleForm.effectiveTime"
                      type="datetime"
                      placeholder="选择生效日期"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      style="width: 200px"
                      @change="endT"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="失效日期 :" prop="failureTime">
                  <div class="block">
                    <el-date-picker
                      v-model="checkInRuleForm.failureTime"
                      type="datetime"
                      placeholder="选择失效日期"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      style="width: 200px"
                      @change="endT"
                    />
                  </div>
                </el-form-item>
              </div> -->
            </div>
          </el-form>
        </div>
        <div class="roomChangeFooter">
          <div class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              type="primary"
              @click="checkInConfirm(checkInRef)"
              style="margin-right: 20px"
            >
              入住
            </el-button>
            <span style="color: #e8a849" v-if="checkAdvanceTime"
              >( 提示：当前未到入住时间，是否前提办理入住？)&nbsp;&nbsp;</span
            >
          </div>
        </div>
      </el-dialog>

      <!-- 确定入住 弹出支付页面弹窗 -->
      <el-dialog
        class="payPriceVialog"
        v-model="payPriceVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="支付"
        align-center
        width="650"
        :before-close="cancelPayPrice"
      >
        <div class="roomChangeBody">
          <el-form
            ref="payPriceRef"
            :model="payPriceRuleForm"
            :rules="payPriceRules"
            class="payPriceRuleForm"
            :size="formSize"
            label-width="100px"
            label-position="left"
            status-icon
          >
            <div class="titles">
              <img src="@/assets/icons/info.png" alt="" />
              <span>订单信息 </span>
            </div>
            <el-form-item label="入住订单 :" prop="order">
              <div class="block">
                <el-input
                  v-model.trim="payPriceRuleForm.order"
                  clearable
                  placeholder="请输入入住订单"
                  style="width: 300px"
                />
              </div>
            </el-form-item>
            <el-form-item label="金额 :" prop="price">
              <div class="block">
                <el-input
                  v-model.trim="payPriceRuleForm.price"
                  clearable
                  placeholder="请输入金额"
                  style="width: 300px"
                />
              </div>
            </el-form-item>
            <el-form-item label="付款方式 :" prop="type">
              <div
                v-if="
                  checkInRuleForm.orderStatus == 2 ||
                  checkInRuleForm.orderStatus == 3
                "
              >
                <span style="color: #09ae22">当前订单已支付，可直接入住</span>
              </div>
              <div v-else style="color: #09ae22">
                <el-select
                  v-model="payPriceRuleForm.type"
                  class="m-2"
                  placeholder="请选择付款方式"
                  style="width: 300px; margin-right: 15px"
                >
                  <el-option label="微信" :value="1" />
                  <el-option label="现金" :value="2" />
                </el-select>
                <el-button
                  type="primary"
                  color="rgba(41, 109, 227, 1)"
                  @click="paymentCodeClick"
                  v-if="payPriceRuleForm.type == 1"
                  :disabled="payPriceSuccess"
                >
                  扫码支付
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="roomChangeFooter">
          <div class="options">
            <el-button
              v-if="
                checkInRuleForm.orderStatus == 2 ||
                checkInRuleForm.orderStatus == 3 ||
                payPriceRuleForm.type == 2
              "
              :loading="payPriceLoading"
              color="rgba(41, 109, 227, 1)"
              type="primary"
              @click="configPayPrice(payPriceRef)"
              style="margin-right: 20px"
            >
              确定入住
            </el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 微信扫码支付界面弹窗 -->
      <el-dialog
        class="paymentCodeVialog"
        v-model="paymentCodeVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="扫码支付"
        align-center
        width="650"
        :before-close="cancelPaymentCode"
      >
        <div class="roomChangeBody">
          <div class="unpaid">
            待支付 : <span>{{ payPriceRuleForm.price }}</span> 元
          </div>
          <div class="imgTitle">
            <img :src="qrCodeImgUrl" />
            <div class="successPay" v-if="successPay">
              <img src="@/assets/icons/success.png" alt="" />
            </div>
          </div>
        </div>
        <!-- <div class="roomChangeFooter">
          <div class="options">
            <el-button
              plain
              type="primary"
              @click="paymentCodeConfirm()"
              style="margin-right: 20px"
            >
              已支付
            </el-button>
            <el-button @click="cancelPaymentCode()" style="margin-right: 20px">
              取消支付
            </el-button>
          </div>
        </div> -->
      </el-dialog>

      <!-- 退房 -->
      <el-dialog
        class="checkOutDialog"
        v-model="checkOutVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="退房"
        align-center
        width="450"
        :before-close="cancelCheckOut"
      >
        <div class="middles">
          <div v-if="checkLockFlag == 2">
            <div style="color: #e6a23c; margin: 10px 0">
              提示：当前开锁方式为房卡时需要归还房卡！！！
            </div>
            <div class="content">是否归还了房卡？</div>
            <el-radio-group v-model="checkOutForm.lockBack">
              <el-radio :value="1" size="large">是</el-radio>
              <el-radio :value="2" size="large">否</el-radio>
            </el-radio-group>
          </div>
          <div v-else-if="checkLockFlag == 5">
            <div style="color: #e6a23c; margin: 10px 0">
              提示：当前开锁方式为钥匙时需要归还钥匙！！！
            </div>
            <div class="content">是否归还了钥匙？</div>
            <el-radio-group v-model="checkOutForm.lockBack">
              <el-radio :value="1" size="large">是</el-radio>
              <el-radio :value="2" size="large">否</el-radio>
            </el-radio-group>
          </div>
          <div v-else>
            <div class="content">确定是否退房？</div>
          </div>
          <div class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              class="queding"
              type="primary"
              @click="checkOutConfirm"
            >
              确定
            </el-button>
            <el-button @click="cancelCheckOut">取消</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 查看密码 -->
      <el-dialog
        class="passDialog"
        v-model="passVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="查看密码"
        align-center
        width="400"
        :before-close="cancelPass"
      >
        <div class="middle">
          <div class="content">
            <span class="pass">{{ passForm.pass }}</span>
            <span>（生效时间：{{ passForm.reserveLiveTime }}）</span>
            <span>（失效时间：{{ passForm.reserveLeaveTime }}）</span>
          </div>
          <div class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              class="queding"
              type="primary"
              @click="cancelPass"
            >
              确定
            </el-button>
            <el-button @click="cancelPass">取消</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 退款 -->
      <el-dialog
        class="checkOutDialog"
        v-model="refundVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="退房"
        align-center
        width="400"
        :before-close="cancelRefund"
      >
        <div class="middle">
          <div class="content">确定退款吗？</div>
          <div class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              class="queding"
              type="primary"
              @click="checkOutConfirm"
            >
              确定
            </el-button>
            <el-button @click="cancelRefund">取消</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 日志列表 -->
      <el-dialog
        class="logDialog"
        v-model="logVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="日志"
        align-center
        width="900"
        :before-close="cancelLog"
      >
        <div class="logs">
          <el-table
            :row-class-name="tableRowClassName2"
            :data="roomList.list"
            @selection-change="handleSelectionChange"
            style="width: 100%; height: 550px"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column align="center" prop="houseName" label="姓名">
            </el-table-column>
            <el-table-column align="center" prop="setDate" label="角色" />
            <el-table-column align="center" prop="price" label="解锁类型" />
            <el-table-column
              align="center"
              prop="operationName"
              label="钥匙类型"
            />
            <el-table-column
              align="center"
              prop="operationTime"
              label="消息时间"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="logPage"
            :page-size="logSize"
            layout="total, prev, pager, next, jumper, slot"
            :total="logTotal"
            @update:current-page="logHandleCurrentChange"
          />
        </div>
      </el-dialog>

      <!-- 锁房弹窗 -->
      <el-dialog
        class="lockRoomVialog"
        v-model="lockRoomVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="锁房"
        align-center
        width="700"
        :before-close="cancelLockRoom"
      >
        <div class="roomChangeBody">
          <el-form
            ref="lockRoomRef"
            :model="lockRoomRuleForm"
            :rules="lockRoomRules"
            class="payPriceRuleForm"
            :size="formSize"
            label-width="100px"
            label-position="left"
            status-icon
          >
            <!-- <el-form-item label="锁房原因 :" prop="reason">
              <div class="block">
                <el-input
                  v-model="lockRoomRuleForm.reason"
                  clearable
                  type="textarea"
                  rows="5"
                  placeholder="请填写锁房原因"
                  style="width: 450px"
                />
              </div>
            </el-form-item> -->
            <el-form-item label="到期时间 :" prop="time">
              <div class="block">
                <el-date-picker
                  v-model="lockRoomRuleForm.time"
                  type="datetime"
                  placeholder="请选择到期时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 220px"
                />
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="roomChangeFooter">
          <div class="options">
            <el-button
              plain
              type="primary"
              @click="lockRoomConfirm(lockRoomRef)"
              style="margin-right: 20px"
            >
              锁房
            </el-button>
            <el-button @click="cancelLockRoom" style="margin-right: 20px">
              取消
            </el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 维修弹窗 -->
      <el-dialog
        class="lockRoomVialog"
        v-model="maintainVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="维修"
        align-center
        width="700"
        :before-close="cancelMaintain"
      >
        <div class="roomChangeBody">
          <el-form
            ref="maintainRef"
            :model="maintainRuleForm"
            :rules="maintainRules"
            class="payPriceRuleForm"
            :size="formSize"
            label-width="100px"
            label-position="left"
            status-icon
          >
            <!-- <el-form-item label="维修原因 :" prop="reason">
              <div class="block">
                <el-input
                  v-model="maintainRuleForm.reason"
                  clearable
                  type="textarea"
                  rows="5"
                  placeholder="请填写维修原因"
                  style="width: 450px"
                />
              </div>
            </el-form-item> -->
            <el-form-item label="时间 :" prop="time">
              <div class="block">
                <!-- <el-date-picker
                  v-model="maintainRuleForm.time"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:ss:mm"
                  value-format="YYYY-MM-DD HH:ss:mm"
                /> -->
                <el-date-picker
                  v-model="maintainRuleForm.time"
                  format="YYYY-MM-DD HH:ss:mm"
                  value-format="YYYY-MM-DD HH:ss:mm"
                  type="datetime"
                  placeholder="请选择结束时间"
                />
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="roomChangeFooter">
          <div class="options">
            <el-button
              plain
              type="primary"
              @click="maintainConfirm(maintainRef)"
              style="margin-right: 20px"
              :loading="maintainLoading"
            >
              确定
            </el-button>
            <el-button @click="cancelMaintain" style="margin-right: 20px">
              取消
            </el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 指纹读取弹窗 -->
      <el-dialog
        class="fingerprint"
        v-model="addFingerprintVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="添加指纹"
        align-center
        width="550"
        :before-close="cancelAddFingerprint"
      >
        <div class="el-footer">
          <div style="height: 350px; margin: 30px auto">
            <el-steps direction="vertical" :active="stepindex">
              <el-step
                v-for="i in step.list"
                :key="i.id"
                :title="`步骤 ${i.id}`"
                :description="i.title"
              ></el-step>
            </el-steps>
          </div>
        </div>
      </el-dialog>

      <!-- 身份证读卡弹窗 -->
      <el-dialog
        class="addIdentityCard"
        v-model="addIdentityCardVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="添加身份证"
        align-center
        width="650"
        :before-close="cancelAddIdentityCard"
      >
        <!-- <div class="el-footer">
          {{ identityCardTitle }}
        </div>
        <div class="el-footer">卡号 :{{ identityCardNum }}</div> -->
        <div class="steps">
          <el-steps
            :space="200"
            :active="identityCardIndex"
            finish-status="success"
          >
            <el-step title="环境准备" />
            <el-step title="配置" />
            <el-step title="完成" />
          </el-steps>
        </div>
        <div
          class="title"
          v-if="identityCardIndex == 0 || identityCardIndex == 1"
          style="color: #fc2307"
        >
          {{ identityCardTitle }}
        </div>
        <div class="title" v-else style="color: #68c23c">
          {{ identityCardTitle }}
        </div>
        <div class="icons">
          <img
            v-if="identityCardIndex == 0 || identityCardIndex == 1"
            src="@/assets/icons/error.png"
            alt=""
          />
          <img
            v-if="identityCardIndex == 2"
            class="loading"
            src="@/assets/icons/loading.png"
            alt=""
          />
          <img
            v-if="identityCardIndex == 3"
            src="@/assets/icons/success.png"
            alt=""
          />
        </div>
        <div class="retry">可以尝试<span @click="retry">重试</span></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  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 { debounce, throttle } from 'lodash'
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
import QRCode from "qrcode";

const flagBtn = ref(); // 按钮权限
const store = useStore();
const api = ref("");
const router = useRouter();
const roomLoading = ref(false);

// 全日房可用时段
const startTime = ref();
const endTime = ref();

// 批量数据 (------------------------)
const cleanDialogVisible = ref(false);
const cleanRoomTree = ref();
const roomCloseTitle = ref();
const defaultProps = {
  label: "roomNumber",
  children: "vos",
};
const cleanRoomAllChecked = ref(false); // 是否全选房间
// 左边
const dataLength = ref(); // 选择的房间数量
const cleanDatas = ref([
  {
    id: 1,
    label: "大床房",
    children: [
      {
        id: 11,
        label: "11",
      },
      {
        id: 12,
        label: "12",
      },
      {
        id: 13,
        label: "13",
      },
      {
        id: 14,
        label: "14",
      },
    ],
  },
]); // 树形数据
// 右边
const cleanRoomLiCount = ref([]); // 右边li展示的数据

// 批量开关房数据 (------------------------)
const roomCloseDialogVisible = ref(false);
const roomCloseTree = ref();
const searchInput = reactive({
  keyWord: "",
  houseType: "",
  buildingId: "",
  houseId: "",
  status: "",
}); // 搜索按钮数据
const roomTypeData = ref(); // 房型数据
const buildData = ref(); // 楼栋数据

const roomList = reactive({
  list: [],
}); // 所有房间列表
const roomInfoData = ref(); // 单个房间的详情数据
const faceplateInfo = reactive({
  name: "", //
  reserveLiveTime: "", // 预入住时间
  reserveLeaveTime: "", // 预离住时间
  liveTime: "", // 入住时间
  leaveTime: "", // 离店时间
  roomPrice: "", // 价格
  checkTime: "", // 已入住时间
  electricQuantity: "", // 电量
  startTime: "", // 锁房开始时间
  endTime: "", // 锁房结束时间
});

const roomTypeColor = ref([
  "rgba(196, 193, 190, 1)",
  "rgba(8, 68, 248, 1)", // 空闲
  "rgba(119, 26, 241, 1)",
  "rgba(188, 110, 14, 1)",
  "rgba(0, 0, 0, 1)", // 脏房
  "rgba(222, 63, 63, 1)",
  "rgba(108, 193, 214, 1)",
  "rgba(248, 159, 35, 1)",
]);

// 换房弹窗(----------------------------------------------------)
const roomChangeVisible = ref(false);
const roomChangeLoading = ref(false);
const roomChangeIndex = ref();
const roomChangeRuleForm = reactive({
  houseName: "", // 原本的房型
  houseNumber: "", // 原本的房号
  roomType: "", // 原本的房间类型
  orderNumber: "", // 订单号
  liveTime: "", // 预抵日期 （全日房）
  roomLiveTime: "", // 钟点时长（钟点房）
  forecastTime: "", // 预抵日期（钟点房）
  preionizationTime: "", //预离日期（钟点房）
  roomPrice: "", // 房价
  houseNumberId: "", // 原来的房间id

  houseNameNow: "", // 勾选的房型
  houseNumberNow: "", // 勾选的房号
  roomTypeNow: "", // 勾选的房间类型
  roomPriceNow: "", // 勾选的房间价格
  houseNumberIdNow: "", // 勾选的房间id
});
const checkInd = ref();
const roomChangeItemList = ref(); // 左边的房间类型
const roomChangeList = reactive({ list: [] });

// 预定（--------------------------------------------------------）
const reserveVisible = ref(false);
const reserveRef = ref();
const reserveRuleForm = reactive({
  title: "",
  type: "", //
  name: "", //
  phone: "", //
  arrivalTime: "", // 到店时间
  status: "", // 客类
  liveTime: "", // 预抵日期 （全日房）
  forecastTime: "", // 预抵日期（钟点房）
  roomLiveTime: "", // 钟点时长（钟点房）
  preionizationTime: "", //预离日期（钟点房）
  roomPrice: "", // 房价
  overtime: "", // 超时时间
  id: "",
  houseNumberId: "",
  houseId: "",
});
let nowTime = dayjs().format("YYYY-MM-DD");
var reserveName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入姓名"));
  }

  var reg =
    /^[\u3400-\u4db5\u4e00-\u9fa5\u9fa6-\u9fbb\u{f900}-\u{faff}]{2,6}$/u;
  if (!reg.test(value)) {
    callback(new Error("必须为2-6个汉字！"));
  } else {
    callback();
  }
};
// 预定时限制开始时间不能小于当前日期
const defaultTimeLiveTime = (data) => {
  // console.log(dayjs(data).format("YYYY-MM-DD"));
  let nowTime = dayjs().format("YYYY-MM-DD");
  let startTime = dayjs(data).format("YYYY-MM-DD");
  if (startTime < nowTime) {
    return true;
  } else {
    return false;
  }
};
// 预定超时时间限制不能小于当前日期
const defaultTimeOvertime = (data) => {
  // console.log(dayjs(data).format("YYYY-MM-DD HH:mm:ss"));

  // console.log(dayjs(data).format("YYYY-MM-DD"));
  let nowTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  let startTime = dayjs(data).format("YYYY-MM-DD HH:mm:ss");
  if (startTime < nowTime) {
    return true;
  } else {
    return false;
  }
};
const reserveData = reactive({ list: [] });
// 表单验证
const reserveRules = reactive({
  type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    { validator: reserveName, trigger: "blur" },
  ],
  phone: [
    {
      required: true,
      message: "号码不能为空",
      trigger: "blur",
    },
  ],
  arrivalTime: [
    {
      required: true,
      message: "到店时间不能为空",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "客类不能为空",
      trigger: "blur",
    },
  ],
  liveTime: [
    {
      required: true,
      message: "预抵日期不能为空",
      trigger: "blur",
    },
  ],
  forecastTime: [
    {
      required: true,
      message: "预抵日期不能为空",
      trigger: "blur",
    },
  ],
  roomLiveTime: [
    {
      required: true,
      message: "钟点时长不能为空",
      trigger: "blur",
    },
  ],
  preionizationTime: [
    {
      required: true,
      message: "预离日期不能为空",
      trigger: "blur",
    },
  ],
  roomPrice: [
    {
      required: true,
      message: "房价不能为空",
      trigger: "blur",
    },
  ],
  overtime: [
    {
      required: true,
      message: "超时时间不能为空",
      trigger: "blur",
    },
  ],
});

// 入住 (----------------------------------------------------------)
const checkInVisible = ref(false);
const checkAdvanceTime = ref(false); // 判断当前房间的入住时间和现在时间作对比，提前入住要提示
const changeIndex = ref(1);
const checkInIndex = ref(3);
const checkInRef = ref();
const lockShow = ref(false);

const checkInRuleForm = reactive({
  title: "",
  type: "",
  name: "",
  phone: "",
  orderNumber: "",
  checkName: "", // 入住人
  checkIdcard: "", // 身份证号
  houseId: "",
  orderStatus: "",
  houseNumberId: "",
  orderNumber: "", // 订单号
  forecastTime: "", // 预抵日期
  preionizationTime: "", // 预离日期
  roomPrice: "", // 房价
  dayNum: "", // 预住天数
  pass: "", // 密码
  icCard: "", // ic/身份证号
  fingerprintNum: "", // 指纹
  effectiveTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 生效日期
  failureTime: "", // 失效日期
  id: "",
});
var checkInName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入姓名"));
  }

  var reg =
    /^[\u3400-\u4db5\u4e00-\u9fa5\u9fa6-\u9fbb\u{f900}-\u{faff}]{2,6}$/u;
  if (!reg.test(value)) {
    callback(new Error("必须为2-6个汉字！"));
  } else {
    callback();
  }
};
var checkIdcard = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入身份证号"));
  }
  if (value.length == 18) {
    callback();
  } else {
    callback(new Error("请正确输入18位身份证号"));
  }
};
// 表单验证
const checkInRules = reactive({
  type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
  name: [
    { required: true, message: "预订人不能为空", trigger: "blur" },
    { validator: checkInName, trigger: "blur" },
  ],
  phone: [
    {
      required: true,
      message: "号码不能为空",
      trigger: "blur",
    },
  ],
  checkName: [
    { required: true, message: "入住人不能为空", trigger: "blur" },
    { validator: checkInName, trigger: "blur" },
  ],
  checkIdcard: [
    {
      required: true,
      message: "身份证号不能为空",
      trigger: "blur",
    },
    { validator: checkIdcard, trigger: "blur" },
  ],
  arrivalTime: [
    {
      required: true,
      message: "到店时间不能为空",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "客类不能为空",
      trigger: "blur",
    },
  ],
  forecastTime: [
    {
      required: true,
      message: "预抵日期不能为空",
      trigger: "blur",
    },
  ],
  preionizationTime: [
    {
      required: true,
      message: "预离日期不能为空",
      trigger: "blur",
    },
  ],
  roomPrice: [
    {
      required: true,
      message: "房价不能为空",
      trigger: "blur",
    },
  ],
  dayNum: [
    {
      required: true,
      message: "预住天数不能为空",
      trigger: "blur",
    },
  ],
  pass: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "change",
    },
  ],
  fingerprintNum: [
    {
      required: true,
      message: "指纹不能为空",
      trigger: "blur",
    },
  ],
  icCard: [
    {
      required: true,
      message: "ic/身份证号不能为空",
      trigger: "blur",
    },
  ],
  effectiveTime: [
    {
      required: true,
      message: "生效时间不能为空",
      trigger: "blur",
    },
  ],
  failureTime: [
    {
      required: true,
      message: "失效时间不能为空",
      trigger: "blur",
    },
  ],
});
// 添加指纹弹窗
const addFingerprintVisible = ref(false);
const stepindex = ref(0); // 录取指纹步骤
const step = reactive({
  list: [
    { id: 1, title: "" },
    { id: 2, title: "" },
    { id: 3, title: "" },
    { id: 4, title: "" },
  ],
}); // 指纹步骤数据
const ws = ref("");
const radioFingerprintDate = ref();
// ic/身份证卡
const addIdentityCardVisible = ref(false);
const identityCardIndex = ref(0);
const identityCardTitle = ref();
const radioIcDate = ref();
// 密码
const checkInPassIndex = ref(1);

// 弹出支付页面(-----------------------------------------)
const payPriceVisible = ref(false);
const payPriceRef = ref();
const payPriceSuccess = ref(false); // 判断订单是否支付成功
const payPriceLoading = ref(false); // 确定入住加载按钮
const payPriceRuleForm = reactive({
  order: "",
  price: "",
  type: "",
  id: "",
});
var priceRules = (rule, value, callback) => {
  let reg = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("金额必须大于等于0且不能超过两位小数"));
  }
};
// 表单验证
const payPriceRules = reactive({
  order: [{ required: true, message: "入住订单不能为空", trigger: "blur" }],
  price: [
    {
      required: true,
      message: "金额不能为空",
      trigger: "blur",
    },
    { validator: priceRules, trigger: "blur" },
  ],
  type: [
    {
      required: true,
      message: "付款方式不能为空",
      trigger: "blur",
    },
  ],
  paymentCode: [
    {
      required: true,
      message: "付款码不能为空",
      trigger: "blur",
    },
  ],
});

// 微信扫码支付界面 （-------------------------------------------）
const paymentCodeVisible = ref(false);
const qrCodeImgUrl = ref(); // 微信二维码链接
const timer = ref(); // 定时器获取订单状态
const successPay = ref(false); // 判断是否支付成功

// 退房弹窗
const checkOutVisible = ref(false);
const checkLockFlag = ref(); // 判断需要归还的是房卡还是钥匙
const checkOutForm = reactive({
  orderNumber: "",
  houseNumberId: "",
  lockBack: 1,
});

// 查看密码弹窗
const passVisible = ref(false);
const passForm = reactive({
  pass: "",
  reserveLiveTime: "",
  reserveLeaveTime: "",
});

// 退款弹窗
const refundVisible = ref(false);

// 日志
const logVisible = ref(false);
const logPage = ref(1); // 当前页
const logSize = ref(7);
const logTotal = ref(20); // 当前总数

// 锁房弹窗
const lockRoomVisible = ref(false);
const lockRoomRef = ref();
const lockRoomRuleForm = reactive({
  reason: "",
  time: "",
  houseNumberId: "",
});
// 表单验证
const lockRoomRules = reactive({
  reason: [{ required: true, message: "锁房原因不能为空", trigger: "blur" }],
  time: [
    {
      required: true,
      message: "到期时间不能为空",
      trigger: "blur",
    },
  ],
});

// 维修弹窗
const maintainVisible = ref(false);
const maintainRef = ref();
const maintainLoading = ref(false);
const maintainRuleForm = reactive({
  reason: "",
  // time: [dayjs().format('YYYY-MM-DD HH:mm:ss'),""],
  time: "",
  id: "",
});
// 表单验证
const maintainRules = reactive({
  reason: [{ required: true, message: "维修原因不能为空", trigger: "blur" }],
  time: [
    {
      required: true,
      message: "时间不能为空",
      trigger: "blur",
    },
  ],
});

// 点击房间查看面板操作 (点击房间---------------------------------------------)
const itemClick = async (val) => {
  console.log(val, "row");
  faceplateInfo.reserveLiveTime = val.reserveLiveTime;
  faceplateInfo.reserveLeaveTime = val.reserveLeaveTime;
  let data = {
    houseNumberId: val.houseNumberId,
    // dateTime: val.reserveLiveTime,
    houseNumberStateId: val.houseNumberStateId,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-number-state/particular",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "点击房间查看详情");
  if (res.data.code == 200) {
    val.electricQuantity = res.data.data.electricQuantity; // 电量
    roomInfoData.value = res.data.data;
    faceplateInfo.name = res.data.data.name;

    faceplateInfo.liveTime = dayjs(res.data.data.reserveLiveTime).format(
      "YYYY-MM-DD HH:mm:ss",
    );
    faceplateInfo.leaveTime = dayjs(res.data.data.reserveLeaveTime).format(
      "YYYY-MM-DD HH:mm:ss",
    );
    faceplateInfo.roomPrice = res.data.data.payPrice;
    faceplateInfo.checkTime = res.data.data.checkTime;
    faceplateInfo.electricQuantity = res.data.data.electricQuantity;
    faceplateInfo.startTime = res.data.data.stateTime;
    faceplateInfo.endTime = res.data.data.endTime;
    roomList.list.forEach((item) => {
      if (item.vos) {
        item.vos.forEach((i) => {
          i.visible = false;
        });
      }
    });
    val.visible = true;
  }
};
// 关闭房间面板
const closeItem = (val) => {
  val.visible = false;
};

// 批量置净脏房 (--------------------------------------)
const roomDirtyClose = async (flag) => {
  roomLoading.value = true; // 加载页面
  cleanRoomLiCount.value = [];
  cleanDialogVisible.value = true;
  cleanRoomAllChecked.value = false;
  // 批量开房
  if (flag == 1) {
    roomCloseTitle.value = "批量置脏";
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/freeDropDownShow",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
    });
    console.log(res, "批量置脏");
    if (res.data.code == 200) {
      dataLength.value = 0;
      let arr = [];
      res.data.data.forEach((i) => {
        i.roomNumber = i.name;
        if (i.vos != null) {
          arr.push(i);
          dataLength.value += i.vos.length;
        }
      });
      cleanDatas.value = arr;
      console.log(cleanDatas.value, dataLength.value);
      roomLoading.value = false; // 加载页面
    } else {
      roomLoading.value = false; // 加载页面
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  // 批量关房
  else if (flag == 2) {
    roomCloseTitle.value = "批量置净";
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/dirtyDropDownShow",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
    });
    console.log(res, "批量置净");
    if (res.data.code == 200) {
      dataLength.value = 0;
      let arr = [];
      res.data.data.forEach((i) => {
        i.roomNumber = i.name;
        if (i.vos != null) {
          arr.push(i);
          dataLength.value += i.vos.length;
        }
      });
      cleanDatas.value = arr;
      console.log(cleanDatas.value, dataLength.value);
      roomLoading.value = false; // 加载页面
    } else {
      roomLoading.value = false; // 加载页面

      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
// 批量开/关房
const roomClose = async (flag) => {
  roomLoading.value = true; // 加载页面
  cleanRoomLiCount.value = [];
  cleanDialogVisible.value = true;
  cleanRoomAllChecked.value = false;
  // 批量开房
  if (flag == 1) {
    roomCloseTitle.value = "批量开房";
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/lockDropDownShow",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
    });
    console.log(res, "批量开房");
    if (res.data.code == 200) {
      dataLength.value = 0;
      let arr = [];
      res.data.data.forEach((i) => {
        i.roomNumber = i.name;
        if (i.vos != null) {
          arr.push(i);
          dataLength.value += i.vos.length;
        }
      });
      cleanDatas.value = arr;
      console.log(cleanDatas.value, dataLength.value);
      roomLoading.value = false; // 加载页面
    } else {
      roomLoading.value = false; // 加载页面
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  // 批量关房
  else if (flag == 2) {
    roomCloseTitle.value = "批量关房";
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/freeDropDownShow",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
    });
    console.log(res, "批量关房");
    if (res.data.code == 200) {
      dataLength.value = 0;
      let arr = [];
      res.data.data.forEach((i) => {
        i.roomNumber = i.name;
        if (i.vos != null) {
          arr.push(i);
          dataLength.value += i.vos.length;
        }
      });
      cleanDatas.value = arr;
      console.log(cleanDatas.value, dataLength.value);
      roomLoading.value = false; // 加载页面
    } else {
      roomLoading.value = false; // 加载页面
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
// 批量控制水电
const clean = async (flag) => {
  roomLoading.value = true; // 加载页面
  cleanRoomLiCount.value = [];
  cleanDialogVisible.value = true;
  cleanRoomAllChecked.value = false;
  // 批量开房
  if (flag == 1) {
    roomCloseTitle.value = "批量开电";
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/openDropDownShow",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
    });
    console.log(res, "批量开电");
    if (res.data.code == 200) {
      dataLength.value = 0;
      let arr = [];
      res.data.data.forEach((i) => {
        i.roomNumber = i.name;
        if (i.vos != null) {
          arr.push(i);
          dataLength.value += i.vos.length;
        }
      });
      cleanDatas.value = arr;
      console.log(cleanDatas.value, dataLength.value);
      roomLoading.value = false; // 加载页面
    } else {
      roomLoading.value = false; // 加载页面
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  // 批量关房
  else if (flag == 2) {
    roomCloseTitle.value = "批量关电";
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/shutDropDownShow",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
    });
    console.log(res, "批量关电");
    if (res.data.code == 200) {
      dataLength.value = 0;
      let arr = [];
      res.data.data.forEach((i) => {
        i.roomNumber = i.name;
        if (i.vos != null) {
          arr.push(i);
          dataLength.value += i.vos.length;
        }
      });
      cleanDatas.value = arr;
      console.log(cleanDatas.value, dataLength.value);
      roomLoading.value = false; // 加载页面
    } else {
      roomLoading.value = false; // 加载页面
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 勾选房间
const checkcleanRoom = (data, nodes) => {
  console.log(data, nodes);
  cleanRoomLiCount.value = [];
  // 选中勾选的房间赋值给count
  nodes.checkedNodes.forEach((item, index) => {
    if (!item.vos) {
      cleanRoomLiCount.value.push(item);
    }
  });
  // 判断勾选的房间数量和总数量是否相等
  if (dataLength.value == cleanRoomLiCount.value.length) {
    cleanRoomAllChecked.value = true;
  } else {
    cleanRoomAllChecked.value = false;
  }
  console.log(cleanRoomLiCount.value);
};
// 全选房间
const chooseAll = () => {
  cleanRoomLiCount.value = [];
  if (cleanRoomAllChecked.value) {
    // console.log(data.value);
    let children = [];
    cleanDatas.value.forEach((item) => {
      item.vos.forEach((i) => {
        cleanRoomLiCount.value.push(i);
        children.push(i);
      });
    });
    console.log(children);

    cleanRoomTree.value.setCheckedNodes(children);
  } else {
    cleanRoomTree.value.setCheckedNodes([]);
    cleanRoomLiCount.value = [];
  }
  console.log(cleanRoomAllChecked.value, "勾选的数据");
};
// li中删除房间
const cancelLiCheck = (i) => {
  // console.log(i);
  cleanRoomLiCount.value = cleanRoomLiCount.value.filter((item) => {
    return i.id != item.id;
  });
  // 判断勾选的房间数量和总数量是否相等;
  if (dataLength.value == cleanRoomLiCount.value.length) {
    cleanRoomAllChecked.value = true;
  } else {
    cleanRoomAllChecked.value = false;
  }
  cleanRoomTree.value.setCheckedNodes(cleanRoomLiCount.value);
  console.log(cleanRoomLiCount.value);
};
// 关闭置净脏房
const cancelClean = () => {
  cleanDialogVisible.value = false;
  cleanRoomTree.value.setCheckedNodes([]);
  // cleanRoomCount.value = [];
  // cleanRoomAllChecked.value = false;
};
// 确定批量开关电
const switchBatch = async () => {
  roomLoading.value = true; // 加载页面
  if (cleanRoomLiCount.value.length) {
    if (roomCloseTitle.value == "批量开房") {
      let arr = [];
      cleanRoomLiCount.value.forEach((i) => {
        arr.push(i.id);
      });
      let data = {
        houseNumberIds: arr,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/openRooms",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "批量开房");
      if (res.data.code == 200) {
        roomLoading.value = false; // 加载页面
        cleanDialogVisible.value = false;
        cleanRoomTree.value.setCheckedNodes([]);
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        roomLoading.value = false; // 加载页面
        getList();
        cleanDialogVisible.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else if (roomCloseTitle.value == "批量关房") {
      let arr = [];
      cleanRoomLiCount.value.forEach((i) => {
        arr.push(i.id);
      });
      let data = {
        houseNumberIds: arr,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/lockRooms",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "批量关房");
      if (res.data.code == 200) {
        roomLoading.value = false; // 加载页面
        cleanDialogVisible.value = false;
        cleanRoomTree.value.setCheckedNodes([]);
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        roomLoading.value = false; // 加载页面
        getList();
        cleanDialogVisible.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else if (roomCloseTitle.value == "批量置脏") {
      let arr = [];
      cleanRoomLiCount.value.forEach((i) => {
        arr.push(i.id);
      });
      let data = {
        houseNumberIds: arr,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/dirtyRooms",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "批量关房");
      if (res.data.code == 200) {
        roomLoading.value = false; // 加载页面
        cleanDialogVisible.value = false;
        cleanRoomTree.value.setCheckedNodes([]);
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        roomLoading.value = false; // 加载页面
        getList();
        cleanDialogVisible.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else if (roomCloseTitle.value == "批量置净") {
      let arr = [];
      cleanRoomLiCount.value.forEach((i) => {
        arr.push(i.id);
      });
      let data = {
        houseNumberIds: arr,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/cleanRooms",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "批量置净");
      if (res.data.code == 200) {
        roomLoading.value = false; // 加载页面
        cleanDialogVisible.value = false;
        cleanRoomTree.value.setCheckedNodes([]);
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        roomLoading.value = false; // 加载页面
        getList();
        cleanDialogVisible.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else if (roomCloseTitle.value == "批量开电") {
      let arr = [];
      cleanRoomLiCount.value.forEach((i) => {
        arr.push(i.id);
      });
      let data = {
        houseNumberIds: arr,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/openERooms",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "批量关电");
      if (res.data.code == 200) {
        roomLoading.value = false; // 加载页面
        cleanDialogVisible.value = false;
        cleanRoomTree.value.setCheckedNodes([]);
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        roomLoading.value = false; // 加载页面
        getList();
        cleanDialogVisible.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else if (roomCloseTitle.value == "批量关电") {
      let arr = [];
      cleanRoomLiCount.value.forEach((i) => {
        arr.push(i.id);
      });
      let data = {
        houseNumberIds: arr,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/shutRooms",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "批量开电");
      if (res.data.code == 200) {
        roomLoading.value = false; // 加载页面
        cleanDialogVisible.value = false;
        cleanRoomTree.value.setCheckedNodes([]);
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        roomLoading.value = false; // 加载页面
        getList();
        cleanDialogVisible.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    }
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "至少选择一个房间",
      center: true,
    });
  }
};
// 单独控制房间的电
const bulbsClick = async (i) => {
  roomLoading.value = true; // 加载页面
  // electricType==1表示开电状态
  if (i.electricType == 1) {
    let data = {
      houseNumberIds: [i.houseNumberId],
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-number-state/shutRooms",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "单独关电");
    if (res.data.code == 200) {
      roomLoading.value = false; // 加载页面
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      roomLoading.value = false; // 加载页面
      getList();
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  // electricType==2表示关电状态
  else if (i.electricType == 2) {
    let data = {
      houseNumberIds: [i.houseNumberId],
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-number-state/openERooms",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "单独开电");
    if (res.data.code == 200) {
      roomLoading.value = false; // 加载页面
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      roomLoading.value = false; // 加载页面
      getList();
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 切换日历 单日
const switchDay = (val) => {
  switchDayIndex.value = val;
  getList();
};

// 日历数据（--------------------------------------------)
const dateTimes = ref(
  {
    dateStr: "2023-12-01",
    weekStr: "Friday",
    roomSum: 27,
  },
  {
    dateStr: "2023-12-02",
    weekStr: "Saturday",
    roomSum: 27,
  },
  {
    dateStr: "2023-12-03",
    weekStr: "Sunday",
    roomSum: 27,
  },
);
const tableDate = ref();
const tableDateHeader = ref();
const switchDayIndex = ref(1);
const timeRef = ref();
let nowdate = dayjs().format("YYYY-MM-DD HH:mm:ss");
const calendarTime = ref(nowdate); //日历绑定数据
const calendarDate = reactive({
  date1: dayjs().format("MM/DD"),
  date2: dayjs(nowdate).add(21, "day").format("MM/DD"),
});

//日历 合并表格
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // console.log(row, column, rowIndex, columnIndex);
  if (columnIndex == 0) {
    // for (let i = 0; i < roomType.value.length; i++) {
    //   for (let j = 0; j < roomType.value[i].scope.length; j++) {
    //     if (rowIndex == roomType.value[i].scope[0]) {
    //       return [roomType.value[i].scope.length, 1];
    //     } else if (rowIndex == roomType.value[i].scope[j]) {
    //       return [0, 0];
    //     }
    //   }
    // }
  }
};
// 表头弹窗日期选择框
const calendarClick = () => {
  // timeRef.value.handleOpen();
};
// 改变日期组件
const changeCalendar = (val) => {
  console.log(val, calendarDate.date1);
  calendarDate.date1 = dayjs(val).format("MM/DD");
  // console.log(calendarDate.value.date1, "日期被改变");
  calendarDate.date2 = dayjs(val).add(21, "day").format("MM/DD");
  // console.log(calendarDate.value.date2);
};
// 点击表头的今字实现定位当天日期
const nowDaySel = () => {
  let nowdate = dayjs().format("YYYY-MM-DD HH:mm:ss");
  // console.log(nowdate);
  changeCalendar(nowdate);
  calendarTime.value = nowdate;
  getList();
};
// 日历表头 房间类型筛选
const filterHandler = (value, row, column) => {
  const property = column["property"];
  return row[property] === value;
};
// 点击日历中的房间
const calendarRoomClick = (row) => {
  console.log(row);
};

// 楼栋单元数据
const schoolData = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/building/beDisplayBar",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
  });
  console.log(res, "楼栋单元下拉框");
  if (res.data.code == 200) {
    buildData.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 房型列表数据
const roomTypeList = async () => {
  let data = {
    type: searchInput.houseType,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house/displayBar",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "房型列表数据");
  if (res.data.code == 200) {
    roomTypeData.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 查看单日房间列表 （----------------------------------------------）
const getList = async () => {
  roomLoading.value = true;
  if (switchDayIndex.value == 1) {
    let data = {
      houseType: searchInput.houseType,
      keyWord: searchInput.keyWord,
      buildingId: searchInput.buildingId,
      houseId: searchInput.houseId,
      status: searchInput.status,
    };

    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/dayList",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: data,
    });
    console.log(res, "房间列表");
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        if (item.vos) {
          item.roomlength = item.vos.length;
          item.vos.forEach((i) => {
            i.visible = false;
          });
        } else {
          item.roomlength = 0;
        }
      });
      roomList.list = res.data.data;

      dateTimes.value = res.data.data.dateTimes;
      roomLoading.value = false;
    } else {
      roomLoading.value = false;
      if (res.data.code == 500) {
        console.log(res.data);
        if (res.data.message == "无效token,请重新登入") {
          router.push({ path: "/login" });
        }
      }
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (switchDayIndex.value == 2) {
    calendarTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
    let data = {
      keyWord: searchInput.keyWord,
      houseType: searchInput.houseType,
      dateTime: calendarTime.value,
      buildingId: searchInput.buildingId,
      houseId: searchInput.houseId,
      page: 1,
      size: 100,
    };

    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/calendarList",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: data,
    });
    console.log(res, "日历房间列表");
    if (res.data.code == 200) {
      // let arr=[]
      // res.data.data.dateTime.forEach(item=>{
      //   item.freeNumbers.forEach(i=>{
      //     if(item.userNumbers){
      //       item.userNumbers.forEach(j=>{
      //         if(i.room_name==j.room_name){
      //           i.useNum=j.num
      //         }
      //       })
      //     }

      //   })
      // })
      tableDateHeader.value = res.data.data.dateTime;
      tableDate.value = res.data.data.page.records;
      roomLoading.value = false;
    } else {
      roomLoading.value = false;
      if (res.data.code == 500) {
        console.log(res.data);
        if (res.data.message == "无效token,请重新登入") {
          router.push({ path: "/login" });
        }
      }
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
// // 查看日历数据
// const calendarList = async () => {
//   let data = {
//     keyWord: searchInput.keyWord,
//     houseType: searchInput.houseType,
//     dateTime:calendarTime.value,
//     page:1,
//     size:10
//   };

//   let res = await axios({
//     method: "get",
//     url: api.value + "/house-number-state/calendarList",
//     headers: {
//       token: sessionStorage.getItem("token"),
//       user_head: sessionStorage.getItem("user_head"),
//     },
//     params: data,
//   });
//   console.log(res, "日历房间列表");
//   if (res.data.code == 200) {
//     tableDateHeader.value=res.data.data.dateTime
//   } else {
//     ElMessage({
//       type: "error",
//       showClose: true,
//       message: res.data.message,
//       center: true,
//     });
//   }
// };

// 切换全日房和钟点房
const houseTypeClick = () => {
  searchInput.houseId = "";
  roomTypeList().then((res) => {
    getList();
  });
};

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

// 置净（---------------------------------------）
const setAside = lodash.throttle(async (val) => {
  roomLoading.value = true; // 加载页面
  console.log(val);
  let data = {
    houseNumberId: val.houseNumberId,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/cleanRoom",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    roomLoading.value = false; // 加载页面
    getList();
    itemClick(val);
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    roomLoading.value = false; // 加载页面
    getList();
    // itemClick(val);
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 2000);

// 置脏（---------------------------------------）
const mess = lodash.throttle(async (val) => {
  roomLoading.value = true; // 加载页面
  console.log(val);
  let data = {
    houseNumberId: val.houseNumberId,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/dirtyRoom",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  if (res.data.code == 200) {
    roomLoading.value = false; // 加载页面
    getList();
    itemClick(val);
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    roomLoading.value = false; // 加载页面
    getList();
    // itemClick(val);
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 2000);

// 换房 (---------------------------------------------------------------)
const roomChangeClick = async (row) => {
  roomChangeVisible.value = true;
  roomChangeRuleForm.houseName = row.houseName;
  roomChangeRuleForm.houseNumber = row.houseNumber;
  roomChangeRuleForm.roomType = row.roomType;
  roomChangeRuleForm.orderNumber = row.orderNumber;
  roomChangeRuleForm.houseNumberId = row.houseNumberId;
  roomChangeRuleForm.forecastTime = row.reserveLiveTime;
  roomChangeRuleForm.preionizationTime = row.reserveLeaveTime;
  let data = {
    liveTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    leaveTime: row.reserveLeaveTime,
    houseNumberId: row.houseNumberId,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-number-state/roomChangePage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "换房界面");
  if (res.data.code == 200) {
    roomChangeItemList.value = res.data.data;
    roomChangeIndex.value = roomChangeItemList.value[0].name;
    if (roomChangeItemList.value[0].children.length != []) {
      roomChangeList.list = roomChangeItemList.value[0].children;
    } else {
      roomChangeList.list = [];
    }
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 切换房类型
const changeRoom = (name) => {
  roomChangeIndex.value = name;
  roomChangeItemList.value.forEach((i) => {
    if (i.name == name) {
      roomChangeList.list = i.children;
    }
  });
};
// 勾选房间
const roomCheck = (row) => {
  checkInd.value = row.id;
  roomChangeRuleForm.houseNumberNow = row.roomNumber;
  roomChangeRuleForm.roomPriceNow = row.roomPrice;
  roomChangeRuleForm.houseNumberIdNow = row.id;
};
// 确定换房
const submitroomChange = lodash.throttle(async () => {
  roomLoading.value = true; // 加载页面
  roomChangeLoading.value = true;
  let data = {
    initialHouseNumberId: roomChangeRuleForm.houseNumberId, // 初始的房间id
    houseNumberId: roomChangeRuleForm.houseNumberIdNow, // 勾选的房间id
    orderNumber: roomChangeRuleForm.orderNumber,
    adminId: sessionStorage.getItem("id"), //用户id
    adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
  };
  console.log(data);
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/roomChange",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "确定换房");
  if (res.data.code == 200) {
    roomLoading.value = false; // 加载页面
    roomChangeLoading.value = false;
    getList();
    roomChangeVisible.value = false;
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    roomLoading.value = false; // 加载页面
    roomChangeLoading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 2000);
// 关闭换房
const cancelRoomChange = () => {
  roomChangeVisible.value = false;
  checkInd.value = "";
  roomChangeRuleForm.houseNumberNow = "";
  roomChangeRuleForm.roomPriceNow = "";
  roomChangeRuleForm.houseNumberId = "";
};

// 系统设置中 - 全日房可用时段
const dayData = async () => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/apartment-setting/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "系统设置信息");
  if (res.data.code == 200) {
    startTime.value = res.data.data.liveTime;
    endTime.value = res.data.data.leaveTime;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 预定 (-------------------------------------------------------------------)
const reserveClick = async (i) => {
  // let data = {
  //   houseNumberId: i.houseNumberId,
  // };
  // let res = await axios({
  //   method: "get",
  //   url: api.value + "/house-lock/ifBinging",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("user_head"),
  //   },
  //   params: data,
  // });
  // console.log(res, "判断房间是否绑定了设备");
  // if (res.data.data.binging==1) {
  //   dayData();
  //   reserveVisible.value = true;
  //   console.log(i, "预定");
  //   reserveRuleForm.type = i.roomType; // 类型
  //   reserveRuleForm.houseNumberId = i.houseNumberId;
  //   reserveRuleForm.houseId = i.houseId;
  //   reserveRuleForm.roomLiveTime = i.roomLiveTime;

  //   reserveRuleForm.title = i.houseName + " " + i.houseNumber;
  //   reserveRuleForm.name = "";
  //   reserveRuleForm.phone = "";

  //   let dateStart = dayjs().format("YYYY-MM-DD");
  //   let dateEnd = dayjs(dateStart).add(1, "day").format("YYYY-MM-DD");
  //   reserveRuleForm.liveTime = [dateStart, dateEnd];

  //   let hourStart = dayjs().format("YYYY-MM-DD HH:mm:ss");
  //   let hourEnd = dayjs(hourStart)
  //     .add(i.roomLiveTime, "hour")
  //     .format("YYYY-MM-DD HH:mm:ss");
  //   reserveRuleForm.forecastTime = hourStart;
  //   reserveRuleForm.preionizationTime = hourEnd;
  //   if (reserveRuleForm.liveTime) {
  //     liveTimeClick();
  //   }
  // } else {
  //   ElMessage({
  //     type: "warning",
  //     showClose: true,
  //     message: '当前房间未绑定门锁设备',
  //     center: true,
  //   });
  // }
  dayData();
  reserveVisible.value = true;
  console.log(i, "预定");
  reserveRuleForm.type = i.roomType; // 类型
  reserveRuleForm.houseNumberId = i.houseNumberId;
  reserveRuleForm.houseId = i.houseId;
  reserveRuleForm.roomLiveTime = i.roomLiveTime;

  reserveRuleForm.title = i.houseName + " " + i.houseNumber;
  reserveRuleForm.name = "";
  reserveRuleForm.phone = "";

  let dateStart = dayjs().format("YYYY-MM-DD");
  let dateEnd = dayjs(dateStart).add(1, "day").format("YYYY-MM-DD");
  reserveRuleForm.liveTime = [dateStart, dateEnd];

  let hourStart = dayjs().format("YYYY-MM-DD HH:mm:ss");
  let hourEnd = dayjs(hourStart)
    .add(i.roomLiveTime, "hour")
    .format("YYYY-MM-DD HH:mm:ss");
  reserveRuleForm.forecastTime = hourStart;
  reserveRuleForm.preionizationTime = hourEnd;
  if (reserveRuleForm.liveTime) {
    liveTimeClick();
  }
  reserveRuleForm.overtime = dayjs(hourStart)
    .add(15, "minute")
    .format("YYYY-MM-DD HH:mm:ss");
};
// 改变预抵日期时加载数据 (全日房)
const liveTimeClick = async (val) => {
  if (reserveRuleForm.type == 1) {
    let data = {
      houseNumberId: reserveRuleForm.houseNumberId,
      startTime: reserveRuleForm.liveTime[0],
      endTime: reserveRuleForm.liveTime[1],
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/reserveDay",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: data,
    });
    console.log(res, "预定——占用状态");
    if (res.data.code == 200) {
      reserveData.list = res.data.data;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }

    let datas = {
      houseId: reserveRuleForm.houseId,
      liveTime: reserveRuleForm.liveTime[0] + " " + startTime.value,
      leaveTime: reserveRuleForm.liveTime[1] + " " + endTime.value,
    };
    let ress = await axios({
      method: "get",
      url: api.value + "/house-number-state/reservePrice",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: datas,
    });
    console.log(ress, "预定——支付金额");
    if (ress.data.code == 200) {
      reserveRuleForm.roomPrice = ress.data.data.totalPrice;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: ress.data.message,
        center: true,
      });
    }
  } else if (reserveRuleForm.type == 2) {
    reserveRuleForm.preionizationTime = dayjs(reserveRuleForm.forecastTime)
      .add(reserveRuleForm.roomLiveTime, "hour")
      .format("YYYY-MM-DD HH:mm:ss");
    let data = {
      houseNumberId: reserveRuleForm.houseNumberId,
      startTime: reserveRuleForm.forecastTime,
      liveTime: reserveRuleForm.roomLiveTime,
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "get",
      url: api.value + "/house-number-state/reserveHour",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: data,
    });
    console.log(res, "预定——占用状态");
    if (res.data.code == 200) {
      reserveData.list = res.data.data;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }

    let datas = {
      houseId: reserveRuleForm.houseId,
      liveTime: reserveRuleForm.forecastTime,
      leaveTime: reserveRuleForm.preionizationTime,
    };
    let ress = await axios({
      method: "get",
      url: api.value + "/house-number-state/reservePrice",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: datas,
    });
    console.log(ress, "预定——支付金额");
    if (ress.data.code == 200) {
      reserveRuleForm.roomPrice = ress.data.data.totalPrice;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: ress.data.message,
        center: true,
      });
    }
  }
};
// 取消预定功能
const reserveCancal = async (row) => {
  console.log(row, "取消预定");
  if (row.orderStatus == 1) {
    let data = {
      orderNumber: row.orderNumber,
      houseNumberId: row.houseNumberId,
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-order/cancel",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "取消预定");
    if (res.data.code == 200) {
      row.visible = false;
      getList();
      reserveVisible.value = false;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (row.orderStatus == 2 || row.orderStatus == 3) {
    let data = {
      orderNumber: row.orderNumber,
      houseNumberId: row.houseNumberId,
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-order/payNotCheckIn",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "取消预定");
    if (res.data.code == 200) {
      row.visible = false;
      getList();
      reserveVisible.value = false;
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
const cancelReserve = () => {
  reserveVisible.value = false;
  reserveRef.value.resetFields();
};
// 确定预定
const reserveSubmitAdd = lodash.throttle(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (reserveRuleForm.type == 1) {
        let phoneFlag = reserveRuleForm.phone.includes("(+86)");
        if (!phoneFlag) {
          reserveRuleForm.phone = "(+86)" + reserveRuleForm.phone;
        }
        let data = {
          name: reserveRuleForm.name,
          phone: reserveRuleForm.phone,
          houseNumberId: reserveRuleForm.houseNumberId,
          houseId: reserveRuleForm.houseId,
          reserveLiveTime: reserveRuleForm.liveTime[0] + " " + startTime.value,
          reserveLeaveTime: reserveRuleForm.liveTime[1] + " " + endTime.value,
          payPrice: reserveRuleForm.roomPrice,
          timeOut: reserveRuleForm.overtime,
          adminId: sessionStorage.getItem("permissionSettingId"),
        };
        let res = await axios({
          method: "post",
          url: api.value + "/house-number-state/reserve",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: data,
        });
        console.log(res, "确定预定");
        if (res.data.code == 200) {
          getList();
          reserveVisible.value = false;
          reserveRef.value.resetFields();
          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 (reserveRuleForm.type == 2) {
        let data = {
          name: reserveRuleForm.name,
          phone: reserveRuleForm.phone,
          houseNumberId: reserveRuleForm.houseNumberId,
          houseId: reserveRuleForm.houseId,
          reserveLiveTime: reserveRuleForm.forecastTime,
          reserveLeaveTime: reserveRuleForm.preionizationTime,
          payPrice: reserveRuleForm.roomPrice,
          // "cardNumber": "202204081888",
          adminId: sessionStorage.getItem("permissionSettingId"),
        };
        let res = await axios({
          method: "post",
          url: api.value + "/house-number-state/reserve",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: data,
        });
        console.log(res, "确定预定");
        if (res.data.code == 200) {
          getList();
          reserveVisible.value = false;
          reserveRef.value.resetFields();
          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);
    }
  });
}, 2000);

// 退款 （-------------------------------------------------------------------------）
const orderPayout = lodash.throttle(async (row) => {
  console.log(row, "退款");
  let data = {
    orderNumber: row.orderNumber,
    houseNumberId: row.houseNumberId,
    usersId: sessionStorage.getItem("id"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-order/cancelApplet",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "房态管理-退款");
  if (res.data.code == 200) {
    setTimeout(async () => {
      let datas = new FormData();
      datas.append("refundNo", row.houseOrderId);
      let ress = await axios({
        method: "post",
        url: api.value + "/house-order/queryRefundById",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: datas,
      });
      console.log(ress, "微信支付查询退款");
      if (ress.data.data.code == 200) {
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: ress.data.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: ress.data.data.message,
          center: true,
        });
      }
    }, 1500);
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 2000);

// 入住 (--------------------------------------------------------------------)
const checkInClick = async (row) => {
  checkAdvanceTime.value = false; // 重置判断是否前提办理入住
  {
    // 判断有没有绑定门锁 没有的话只能用钥匙
    let data = {
      houseNumberId: row.houseNumberId,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/house-lock/ifBinging",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: data,
    });
    console.log(res, "判断房间是否绑定了设备");
    if (res.data.data.binging == 1) {
      lockShow.value = true;
      checkInIndex.value = 3;
      console.log(checkInIndex.value);
    } else {
      lockShow.value = false;
      checkInIndex.value = 5;
      ElMessage({
        type: "warning",
        showClose: true,
        message: "当前房间未绑定门锁设备",
        center: true,
      });
    }
  }
  checkInVisible.value = true;
  console.log(row, "入住");
  checkInRuleForm.title = row.houseName + " " + row.houseNumber; // 标题
  checkInRuleForm.checkName = "";
  checkInRuleForm.checkIdcard = "";
  checkInRuleForm.pass = "";
  checkInRuleForm.icCard = "";
  checkInRuleForm.fingerprintNum = "";
  checkInRuleForm.failureTime = "";
  checkInRuleForm.orderNumber = row.orderNumber;
  radioFingerprintDate.value = "";
  let data = {
    orderNumber: row.orderNumber,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-order/particulars",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "详情信息");
  if (res.data.code == 200) {
    let data = res.data.data.houseOrder;
    checkInRuleForm.name = data.reserveName; // 预订人
    checkInRuleForm.phone = data.reservePhone; // 密码
    checkInRuleForm.orderNumber = data.orderNumber; // 订单号
    checkInRuleForm.orderStatus = data.orderStatus;
    checkInRuleForm.type = Number(row.roomType); // 类型
    checkInRuleForm.forecastTime = data.reserveLiveTime; // 预抵日期
    let nowTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
    if (nowTime < checkInRuleForm.forecastTime) {
      checkAdvanceTime.value = true;
    }
    console.log(nowTime, "现在时间");
    console.log(checkInRuleForm.forecastTime, "预抵日期");
    console.log(nowTime < checkInRuleForm.forecastTime);

    checkInRuleForm.preionizationTime = data.reserveLeaveTime; // 预离日期
    checkInRuleForm.roomPrice = data.payPrice; // 房价
    checkInRuleForm.dayNum = data.liveDay; // 预住天数
    checkInRuleForm.houseNumberId = row.houseNumberId;
    checkInRuleForm.houseId = row.houseId;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 姓名切换
const changeItem = (flag) => {
  changeIndex.value = flag;
};
// 1密码 2房卡 3指纹 4身份证 5钥匙切换
const checkInChangeItem = (flag) => {
  checkInIndex.value = flag;
  checkInRuleForm.fingerprintNum = "";
  checkInRuleForm.pass = "";
  if (flag == 2) {
    checkInRuleForm.icCard = "";
  } else if (flag == 4) {
    checkInRuleForm.icCard = "";
  }
  // if (flag == 3) {
  //   checkInRuleForm.pass = "";
  //   checkInRuleForm.icCard = "";
  // } else if (flag == 2) {
  //   checkInRuleForm.pass = "";
  //   checkInRuleForm.icCard = "";
  //   checkInRuleForm.fingerprintNum = "";
  // } else if (flag == 4) {
  //   checkInRuleForm.pass = "";
  //   checkInRuleForm.fingerprintNum = "";
  // } else if (flag == 1) {
  //   checkInRuleForm.fingerprintNum = "";
  //   checkInRuleForm.icCard = "";
  //   checkInRuleForm.pass = "";
  // }
};
// 指纹录取 （1111111）
const readFingerprint = () => {
  addFingerprintVisible.value = true;
  step.list = [
    { id: 1, title: "" },
    { id: 2, title: "" },
    { id: 3, title: "" },
    { id: 4, title: "" },
  ];
  stepindex.value = 0;
  var wsUrl = "ws://localhost:8181/";
  let websocket = new WebSocket(wsUrl);
  ws.value = websocket;
  websocket.onopen = function (evt) {
    var params = { type: 101, data: null };
    websocket.send(JSON.stringify(params));
  };
  websocket.onmessage = function (evt) {
    console.log(evt.data, "输出指纹数据");
    let data = JSON.parse(evt.data);
    if (data.type == 0) {
      console.log(data.data.portNames);
      let num = 0;
      if (data.data.portNames) {
        num = data.data.portNames.length;
        console.log(JSON.parse(evt.data).data.portNames[num - 1]);
      }
      // console.log(JSON.parse(evt.data).data.portNames[]); // 获取到 USB接口
      let params1 = {
        type: 1,
        data: {
          type: 0,
          portName: JSON.parse(evt.data).data.portNames[num - 1],
          baudRate: 115200,
        },
      };
      websocket.send(JSON.stringify(params1));
    } else if (data.type == 110) {
      console.log("已获取设备信息");
    } else if (data.type == 11) {
      var params2 = {
        type: 2,
        data: {
          totalStep: 4,
        },
      };
      websocket.send(JSON.stringify(params2));
    } else if (data.type == 21) {
      if (data.data.step == 0) {
        // console.log("请按压指纹");
        ElMessage({
          message: "请开始按压指纹",
          type: "success",
        });
      } else {
        // console.log(`请按下同一指纹，第${data.data.step}次按压`);
        if (data.data.step <= 4) {
          step.list.forEach((item) => {
            if (item.id == data.data.step) {
              item.title = `请按下同一指纹，第${data.data.step}次录入指纹成功`;
            }
          });
        }
        stepindex.value = data.data.step;
      }
      // _this.$message.warning("请将手指按在传感器上");
      if (data.data.step > 4) {
        var params = {
          type: 3,
          data: {
            id: data.data.id,
          },
        };
        websocket.send(JSON.stringify(params));
      }
    } else if (data.type == 31) {
      checkInRuleForm.fingerprintNum = data.data.template;
      console.log(data.data.template, "指纹数据");
      addFingerprintVisible.value = false;
      ws.value.close();
      ElMessage({
        message: "指纹录取成功",
        type: "success",
      });
      // setTimeout(() => {
      //   _this.fingerprintShow = false;
      //   ws.value.close();
      // }, 1500);
    } else {
      ElMessage({
        message: "设备连接失败，请刷新重新录入",
        type: "error",
      });
    }
  };
  websocket.onclose = function (evt) {
    console.log("关闭连接");
    // ws.value.close();
  };
  websocket.onerror = function (evt) {
    // console.log("错误提示");
  };
};
const cancelAddFingerprint = () => {
  addFingerprintVisible.value = false;
  checkInRuleForm.icCard = "";
  // checkInRuleForm.fingerprintNum=""
  checkInRuleForm.pass = "";
  ws.value.close();
};
// 选择日期时间段
const radioFingerprintChange = (value) => {
  // console.log(value);
  radioFingerprintDate.value = value;
  if (radioFingerprintDate.value == "一个星期") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(1, "week")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一个月") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(1, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "半年") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(6, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一年") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(1, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "长期") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(100, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  }
};
// 改变生效日期
const effectiveTimeChange = (val) => {
  console.log(val);
  if (radioFingerprintDate.value == "一个星期") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(1, "week")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一个月") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(1, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "半年") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(6, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一年") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(1, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "长期") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(100, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  }
};
// 改变失效日期
const failureTimeChange = (val) => {
  console.log(val);
  radioFingerprintDate.value = "";
};
// 判断失效日期大于生效日期
const endT = () => {
  if (checkInRuleForm.failureTime && checkInRuleForm.effectiveTime) {
    if (checkInRuleForm.failureTime < checkInRuleForm.effectiveTime) {
      ElMessage({
        type: "error",
        showClose: true,
        message: "失效日期应大于生效日期至少一天",
        center: true,
      });
      checkInRuleForm.failureTime = "";
    }
  }
};

const Card = () => {
  var wsUrl = "ws://localhost:8181/";
  let websocket = new WebSocket(wsUrl);
  // wsidentityCard.value = websocket;
  websocket.onopen = function (evt) {
    var params = { type: 104, data: null };
    websocket.send(JSON.stringify(params));
  };

  websocket.onmessage = function (evt) {
    let data = JSON.parse(evt.data);
    console.log(data);
    if (data.type == 141) {
      identityCardTitle.value = "请插入设备";
      identityCardIndex.value = 0;
    } else if (data.type == 150) {
      identityCardTitle.value = "配置失败，请检查卡片是否已放置设备上";
      identityCardIndex.value = 1;
    } else if (data.type == 140) {
      identityCardIndex.value = 2;
      identityCardTitle.value = "读卡中";

      if (data.data.uid) {
        checkInRuleForm.icCard = data.data.uid;
        setTimeout(() => {
          identityCardIndex.value = 3;
          identityCardTitle.value = "读卡成功";
        }, 1000);
        setTimeout(() => {
          addIdentityCardVisible.value = false;
        }, 2000);
      }

      // ElMessage({
      //   type: "success",
      //   showClose: true,
      //   message: "添加卡片成功",
      //   center: true,
      // });

      // identityCardTitle.value = "获取卡号成功";

      // addIdentityCardVisible.value = false;
      // identityCardVisible.value = false;
      // identityCardRef.value.resetFields();

      // setTimeout(() => {
      //   _this.icCardShow = false;
      // }, 2000);
    }
  };
};
// 读取卡号
const readIcCard = () => {
  addIdentityCardVisible.value = true;
  // identityCardNum.value = "";
  Card();
};
const cancelAddIdentityCard = () => {
  addIdentityCardVisible.value = false;
};
// 重试 身份卡
const retry = () => {
  // identityCardNum.value = "";
  Card();
};
// 密码 （3333333333）
const checkInPassClick = (value) => {
  console.log(value);
};
// 随机密码
const randomCipher = async () => {
  // console.log(Math.random());

  // let len = "";
  // if (parseInt(Math.random() * 9) > 4) {
  //   len = 8;
  // } else {
  //   len = 6;
  // }
  // var pwd = "";
  // for (var idx = 0; idx < len; idx++) {
  //   var seed = parseInt(Math.random() * 9);
  //   pwd = pwd + seed;
  // }
  let res = await axios({
    method: "get",
    url: api.value + "/unlocking-admin/getPassWord",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
  });
  console.log(res, "随机密码");
  if (res.data.code == 200) {
    checkInRuleForm.pass = res.data.data.passWord;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelCheckIn = () => {
  checkInVisible.value = false;
  checkInRef.value.resetFields();
};
// 弹出支付页面 (-------------------------------------)
const checkInConfirm = lodash.debounce(async (formEl) => {
  payPriceLoading.value = false;
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      payPriceRuleForm.order = checkInRuleForm.orderNumber;
      payPriceRuleForm.price = checkInRuleForm.roomPrice;
      payPriceRuleForm.type = 1;
      payPriceVisible.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
}, 500);
// 确定入住
const configPayPrice = lodash.throttle(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      payPriceLoading.value = true;
      if (
        checkInRuleForm.orderStatus == 2 ||
        checkInRuleForm.orderStatus == 3
      ) {
        let liveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
        let datas = {
          adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
          adminId: sessionStorage.getItem("id"), //用户id
          houseId: checkInRuleForm.houseId,
          houseNumberId: checkInRuleForm.houseNumberId,
          liveName: checkInRuleForm.checkName,
          idCard: checkInRuleForm.checkIdcard,
          // phone: checkInRuleForm.phone,
          // "idCard": "362425123456891011",
          // cardNumber: "", //有就填，没有就不填
          // liveTime: checkInRuleForm.forecastTime,
          liveTime: liveTime,
          leaveTime: checkInRuleForm.preionizationTime,
          payPrice: checkInRuleForm.roomPrice,
          liveDay: checkInRuleForm.dayNum,
          lockStatus: checkInIndex.value, //开锁方式 1：密码，2：房卡  3：指纹 4.身份证卡  5：钥匙
          fingerprint: checkInRuleForm.fingerprintNum, // 指纹特征码 有就填，没有就不填
          idCardInformation: checkInRuleForm.icCard, // 卡片特征码 有就填，没有就不填
          orderNumber: checkInRuleForm.orderNumber, //有订单就填，没有就不填
        };
        let ress = await axios({
          method: "post",
          url: api.value + "/house-number-state/checkIdCard",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: datas,
        });
        console.log(ress, "确定入住");
        if (ress.data.code == 200) {
          getList();
          payPriceLoading.value = false;
          // clearInterval(timer.value)
          // 支付入住成功弹窗查看密码弹窗
          if (checkInIndex.value == 1) {
            passVisible.value = true;
            let data = {
              orderNumber: checkInRuleForm.orderNumber,
              adminId: sessionStorage.getItem("permissionSettingId"),
            };
            let res = await axios({
              method: "get",
              url: api.value + "/house-order/particulars",
              headers: {
                token: sessionStorage.getItem("token"),
                user_head: sessionStorage.getItem("user_head"),
              },
              params: data,
            });
            console.log(res, "点击房间查看详情");
            if (res.data.code == 200) {
              passForm.pass = res.data.data.houseOrder.keyPassWord;
              passForm.reserveLiveTime = dayjs(
                res.data.data.houseOrder.liveTime,
              ).format("YYYY-MM-DD HH:mm:ss");
              passForm.reserveLeaveTime =
                res.data.data.houseOrder.reserveLeaveTime;
            }
          } else {
            checkInVisible.value = false;
            payPriceVisible.value = false;
            paymentCodeVisible.value = false;
          }
          ElMessage({
            type: "success",
            showClose: true,
            message: ress.data.message,
            center: true,
          });
        } else {
          payPriceLoading.value = false;
          ElMessage({
            type: "error",
            showClose: true,
            message: ress.data.message,
            center: true,
          });
        }
      } else {
        let data = {
          orderNumber: payPriceRuleForm.order,
          payType: payPriceRuleForm.type,
          price: payPriceRuleForm.price,
        };
        let res = await axios({
          method: "post",
          url: api.value + "/house-order/payOrderPrice",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: data,
        });
        console.log(res);

        if (res.data.code == 200) {
          let liveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
          let datas = {
            adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
            adminId: sessionStorage.getItem("id"), //用户id
            houseId: checkInRuleForm.houseId,
            houseNumberId: checkInRuleForm.houseNumberId,
            liveName: checkInRuleForm.checkName,
            idCard: checkInRuleForm.checkIdcard,
            // phone: checkInRuleForm.phone,
            // "idCard": "362425123456891011",
            // cardNumber: "", //有就填，没有就不填
            // liveTime: checkInRuleForm.forecastTime,
            liveTime: liveTime,
            leaveTime: checkInRuleForm.preionizationTime,
            payPrice: checkInRuleForm.roomPrice,
            liveDay: checkInRuleForm.dayNum,
            lockStatus: checkInIndex.value, //开锁方式 1：密码，2：房卡  3：指纹 4.身份证卡  5：钥匙
            fingerprint: checkInRuleForm.fingerprintNum, // 指纹特征码 有就填，没有就不填
            idCardInformation: checkInRuleForm.icCard, // 卡片特征码 有就填，没有就不填
            orderNumber: checkInRuleForm.orderNumber, //有订单就填，没有就不填
          };
          let ress = await axios({
            method: "post",
            url: api.value + "/house-number-state/checkIdCard",
            headers: {
              token: sessionStorage.getItem("token"),
              user_head: sessionStorage.getItem("user_head"),
            },
            data: datas,
          });
          console.log(ress, "确定入住");
          if (ress.data.code == 200) {
            getList();
            payPriceLoading.value = false;
            // 支付入住成功弹窗查看密码弹窗
            setTimeout(async () => {
              if (checkInIndex.value == 1) {
                passVisible.value = true;
                let data = {
                  orderNumber: checkInRuleForm.orderNumber,
                  adminId: sessionStorage.getItem("permissionSettingId"),
                };
                let res = await axios({
                  method: "get",
                  url: api.value + "/house-order/particulars",
                  headers: {
                    token: sessionStorage.getItem("token"),
                    user_head: sessionStorage.getItem("user_head"),
                  },
                  params: data,
                });
                console.log(res, "点击房间查看详情");
                if (res.data.code == 200) {
                  passForm.pass = res.data.data.houseOrder.keyPassWord;
                  passForm.reserveLiveTime = dayjs(
                    res.data.data.houseOrder.liveTime,
                  ).format("YYYY-MM-DD HH:mm:ss");
                  passForm.reserveLeaveTime =
                    res.data.data.houseOrder.reserveLeaveTime;
                }
              } else {
                checkInVisible.value = false;
                payPriceVisible.value = false;
                paymentCodeVisible.value = false;
              }
            }, 500);
            ElMessage({
              type: "success",
              showClose: true,
              message: ress.data.message,
              center: true,
            });
          } else {
            payPriceLoading.value = false;
            ElMessage({
              type: "error",
              showClose: true,
              message: ress.data.message,
              center: true,
            });
          }
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 2000);

// 微信扫码支付界面 (----------------------------------------)
const paymentCodeClick = async () => {
  paymentCodeVisible.value = true;
  successPay.value = false; // 判断是否支付成功
  let data = {
    orderNumber: payPriceRuleForm.order,
    payType: payPriceRuleForm.type,
    price: payPriceRuleForm.price,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-order/payOrderPrice",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "扫码支付显示二维码");
  if (res.data.code == 200) {
    let img = QRCode.toDataURL(res.data.data.codeUrl);
    img.then((t) => {
      qrCodeImgUrl.value = t;
      let payFlag = 0;
      timer.value = setInterval(async () => {
        let datas = new FormData();
        datas.append("outTradeNo", payPriceRuleForm.order);
        let ress = await axios({
          method: "post",
          url: api.value + "/house-order/queryOrderById",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: datas,
        });
        console.log(ress, "微信支付查询订单");
        if (ress.data.code == 200) {
          if (ress.data.data.tradeState == "SUCCESS") {
            payFlag++;
            if (payFlag == 1) {
              successPay.value = true;
              let liveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
              let livedata = {
                adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
                adminId: sessionStorage.getItem("id"), //用户id
                houseId: checkInRuleForm.houseId,
                houseNumberId: checkInRuleForm.houseNumberId,
                liveName: checkInRuleForm.name,
                phone: checkInRuleForm.phone,
                // "idCard": "362425123456891011",
                cardNumber: "", //有就填，没有就不填
                liveTime: liveTime,
                leaveTime: checkInRuleForm.preionizationTime,
                payPrice: checkInRuleForm.roomPrice,
                liveDay: checkInRuleForm.dayNum,
                lockStatus: checkInIndex.value, //开锁方式 1：密码，2：卡片 3：指纹
                fingerprint: checkInRuleForm.fingerprintNum, // 指纹特征码 有就填，没有就不填
                idCardInformation: checkInRuleForm.icCard, // 卡片特征码 有就填，没有就不填
                orderNumber: checkInRuleForm.orderNumber, //有订单就填，没有就不填
              };
              let liveres = await axios({
                method: "post",
                url: api.value + "/house-number-state/checkIdCard",
                headers: {
                  token: sessionStorage.getItem("token"),
                  user_head: sessionStorage.getItem("user_head"),
                },
                data: livedata,
              });
              console.log(liveres, "确定入住");
              if (liveres.data.code == 200) {
                getList();
                // 支付入住成功弹窗查看密码弹窗
                if (checkInIndex.value == 1) {
                  passVisible.value = true;
                  let data = {
                    orderNumber: checkInRuleForm.orderNumber,
                    adminId: sessionStorage.getItem("permissionSettingId"),
                  };
                  let res = await axios({
                    method: "get",
                    url: api.value + "/house-order/particulars",
                    headers: {
                      token: sessionStorage.getItem("token"),
                      user_head: sessionStorage.getItem("user_head"),
                    },
                    params: data,
                  });
                  console.log(res, "点击房间查看详情");
                  if (res.data.code == 200) {
                    passForm.pass = res.data.data.houseOrder.keyPassWord;
                    passForm.reserveLiveTime = dayjs(
                      res.data.data.houseOrder.liveTime,
                    ).format("YYYY-MM-DD HH:mm:ss");
                    passForm.reserveLeaveTime =
                      res.data.data.houseOrder.reserveLeaveTime;
                  }
                } else {
                  checkInVisible.value = false;
                  payPriceVisible.value = false;
                  paymentCodeVisible.value = false;
                }
                ElMessage({
                  type: "success",
                  showClose: true,
                  message: ress.data.data.tradeStateDesc,
                  center: true,
                });
              } else {
                ElMessage({
                  type: "error",
                  showClose: true,
                  message: liveres.data.message,
                  center: true,
                });
              }
            }
            console.log(payFlag);
            clearInterval(timer.value);
            timer.value = null;
          } else {
            successPay.value = false;
            payPriceSuccess.value = false;
          }
        } else {
        }
      }, 2000);
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelPaymentCode = () => {
  clearInterval(timer.value);
  timer.value = null;
  paymentCodeVisible.value = false;
};

// 退房页面 (----------------------------------------)
const checkOutClick = (row) => {
  checkOutVisible.value = true;
  checkLockFlag.value = row.lockStatus;
  console.log(row, "已入住");
  checkOutForm.orderNumber = row.orderNumber;
  checkOutForm.houseNumberId = row.houseNumberId;
};
const checkOutConfirm = lodash.throttle(async () => {
  let data = {
    orderNumber: checkOutForm.orderNumber,
    houseNumberId: checkOutForm.houseNumberId,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/checkOut",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "房态管理-退房");
  if (res.data.code == 200) {
    getList();
    // 如果是房卡或者钥匙的话要在退房成功调用退还钥匙接口
    if (checkLockFlag.value == 2 || checkLockFlag.value == 5) {
      let datas = {
        houseOrderId: checkOutForm.orderNumber,
        giveBack: checkOutForm.lockBack,
      };
      let ress = await axios({
        method: "get",
        url: api.value + "/house-order/ifGiveBack",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        params: datas,
      });
      console.log(ress, "归还钥匙");
      // if (ress.data.code == 200) {
      checkOutVisible.value = false;
      // }
    } else {
      checkOutVisible.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,
    });
  }
  // let data = {
  //   orderNumber: checkOutForm.orderNumber,
  //   adminId: sessionStorage.getItem("permissionSettingId"),
  // };
  // let res = await axios({
  //   method: "get",
  //   url: api.value + "/house-order/particulars",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("user_head"),
  //   },
  //   params: data,
  // });
  // console.log(res, "订单管理-订单详情");
  // if (res.data.code == 200) {
  //   if (res.data.data.orderStatus == 2 || res.data.data.orderStatus == 3) {
  //     let datas = {
  //       orderNumber: checkOutForm.orderNumber,
  //       houseNumberId: checkOutForm.houseNumberId,
  //       adminId: sessionStorage.getItem("permissionSettingId"),
  //     };
  //     let ress = await axios({
  //       method: "post",
  //       url: api.value + "/house-number-state/checkOut",
  //       headers: {
  //         token: sessionStorage.getItem("token"),
  //         user_head: sessionStorage.getItem("user_head"),
  //       },
  //       data: datas,
  //     });
  //     console.log(ress, "房态管理-退房");
  //     if (ress.data.code == 200) {
  //       getList();
  //       ElMessage({
  //         type: "success",
  //         showClose: true,
  //         message: ress.data.message,
  //         center: true,
  //       });
  //     } else {
  //       ElMessage({
  //         type: "error",
  //         showClose: true,
  //         message: ress.data.message,
  //         center: true,
  //       });
  //     }
  //   } else {
  //     ElMessageBox.confirm("当前退房不支持退款，是否继续？", "提示", {
  //       confirmButtonText: "确认",
  //       cancelButtonText: "取消",
  //       type: "warning",
  //     })
  //       .then(async () => {
  //         let datas = {
  //           orderNumber: checkOutForm.orderNumber,
  //           houseNumberId: checkOutForm.houseNumberId,
  //           adminId: sessionStorage.getItem("permissionSettingId"),
  //         };
  //         let ress = await axios({
  //           method: "post",
  //           url: api.value + "/house-number-state/checkOut",
  //           headers: {
  //             token: sessionStorage.getItem("token"),
  //             user_head: sessionStorage.getItem("user_head"),
  //           },
  //           data: datas,
  //         });
  //         console.log(ress, "房态管理-退房");
  //         if (ress.data.code == 200) {
  //           getList();
  //           ElMessage({
  //             type: "success",
  //             showClose: true,
  //             message: ress.data.message,
  //             center: true,
  //           });
  //         } else {
  //           ElMessage({
  //             type: "error",
  //             showClose: true,
  //             message: ress.data.message,
  //             center: true,
  //           });
  //         }
  //       })
  //       .catch(() => {
  //         // ElMessage({
  //         //   type: 'info',
  //         //   message: 'Delete canceled',
  //         // })
  //       });
  //   }
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // }
}, 2000);
const cancelCheckOut = () => {
  checkOutVisible.value = false;
};

// 查看密码弹窗
const lookPasword = (i) => {
  passVisible.value = true;
  passForm.pass = i.passWord;
  passForm.reserveLiveTime = i.reserveLiveTime;
  passForm.reserveLeaveTime = i.reserveLeaveTime;
};
const cancelPass = () => {
  passVisible.value = false;
  checkInVisible.value = false;
  payPriceVisible.value = false;
  paymentCodeVisible.value = false;
};

// 退款弹窗页面 (----------------------------------------)
const refundClick = () => {
  refundVisible.value = true;
};
const cancelRefund = () => {
  refundVisible.value = false;
};

// 日志页面
const logClick = () => {
  logVisible.value = true;
};
const cancelLog = () => {
  logVisible.value = false;
};
const logHandleCurrentChange = (value) => {
  // console.log(value);
  logPage.value = value;
};

// 锁房页面
const lockRoomClick = async (row) => {
  // let data = {
  //   houseNumberId: row.houseNumberId,
  // };
  // let res = await axios({
  //   method: "get",
  //   url: api.value + "/house-lock/ifBinging",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("user_head"),
  //   },
  //   params: data,
  // });
  // console.log(res, "判断房间是否绑定了设备");
  // if (res.data.data.binging == 1) {
  //   lockRoomVisible.value = true;
  //   console.log(row, "锁房row");
  //   lockRoomRuleForm.houseNumberId = row.houseNumberId;
  // } else {
  //   ElMessage({
  //     type: "warning",
  //     showClose: true,
  //     message: "当前房间未绑定门锁设备",
  //     center: true,
  //   });
  // }
  lockRoomVisible.value = true;
  console.log(row, "锁房row");
  lockRoomRuleForm.houseNumberId = row.houseNumberId;
};
const cancelLockRoom = () => {
  lockRoomRef.value.resetFields();
  lockRoomVisible.value = false;
};
// 确定锁房
const lockRoomConfirm = lodash.throttle(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        endTime: lockRoomRuleForm.time,
        houseNumberId: lockRoomRuleForm.houseNumberId,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/lockRoom",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "确定锁房");
      if (res.data.code == 200) {
        getList();
        lockRoomVisible.value = false;
        lockRoomRef.value.resetFields();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1500);
// 解锁房间
const unlockClick = lodash.throttle(async (row) => {
  let data = {
    houseNumberIds: [row.houseNumberId],
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/openRooms",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "确定开房");
  if (res.data.code == 200) {
    row.visible = false;
    getList();
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 1500);

// 维修页面
const maintainClick = async (row) => {
  let data = {
    houseNumberId: row.houseNumberId,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-lock/ifBinging",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "判断房间是否绑定了设备");
  if (res.data.data.binging == 1) {
    maintainVisible.value = true;
    maintainRuleForm.houseNumberId = row.houseNumberId;
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "当前房间未绑定门锁设备",
      center: true,
    });
  }
};
const cancelMaintain = () => {
  maintainVisible.value = false;
};
const maintainConfirm = lodash.throttle(async (formEl) => {
  maintainLoading.value = true;
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        endTime: maintainRuleForm.time,
        houseNumberId: maintainRuleForm.houseNumberId,
        adminId: sessionStorage.getItem("permissionSettingId"),
      };
      let res = await axios({
        method: "post",
        url: api.value + "/house-number-state/maintain",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: data,
      });
      console.log(res, "确定锁房");
      if (res.data.code == 200) {
        getList();
        maintainVisible.value = false;
        maintainRef.value.resetFields();
        maintainLoading.value = false;
      } else {
        maintainLoading.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1500);
// 取消维修功能
const maintainCancel = lodash.throttle(async (row) => {
  roomLoading.value = true; // 加载页面
  let data = {
    houseNumberId: row.houseNumberId,
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/cancelMaintain",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "取消维修");
  if (res.data.code == 200) {
    getList();
    maintainRef.value.resetFields();
    maintainVisible.value = false;
    roomLoading.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,
    });
  }
}, 5000);

//导出功能
const importExcel = lodash.debounce(async () => {
  let data = {
    ledgerParam: searchInput.keyWord,
    managerId: sessionStorage.getItem("token"),
  };
  if (searchInput.createTime) {
    data.payStartTime = searchInput.createTime[0];
    data.payEndTime = searchInput.createTime[1];
  }
  if (searchInput.status) {
    data.orderStatus = searchInput.status;
  }
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/booktoBookExcel.action",
    headers: {
      // token: sessionStorage.getItem("token"),
    },
    params: data,
  });
  console.log(res, "导出订单管理");
  if (res.data.code == 200) {
    var downloadPath = res.data.downurl;
    // window.open(downloadPath);
    window.location.href = 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,
    });
  }
}, 1000);

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
// const handleCurrentChange = (value) => {
//   // console.log(value);
//   currentPage.value = value;
//   getList(changeIndex.value);
// };

onBeforeMount(async () => {
  api.value = store.state.user.api;
  const btnflag = JSON.parse(sessionStorage.getItem("btnflag"));
  flagBtn.value = btnflag.roomStatus;
  console.log(flagBtn.value, "按钮权限");
  getList();
  schoolData(); // 楼栋单元数据
  roomTypeList(); // 房型列表数据
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>
<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  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;
    justify-content: space-between;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
    .gongneng {
      .el-dropdown {
        margin-left: 20px;
      }
    }
  }
  .scroll {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 61px);
  }
  .middle {
    width: calc(100% - 61px);
    margin: 0 auto;
    color: #000;

    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 0 0;
      }
    }
    .changeItems {
      display: flex;
      margin: 10px 0 0 0;
      .changeItem {
        padding: 0 15px;
        height: 30px;
        background-color: rgba(230, 230, 230, 1);
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        margin-right: 15px;
        border-radius: 3px;
        color: rgba(166, 166, 166, 1);
        cursor: pointer;
      }
      .changeItem_active {
        background-color: rgba(222, 234, 252, 1);
        color: rgba(0, 97, 255, 1);
      }
      .search {
        margin-right: 5px;
      }
    }

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

      span {
        color: #fff;
      }
    }

    :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;
    }
  }

  .footer {
    flex: 1;
    width: calc(100% - 61px);
    // height: calc(100% - 82px);
    margin: 0 auto 20px;
    color: #000;
    overflow: auto;
    .floor {
      .title {
        margin: 8px 0;
        .t1 {
          font-weight: 600;
          margin-right: 10px;
        }
        .t2 {
          font-size: 13px;
          color: rgba(102, 102, 102, 1);
        }
      }
      .roomList {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;

        .room {
          width: 228px;
          height: 140px;
          opacity: 1;
          border-radius: 4px;
          background: rgba(240, 243, 247, 1);
          margin: 5px 18px 18px 0;
          /* // padding-left: 15px; */
          .el-tooltip__trigger {
            height: 100%;
          }
          .roomNum {
            font-size: 16px;
            height: 55px;
            font-weight: 600;
            margin: 0 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .status {
              /* // background-color: rgba(211, 219, 230, 1); */
              background-color: rgba(41, 109, 227, 1);
              color: #fff;
              font-size: 12px;
              padding: 1px 5px;
              border-radius: 2px;
            }
          }
          .rLock {
            font-size: 12px;
            color: #000;
            margin: 0 15px;
            padding: 0 0 5px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
              cursor: pointer;
            }
          }
          .wifi {
            display: flex;
            align-items: center;
            padding: 10px 0 10px 15px;
            color: rgba(51, 51, 51, 1);
            img {
              width: 14px;
              padding-right: 5px;
            }
          }
        }
      }
    }
  }
  .footers {
    // flex:1;
    width: calc(100% - 61px);
    height: calc(100% - 122px);
    margin: 10px auto 10px;

    .el-table--fit {
      height: 100%;

      /* // border: 1px solid #ccc; */
      :deep(.el-table__header-wrapper) {
        /* // background-color: #000; */
        font-size: 15px;
        color: #000;

        th {
          font-weight: 400;
          font-size: 16px;
        }

        .cell {
          color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-table__column-filter-trigger {
            width: 20px;
            height: 20px;
            margin-left: 5px;
            background-image: url("../../assets/icons/switch.png");
            background-size: 100% 100%;
            .el-icon {
              display: none;
            }
          }
        }

        /* // 日历 */
        .calendar {
          cursor: pointer;

          .date {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;

            .dateSel {
              display: flex;
              align-items: center;
            }

            .el-icon {
              margin: 0 5px;
            }
          }

          .nowDay {
            background-color: rgba(41, 109, 227, 1);
            color: rgb(255, 255, 255);
            margin-left: 5px;
            padding: 0px 3px;
            transform: scale(0.8);
            border-radius: 2px;
          }

          .dates {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #868686;
          }

          .block {
            cursor: pointer;

            .el-input__wrapper {
              /* // border: 1px solid red; */
              box-shadow: none;
              background-color: transparent;

              .el-input__prefix-inner {
                transform: translateX(130px);
              }

              .el-input__inner {
                cursor: pointer;
                margin-left: 20px;
              }
            }
          }
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 15px;
        color: #000;

        .contentBody {
          display: flex;
          flex-direction: column;
          text-align: left;

          /* // padding: 8px 8px; */
          .calendar {
            /* // height: 26px; */
            padding: 0 8px;
          }

          .calendars {
            /* // height: 26px; */
            padding: 0 2px;
          }
        }

        .contentBodys {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 100%;
          position: absolute;
          background-color: #ccc;
          left: 0;
          top: 0;
          opacity: 0;
          transform: scale(0.96);

          img {
            width: 18px;
            margin: 5px;
          }
        }

        .contentBodys_closeType {
          opacity: 1;
          /* // border: 1px solid rgba(9, 101, 98, 1); */
        }

        /* // 房间清扫图标 */
        .el-table__cell {
          .cell {
            width: 100%;
            height: 100px;
            // line-height: 100px;
            .calendarRoom {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .name {
                width: 100%;
                height: 30px;
              }
              .status {
                position: absolute;
                right: 0px;
                top: 0px;
              }
            }
            .roomNumber {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 22px;
                position: absolute;
                right: 6px;
                bottom: 6px;
              }
            }

            .roomNumbers {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100%;
              width: 100%;
              position: absolute;
              background-color: #ccc;
              left: 0;
              top: 0;
              opacity: 0;
              transform: scale(0.96);
            }

            .roomNumbers:hover {
              opacity: 1;
              border: 1px solid rgba(41, 109, 227, 1);
            }
          }
        }
      }

      :deep(.el-table__row):hover {
        td {
          background: #fff;
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        /* // border: 1px solid #ccc; */
      }

      :deep(.el-table__row td):hover {
        cursor: pointer;
        background-color: rgb(245, 247, 253);
      }

      .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);
      }

      :deep(.options) {
        display: flex;
        justify-content: center;
        align-items: center;

        .reset {
          color: rgba(9, 101, 98, 1);
          cursor: pointer;
        }

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

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

    /* // 添加员工弹窗样式 */
    :deep(.addStaff) {
      /* //   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: 30px 20px 10px 20px;

        .el-input {
          width: 200px;

          .el-input__suffix-inner {
            color: rgba(61, 81, 232, 1);
          }
        }

        .options {
          margin: 10px 20px 20px 0;
          width: 100%;

          .el-form-item__content {
            display: flex;
            flex-direction: row-reverse;
          }

          .queding {
            color: #fff;
            margin-left: 15px;
          }
        }
      }
    }
  }
  .footer::-webkit-scrollbar-track {
    background-color: #daeeff;
  }

  .footer::-webkit-scrollbar {
    background-color: #0888f8;
    height: 3px;
    width: 6px;
  }

  .footer::-webkit-scrollbar-thumb {
    background: #57b2ff;
    border-radius: 4px;
    height: 3px;
    width: 6px;
    cursor: pointer;
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 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(111, 182, 184, 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;
      }
    }
  }
}

.el-input {
  width: 192px;
}

/* // 弹出的信息框 */
.roominfoPopper {
  .roomInfo {
    /* // border: 1px solid red; */
    color: #fff;
    font-size: 14px;
    position: relative;
    .close {
      position: absolute;
      width: 25px;
      height: 25px;
      right: -35px;
      top: -24px;
      cursor: pointer;
    }
    .title {
      font-size: 16px;
      padding: 7.5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      .i {
        display: inline-block;
        width: 208px;
      }
      .setAside {
        display: flex;
        align-items: center;
        margin-left: 16px;
        font-size: 14px;
        cursor: pointer;
        img {
          width: 16px;
          margin-right: 5px;
        }
      }
    }
    .content {
      display: flex;
      .lefts {
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        width: 208px;
        span:nth-child(1) {
          text-align: left;
          display: inline-block;
          /* // width: 72px; */
          margin: 5px 15px 5px 0;
        }
        span:nth-child(2) {
          text-align: left;
          display: inline-block;
          /* // width: 190px; */
          /* // padding-right: 20px; */
        }
      }
      .rigths {
        /* // width: 140px; */
        margin-left: 15px;
        div {
          display: flex;
          align-items: center;
          height: 33px;
          cursor: pointer;
          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          span {
            text-align: left;
            display: inline-block;
          }
          .deblocking {
            transform: translateX(3px);
          }
        }
        .roomType {
          margin: 30px 0 10px 15px;
          .block {
            width: 49px;
            height: 49px;
            background-color: #fff;
            border-radius: 50%;
            color: rgba(30, 125, 251, 1);
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
/* // 换房弹窗 */
:deep(.roomChangeDialog) {
  /* // height: 600px; */
  overflow: hidden;
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    display: none;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
    padding: 0;
    .titleHeader {
      height: 60px;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      background-color: rgb(237, 241, 245);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        span:nth-child(1) {
          font-size: 23px;
          font-weight: 700;
          color: #000;
        }
        span:nth-child(2) {
          color: #000;
        }
      }
      .cancel {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
    }
    .roomChangeBody {
      display: flex;
      max-height: 500px;
      margin: 0 20px 50px;
      .middles {
        width: 150px;
        /* // margin: 0 auto; */
        color: #000;
        /* //   切换  消息记录  操作记录 */
        .changeItemss {
          /* // margin: 20px 0; */
          width: 130px;

          .changeNews {
            margin: 15px 0;
            height: 40px;
            background-color: rgba(230, 230, 230, 1);
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            border-radius: 3px;
            color: rgba(166, 166, 166, 1);
            cursor: pointer;
          }
          .changeNews_active {
            background-color: rgba(222, 234, 252, 1);
            color: rgba(0, 97, 255, 1);
          }
        }
      }
      .room {
        width: calc(100% - 130px);
        height: 420px;
        overflow: auto;
        margin: 10px 0 0 0;
        .floors {
          width: calc(100%);
          overflow: auto;
          display: flex;
          flex-wrap: wrap;
          .cards {
            width: 200px;
            height: 140px;
            background: rgb(240, 243, 247);
            margin: 5px 18px 18px 0;
            border: 1px solid #0061ff;
            position: relative;
            border-radius: 4px;
            .roomList {
              width: 200px;
              height: 140px;
              display: flex;
              align-items: center;
              justify-content: center;

              .roomNumber {
                font-size: 22px;
                color: #000;
              }
              .check {
                opacity: 0.8;
                position: absolute;
                top: -1px;
                right: -1px;
                width: 25px;
                height: 25px;
              }
            }
          }
        }
      }
      .room::-webkit-scrollbar-track {
        background-color: #daeeff;
      }

      .room::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
      }

      .room::-webkit-scrollbar-thumb {
        background: #57b2ff;
        border-radius: 4px;
        height: 3px;
        width: 4px;
      }
    }
    .roomChangeFooter {
      height: 60px;
      margin: 0 20px 0;
      .reason {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        .reason_ {
          color: #000;
          margin-right: 10px;
        }
      }
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        margin: 30px 0 0 0;
        .title {
          margin: 0 10px;
        }
      }
    }
  }
}
/* // 预定弹窗 */
:deep(.reserveDialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    display: none;

    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto; */
    /* // padding: 10px 20px 10px 20px; */
    padding: 0;
    .titleHeader {
      height: 60px;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      background-color: rgb(237, 241, 245);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        span:nth-child(1) {
          font-size: 23px;
          font-weight: 700;
          color: #000;
        }
        span:nth-child(2) {
          color: #000;
        }
      }
      .cancel {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
    }
    .roomChangeBody {
      margin: 0 20px 80px;
      .titles {
        color: rgba(0, 97, 255, 1);
        font-size: 16px;
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 22px;
          margin-right: 10px;
        }
      }
      .reserveRuleForm {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
          margin-right: 15px;
        }
      }
      .el-table {
        width: 960px;
        // height: 106px;
        overflow: auto;
        // 整个滚动条
        &::-webkit-scrollbar-track {
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 4px;
        }
        // 滚动条的滚动区域（轨道）
        &::-webkit-scrollbar {
          background-color: #ccc;
          height: 4px;
          width: 4px;
          border-radius: 4px;
        }
        // 滚动条的可拖拽部分（滑块）
        &::-webkit-scrollbar-thumb {
          background: rgba(30, 125, 251, 1);
          border-radius: 4px;
        }
        table {
          tr {
            display: flex;
            td {
              display: inline-block;
              width: 185px;
              padding: 5px 10px;
              color: #000;
              border-left: 1px solid #808080;
              border-top: 1px solid #808080;
            }
            td:last-child {
              border-right: 1px solid #808080;
            }
          }
          tr:last-child {
            td {
              border-bottom: 1px solid #808080;
            }
          }
        }
      }
    }
    .roomChangeFooter {
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
      }
    }
  }
}
/* // 入住弹窗 */
:deep(.checkInDialog) {
  /* // height: 600px; */
  border-radius: 11px;
  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;
    display: none;

    .el-dialog__headerbtn {
      outline: none;
    }
  }
  .el-dialog__body {
    /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
    padding: 0;
    .titleHeader {
      height: 60px;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      background-color: rgb(237, 241, 245);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        span:nth-child(1) {
          font-size: 23px;
          font-weight: 700;
          color: #000;
        }
        span:nth-child(2) {
          color: #000;
        }
      }
      .cancel {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
      }
    }
    .roomChangeBody {
      margin: 0 20px 80px;
      .titles {
        color: rgba(0, 97, 255, 1);
        font-size: 16px;
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 22px;
          margin-right: 10px;
        }
      }
      .operation {
        margin: 15px 0;
      }
      .tags {
        display: flex;
        margin: 15px 0;
        .changeItem {
          width: 85px;
          height: 30px;
          background-color: rgba(230, 230, 230, 1);
          text-align: center;
          line-height: 30px;
          font-size: 14px;
          margin-right: 15px;
          border-radius: 3px;
          color: rgba(166, 166, 166, 1);
          cursor: pointer;
        }
        .changeItem_active {
          background-color: rgba(222, 234, 252, 1);
          color: rgba(0, 97, 255, 1);
        }
      }
      .residentInfo {
        display: flex;
        .el-form-item {
          margin-right: 20px;
        }
      }
      .checkIn {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
          margin-right: 20px;
        }
      }
      .keys {
        .el-form-item {
          .el-input-group__append {
            background-color: rgba(222, 234, 252, 1);
            color: rgba(0, 97, 255, 1);
            cursor: pointer;
            user-select: none;
          }
        }
      }
      /* // .reserveRuleForm {
      //   display: flex;
      //   flex-wrap: wrap;
      //   .el-form-item {
      //     margin-right: 15px;
      //   }
      // } */
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 确定入住 弹出支付页面弹窗 */
:deep(.payPriceVialog) {
  /* // height: 600px; */
  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 {
    /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
    padding: 0;
    .roomChangeBody {
      margin: 0 20px 80px;
      .titles {
        color: rgba(0, 97, 255, 1);
        font-size: 16px;
        display: flex;
        align-items: center;
        margin: 15px 0;
        img {
          width: 22px;
          margin-right: 10px;
        }
      }
      .operation {
        margin: 15px 0;
      }
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 微信扫码支付界面弹窗 */
:deep(.paymentCodeVialog) {
  /* // height: 600px; */
  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 {
    /* // overflow: auto; */
    /* // padding: 10px 20px 10px 20px; */
    padding: 0;
    .roomChangeBody {
      margin: 0 20px 80px;
      .unpaid {
        font-size: 20px;
        color: #000;
        margin: 20px 0;
        span {
          font-size: 30px;
          font-weight: 800;
          color: rgba(212, 48, 48, 1);
        }
      }
      .imgTitle {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 300px;
          height: 300px;
        }
        .successPay {
          width: 300px;
          height: 300px;
          background-color: rgba(255, 255, 255, 0.7);
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 55px;
            height: 55px;
            z-index: 9999;
          }
        }
        /* // p{
        //   text-align: center;
        // } */
      }
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 身份证读取 */
:deep(.addIdentityCard) {
  /* //   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: 30px 20px 10px 20px;
    height: 330px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    .el-steps {
      width: 600px;
      transform: translateX(90px);
      margin: 0 0 40px 0;
    }
    .title {
      text-align: center;
    }
    .icons {
      display: flex;
      justify-content: center;
      img {
        width: 70px;
        margin: 40px 0;
      }
      .loading {
        animation: move 3s linear;
      }
      @keyframes move {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
    .retry {
      text-align: center;
      span {
        color: red;
        padding: 0 8px;
        cursor: pointer;
      }
    }
  }
}

/* // 指纹弹窗 */
:deep(.fingerprint) {
  width: 611px;
  height: 486px;
  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;
    .elbody {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px;
      font-size: 18px;
      color: #000;
      border-bottom: 0.5px solid #ccc;

      i {
        cursor: pointer;
      }
    }
  }
  .el-dialog__footer {
    .el-button--primary {
      background: rgba(41, 109, 227, 1);
    }
  }
}
/* // 退房 */
:deep(.checkOutDialog) {
  /* // 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; */

    .middles {
      color: #000;
      .content {
        font-size: 16px;
        letter-spacing: 1px;
        padding: 20px 0;
      }
      .options {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
      .item {
        display: flex;
        align-items: center;
        margin: 24px 0;

        .title {
          width: 100px;
          text-align: right;
          margin-right: 10px;
        }
      }
      .againPass {
        margin: 24px 0 40px 0;
      }
    }
  }
}

/* // 查看密码 */
:deep(.passDialog) {
  /* // 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; */

    .middle {
      color: #000;
      .content {
        height: 100px;
        padding: 0 0 20px 0;
        // font-size: 16px;
        // letter-spacing: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .pass {
          font-size: 35px;
          font-weight: 600;
          margin: 20px 0 0 0;
        }
      }
      .options {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
      .item {
        display: flex;
        align-items: center;
        margin: 24px 0;

        .title {
          width: 100px;
          text-align: right;
          margin-right: 10px;
        }
      }
      .againPass {
        margin: 24px 0 40px 0;
      }
    }
  }
}

/* // 日志列表弹窗 */
:deep(.logDialog) {
  /* // height: 600px; */
  overflow: hidden;
  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 {
    overflow: auto;
    padding: 0px 20px 10px 20px;

    .pageSize {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 30px;

      span {
        color: #000;
      }

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

        .el-pagination__goto {
          color: #000;
        }

        .el-pagination__classifier {
          color: #000;
        }

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

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

        .el-pager li.is-active {
          /* // background-color: rgba(111, 182, 184, 1); */
          border: 1px solid rgba(0, 97, 255, 1);
          color: rgba(0, 97, 255, 1);
          /* // border: 1px solid red; */
        }

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

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

    .logs {
      width: 96%;
      /* // height: 402px; */
      margin: 10px auto 20px;

      .el-table--fit {
        height: 100%;

        .el-table__header-wrapper {
          background-color: #000;
          font-size: 15px;

          tr {
            color: #000;
          }
        }

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

          .orderNum {
            color: rgba(111, 182, 184, 1);
            cursor: pointer;
          }
        }

        .el-table__row:nth-child(2n) {
          .el-table-fixed-column--right {
            background-color: rgba(240, 243, 247, 1);
          }
        }

        .el-table__row td {
          padding: 0;
          border: 0;
        }

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

        .el-table__body .even2 {
          background-color: #fff;
        }

        .el-table__body .odd2 {
          background-color: rgba(240, 243, 247, 1);
        }
      }
    }
  }
}
/* // 锁房弹窗 */
:deep(.lockRoomVialog) {
  /* // height: 600px; */
  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 {
    /* // overflow: auto; */
    padding: 20px 0 0 0;
    /* // padding: 0; */
    .roomChangeBody {
      margin: 0 20px 80px;
    }
    .roomChangeFooter {
      /* // height: 80px; */
      margin: 0 20px 0;
      padding: 15px 0 20px 0;
      border-top: 1px solid rgba(230, 230, 230, 1);
      .options {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        /* // margin: 30px 0 0 0; */
      }
    }
  }
}
/* // 批量置脏房 */
:deep(.dialogClean) {
  /* // height: 540px; */
  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;

    .trees {
      display: flex;
      justify-content: center;
      padding: 25px 0;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
    }

    .tree {
      .tree-left {
        width: 316px;
        height: 44px;
        background: rgba(240, 243, 247, 1);
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
    }

    .el-tree {
      width: 316px;
      height: 324px;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      padding-left: 9px;
      overflow: auto;
    }

    ul {
      width: 316px;
      height: 324px;
      list-style: none;
      padding: 0;
      margin: 0;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      overflow: auto;

      li {
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
        align-items: center;
        margin-top: 5px;

        .el-icon-close {
          cursor: pointer;
          width: 10px;
          height: 10px;
        }
      }
    }

    .options {
      width: 96%;
      display: flex;
      flex-direction: row-reverse;
      padding: 16px 0;

      .queding {
        margin-left: 20px;
        color: #fff;
      }
    }
  }
}
/* // 批量开关房 */
:deep(.roomCloseDilog) {
  /* // height: 540px; */
  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;

    /* // 上一步页面样式 */
    .first {
      .trees {
        display: flex;
        justify-content: center;
        padding: 25px 0;
        border-bottom: 1px solid #e9eaed;
      }

      .tree {
        .tree-left {
          width: 316px;
          height: 44px;
          background: rgba(240, 243, 247, 1);
          border: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          display: flex;
          align-items: center;
        }
      }

      .el-tree {
        width: 316px;
        height: 324px;
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        padding-left: 9px;
        overflow: auto;
      }

      ul {
        width: 316px;
        height: 324px;
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        overflow: auto;

        li {
          display: flex;
          justify-content: space-between;
          padding-right: 17px;
          align-items: center;
          margin-top: 5px;

          .el-icon-close {
            cursor: pointer;
            width: 10px;
            height: 10px;
          }
        }
      }
    }

    .options {
      width: 96%;
      display: flex;
      flex-direction: row-reverse;
      padding: 16px 0;

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

    /* // 下一步页面样式 */
    .last {
      .hint {
        background-color: #e6ecfa;
        border: 1px solid #053dc8;
        display: flex;
        align-items: center;
        padding: 6px 24px;
        color: #000;

        img {
          width: 16px;
          margin: 0 3px;
        }
      }

      .roomUl {
        display: flex;
        margin: 20px 0 0px;
        color: #000;

        /* // align-items: center; */
        .title {
          width: 100px;
          height: 40px;
          text-align: right;
          line-height: 40px;
          color: #000;
          margin-right: 15px;
        }

        .delRoom {
          ul {
            width: 560px;
            list-style: none;
            border: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;

            li {
              width: 160px;
              height: 40px;
              border: 1px solid #e0e0e0;
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin: 0 10px 10px 0;

              span {
                margin-right: 40px;
              }

              .del {
                width: 14px;
                height: 14px;
                background-image: url("@/assets/delete.png");
                background-size: 100%;
              }

              .del:hover {
                background-image: url("@/assets/delete_hover.png");
                cursor: pointer;
              }
            }
          }

          .el-radio-group {
            .el-radio__label {
              color: #000;
            }
          }
        }
      }

      .roomTime {
        margin: 10px 0;

        .delRoom {
          display: flex;
          align-items: center;
        }
      }

      .textarea {
        border-bottom: 1px solid #e9eaed;
        padding-bottom: 25px;

        .delRoom {
          width: 510px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
// 日历样式
.el-popper.is-light.calendarTimes {
  inset: 322px auto auto 259px !important;

  .el-popper__arrow {
    left: 95px !important;
  }
}
.roominfoPopper {
  background: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  .el-popper__arrow::before {
    background: rgba(0, 0, 0, 0.8) !important;
  }
}
.el-loading-mask {
  z-index: 9999999;
}
</style>