<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <div class="cameratxt">房态管理/房态管理</div>
    </div>
    <div class="middle">
      <div class="selDate">
        <!-- <el-radio-group @change="dateNumChange" v-model="dateNum">
          <el-radio-button label="日历" />
          <el-radio-button label="单日" />
        </el-radio-group> -->
        <span
          @click="dateNumChange('日历')"
          :class="dateNum == '日历' ? 'is_active' : ''"
          >日历</span
        >
        <span
          @click="dateNumChange('单日')"
          :class="dateNum == '单日' ? 'is_active' : ''"
          >单日</span
        >
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <el-dropdown>
          <el-button type="primary" color="rgba(9, 101, 98, 1)">
            <span>批量置脏/净</span></el-button
          >
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="clean(1)">批量置脏</el-dropdown-item>
              <el-dropdown-item @click="clean(2)">批量置净</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="clean"
          ><el-icon><CirclePlus /></el-icon><span>批量置脏/净</span></el-button
        > -->
        <!-- <el-button type="primary" color="rgba(9, 101, 98, 1)" @click="addlist"
          ><el-icon><CirclePlus /></el-icon><span>批量开/关房</span></el-button
        > -->
        <el-dropdown>
          <el-button type="primary" color="rgba(9, 101, 98, 1)">
            <span>批量开/关房</span></el-button
          >
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="roomClose(1)"
                >批量开房</el-dropdown-item
              >
              <el-dropdown-item @click="roomClose(2)"
                >批量关房</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 按钮列表 -->
    <div class="middle" v-show="dateNum == '单日'">
      <div class="gongneng">
        <div class="condition">
          <el-date-picker
            v-model="searchInput.createTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            :clearable="false"
            placeholder="请选择日期"
            @change="roomOneDateChange"
          />
        </div>
      </div>
    </div>
    <!-- 页面内容  日历-->
    <div class="footer" v-show="dateNum == '日历'">
      <el-table
        ref="tableScrollRef"
        :data="tableDate"
        style="width: 100%"
        v-loading="calendarLoading"
      >
        <!-- :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="date"
                  placeholder="Pick a Date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  popper-class="calendarTimes"
                  :clearable="false"
                  @change="changeCalendar"
                >
                </el-date-picker>
              </div>
            </div>
          </template>
          <el-table-column
            prop="houseName"
            align="center"
            label="房间类型"
            width="120"
          >
            <!-- <template #header>
              <div @click="roomFilter" style="cursor: pointer;">房间类型</div>
            </template> -->
          </el-table-column>
          <el-table-column
            prop="state"
            align="center"
            label="房间号"
            width="120"
          >
            <template #default="{ row }">
              <div class="roomNumber">
                <span>{{ row.numberName }}</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(9, 101, 98, 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>
              <!-- <span v-if="i.dateStr == nowdate" style="
                  display: inline-block;
                  background-color: rgba(9, 101, 98, 1);
                  color: #fff;
                  margin-left: 5px;
                  padding: 0 3px;
                  transform: scale(0.8);
                  border-radius: 2px;
                ">今</span> -->
            </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>补录</li> -->
                    <!-- <li @click="clickTable(row[i.dateStr], i.dateStr, 1)">
                      停用房
                    </li>
                    <li @click="clickTable(row[i.dateStr], i.dateStr, 2)">
                      维修房
                    </li>
                    <li @click="clickTable(row[i.dateStr], i.dateStr, 3)">
                      保留房
                    </li> -->
                    <li @click="closeRoom(row[i.dateStr], i.dateStr)">关房</li>
                    <!-- <li>
                      取消
                    </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 class="contentBodys" @click="roomOption(row)">
                  <img src="@/assets/blockUp.png" alt="" />
                  <span>停用</span>
                </div> -->
                <!-- <div class="contentBodys" @click="roomOption(row)">
                      <img src="@/assets/maintain.png" alt="" />
                      <span>维修</span>
                    </div> -->
                <!-- <div class="contentBodys" @click="roomOption(row)">
                      <img src="@/assets/retain.png" alt="" />
                      <span>报留</span>
                    </div> -->
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pageSize">
        <span></span>
        <el-pagination
          background
          :current-page="currentPageState"
          :page-size="pageSizeState"
          layout="total, prev, pager, next, jumper, slot"
          :total="totalState"
          @update:current-page="handleCurrentChangeState"
        />
      </div>
    </div>
    <!-- 页面内容  单日-->
    <div
      class="footer_oneday"
      v-if="dateNum == '单日'"
      v-loading="dateOneLoading"
    >
      <div class="roomType" v-for="item in dateOne">
        <div class="title">
          {{ item.hName }}<span>(共{{ item.number }}间)</span>
        </div>
        <div class="roomNum">
          <!-- <div
            class="roomOne"
            v-for="i in item.HouseNumberList"
            @click="roomOneOpen(i)"
          >
            <el-popover
              placement="right"
              :width="40"
              trigger="click"
              popper-class="roomOneOption"
              :visible="i.roomShow"
            >
              <template #reference>
                <div class="content">
                  {{ i.numberName }}
                </div>
              </template>
              <ul>
                <li>关房</li>
                <li>转脏房</li>
                <li @click="roomOneCencel(i)">取消</li>
              </ul>
            </el-popover>
          </div> -->
          <div class="roomOne" v-for="i in item.houseNumberList">
            <el-popover
              placement="right"
              trigger="click"
              popper-class="roomOneOption"
            >
              <!-- :visible="i.roomShow" -->
              <template #reference>
                <div class="content">
                  <div class="li">
                    <!-- 房间号 -->
                    <span>{{ i.numberName }} </span>
                    <!-- 房间状态 -->
                    <span class="status" v-if="i.houseStatus == 2">脏</span>
                  </div>
                  <!-- 房间类型 -->
                  <div class="li">{{ item.hName }}</div>
                  <!-- 入住状态房客信息 -->
                  <div v-if="i.houseNumberStatuses">
                    <div
                      class="li"
                      v-if="
                        i.houseNumberStatuses[0].status == 6 ||
                        i.houseNumberStatuses[0].status == 5
                      "
                    >
                      {{ i.houseNumberStatuses[0].orderUserName }}
                    </div>
                    <div
                      class="li"
                      v-if="
                        i.houseNumberStatuses[0].status == 6 ||
                        i.houseNumberStatuses[0].status == 5
                      "
                    >
                      {{ i.houseNumberStatuses[0].orderUserPhone }}
                    </div>
                  </div>
                  <div class="li">
                    <!-- 入住状态 -->
                    <div class="roomTypes" v-if="i.houseNumberStatuses">
                      <span
                        class="status statu"
                        v-if="i.houseNumberStatuses[0].status == 6"
                        >住</span
                      >
                      <span
                        class="status statu"
                        v-if="i.houseNumberStatuses[0].status == 5"
                        >预</span
                      >
                      <!-- 关房 停用房 -->
                      <span
                        class="status closeRoom"
                        v-if="
                          i.houseNumberStatuses[0].status == 2 &&
                          i.houseNumberStatuses[0].closeType == 1
                        "
                      >
                        <img src="@/assets/blockUp.png" alt="" />
                      </span>
                      <!-- 关房 维修房 -->
                      <span
                        class="status closeRoom"
                        v-if="
                          i.houseNumberStatuses[0].status == 2 &&
                          i.houseNumberStatuses[0].closeType == 2
                        "
                      >
                        <img src="@/assets/maintain.png" alt="" />
                      </span>
                      <!-- 关房 保留房 -->
                      <span
                        class="status closeRoom"
                        v-if="
                          i.houseNumberStatuses[0].status == 2 &&
                          i.houseNumberStatuses[0].closeType == 3
                        "
                      >
                        <img src="@/assets/retain.png" alt="" />
                      </span>
                    </div>
                  </div>
                </div>
              </template>
              <div class="roomOneInfo" v-if="i.houseNumberStatuses">
                <!-- 入住信息 -->
                <div
                  class="roomInfo"
                  v-if="i.houseNumberStatuses[0].status == 6"
                >
                  <div class="top">
                    <span>{{ i.numberName }}</span>
                    <div class="status">已入住</div>
                  </div>
                  <div class="bottom">
                    <div class="li">
                      {{ i.houseNumberStatuses[0].orderUserName }}&nbsp;{{
                        i.houseNumberStatuses[0].orderUserPhone
                      }}
                    </div>
                    <!-- <div class="li">08-11入住|08-12商店| 共1晚</div> -->
                    <div class="li">
                      入住日期 :{{ i.houseNumberStatuses[0].orderStartTime }}
                    </div>
                    <div class="li">
                      离店日期 :{{ i.houseNumberStatuses[0].orderEndTime }}
                    </div>
                    <div class="li">
                      订单号: {{ i.houseNumberStatuses[0].orderNum }}
                    </div>
                    <div class="li">
                      订单金额:￥ {{ i.houseNumberStatuses[0].orderPayAccount }}
                    </div>
                  </div>
                  <div class="el_btn">
                    <div
                      class="roomClose"
                      @click="dateOneClean(i, 1)"
                      v-if="i.houseStatus == 2"
                    >
                      转净房
                    </div>
                    <div
                      class="roomClose"
                      @click="dateOneClean(i, 2)"
                      v-if="i.houseStatus == 1"
                    >
                      转脏房
                    </div>
                    <!-- <div class="roomClose">关房</div> -->
                  </div>
                </div>
                <div
                  class="roomInfo"
                  v-if="i.houseNumberStatuses[0].status == 5"
                >
                  <div class="top">
                    <span>{{ i.numberName }}</span>
                    <div class="status">已预订</div>
                  </div>
                  <div class="bottom">
                    <div class="li">
                      {{ i.houseNumberStatuses[0].orderUserName }}&nbsp;{{
                        i.houseNumberStatuses[0].orderUserPhone
                      }}
                    </div>
                    <!-- <div class="li">08-11入住|08-12商店| 共1晚</div> -->
                    <div class="li">
                      {{ i.houseNumberStatuses[0].orderStartTime }}入住|
                    </div>
                    <div class="li">
                      {{ i.houseNumberStatuses[0].orderEndTime }}离开|
                    </div>
                    <div class="li">
                      订单号: {{ i.houseNumberStatuses[0].orderNum }}
                    </div>
                    <div class="li">
                      订单金额:￥ {{ i.houseNumberStatuses[0].orderPayAccount }}
                    </div>
                  </div>
                  <div class="el_btn">
                    <div
                      class="roomClose"
                      @click="dateOneClean(i, 1)"
                      v-if="i.houseStatus == 2"
                    >
                      转净房
                    </div>
                    <div
                      class="roomClose"
                      @click="dateOneClean(i, 2)"
                      v-if="i.houseStatus == 1"
                    >
                      转脏房
                    </div>
                    <!-- <div class="roomClose">关房</div> -->
                  </div>
                </div>
                <!-- 关房类型 -->
                <div
                  class="roomInfo"
                  v-if="i.houseNumberStatuses[0].status == 2"
                >
                  <div class="top">
                    <span>关房</span>
                    <!-- <span>{{ i.numberName }}</span> -->
                    <div
                      class="status"
                      style="background-color: #868585"
                      v-if="i.houseNumberStatuses[0].closeType == 1"
                    >
                      停用
                    </div>
                    <div
                      class="status"
                      style="background-color: #868585"
                      v-if="i.houseNumberStatuses[0].closeType == 2"
                    >
                      维修
                    </div>
                    <div
                      class="status"
                      style="background-color: #868585"
                      v-if="i.houseNumberStatuses[0].closeType == 3"
                    >
                      保留
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="li">
                      开始时间: {{ i.houseNumberStatuses[0].setDate }}
                    </div>
                    <div class="li">
                      结束时间: {{ i.houseNumberStatuses[0].setDate }}
                    </div>
                    <div class="li">
                      备注: {{ i.houseNumberStatuses[0].remark }}
                    </div>
                    <div class="el_btn">
                      <div class="roomClose" @click="dateOneOpenRoom(i)">
                        开房
                      </div>
                      <div
                        class="roomClose"
                        @click="dateOneClean(i, 1)"
                        v-if="i.houseStatus == 2"
                      >
                        转净房
                      </div>
                      <div
                        class="roomClose"
                        @click="dateOneClean(i, 2)"
                        v-if="i.houseStatus == 1"
                      >
                        转脏房
                      </div>
                      <!-- <div class="roomClose" @click="roomOneCencel(i)">
                        取消
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
              <div class="roomOneInfo" v-else>
                <!-- 普通类型 -->
                <div class="roomInfos">
                  <div class="bottom">
                    <div class="el_btn">
                      <!-- <div class="roomClose" @click="dateOneCloseRoom(i, 1)">
                        停用房
                      </div>
                      <div class="roomClose" @click="dateOneCloseRoom(i, 2)">
                        维修房
                      </div>
                      <div class="roomClose" @click="dateOneCloseRoom(i, 3)">
                        保留房
                      </div> -->
                      <div class="roomClose" @click="roomOneClose(i)">关房</div>
                      <div
                        class="roomClose"
                        @click="dateOneClean(i, 1)"
                        v-if="i.houseStatus == 2"
                      >
                        转净房
                      </div>
                      <div
                        class="roomClose"
                        @click="dateOneClean(i, 2)"
                        v-if="i.houseStatus == 1 || !i.houseStatus"
                      >
                        转脏房
                      </div>
                      <!-- <div class="roomClose" @click="roomOneCencel(i)">
                        取消
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>

    <!-- 置脏/净房 -->
    <el-dialog
      class="dialogClean"
      v-model="cleanDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="cleanTitle"
      align-center
      width="700"
      :before-close="cancelClean"
    >
      <div class="trees">
        <div class="tree">
          <div class="tree-left">
            <el-checkbox
              v-model="checked"
              style="margin-left: 15px"
              @change="chooseAll"
              >全选</el-checkbox
            >
            <span style="margin-left: 165px"
              >{{ count.length }} / {{ dataLength }}</span
            >
          </div>
          <el-tree
            :data="datas"
            show-checkbox
            node-key="id"
            ref="roomTree"
            :props="defaultProps"
            @check="checkRoom"
          ></el-tree>
        </div>
        <div class="tree">
          <div class="tree-left">
            <p style="margin-left: 15px">已选 ( {{ count.length }} )</p>
          </div>
          <ul
            class="infinite-list"
            style="overflow: auto"
            infinite-scroll-immediate="false"
          >
            <li
              v-for="(i, index) in count"
              :key="index"
              class="infinite-list-item"
            >
              <span style="margin-left: 19px">{{ i.label }}</span>
              <el-icon @click="cancelCheck(i)">
                <Close />
              </el-icon>
              <!-- <i class="el-icon-close" @click="cancelCheck(i)"></i> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="options">
        <el-button
          color="rgba(9, 101, 98, 1)"
          class="queding"
          type="primary"
          @click="notarizeClean(roomTree)"
        >
          确认
        </el-button>
        <el-button @click="cancelClean(roomTree)">取消</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>
                <!-- <i class="el-icon-close" @click="cancelCheck(i)"></i> -->
              </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="roomCloseDilogs"
      v-model="roomCloseOneDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="关房"
      align-center
      width="550"
      :before-close="roomCloseOneTitle"
    >
      <div class="last">
        <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">
          <div class="title">关房类型</div>
          <div class="delRooms">
            <el-radio-group v-model="roomcloseForm.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="roomcloseForm.textarea"
              :rows="3"
              type="textarea"
              placeholder="请输入内容 (选填)"
            />
          </div>
        </div>
        <div class="options">
          <el-button
            class="queding"
            color="rgba(9, 101, 98, 1)"
            @click="yesCloseRoom"
            >确认</el-button
          >
          <el-button @click="roomCloseOneTitle">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 表头房间筛选抽屉 -->
    <el-drawer
      class="roomDrawer"
      v-model="drawerRoom"
      :before-close="cancelDrawerRoom"
      title="房间筛选"
      :with-header="true"
    >
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="city in cities" :key="city" :label="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="resetRoomDrawer">重置</el-button>
          <el-button type="primary" @click="yesRoomDrawer">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper, slot"
      :total="total"
      @update:current-page="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  onMounted,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import lodash, { reduce, times } from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
// 选择日历还是单日
const dateNum = ref("日历");

// 单日数据（-----------------------------------）
const searchInput = reactive({ createTime: dayjs().format("YYYY-MM-DD") });
const dateOne = ref();
const dateOneLoading = ref(false);

// 控制房间筛选抽屉(--------------------------)
const drawerRoom = ref(false);
const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedCities = ref(["Shanghai", "Beijing"]);
const cities = ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"];

// 关房(单日和日历共用)
const roomCloseOneDialogVisible = ref(false);
const roomcloseForm = reactive({
  radio: "",
  textarea: "",
  date: "",
  numberId: "",
});

// 日历表格数据（--------------------------------------）
const tableDate = ref();
const tableScrollRef = ref();
const calendarLoading = ref(false);
const currentPageState = ref(1);
const pageSizeState = ref(1);
const totalState = ref(8);
// 日期和剩余房间
const dateTimes = ref([
  {
    dateStr: "2023-08-10",
    roomSum: "3",
  },
  {
    dateStr: "2023-08-11",
    roomSum: "3",
  },
  {
    dateStr: "2023-08-12",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-13",
    roomSum: "6",
  },
  {
    dateStr: "2023-08-14",
    roomSum: "2",
  },
  {
    dateStr: "2023-08-15",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-16",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-17",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-18",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-19",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-20",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-21",
    roomSum: "4",
  },
  {
    dateStr: "2023-08-22",
    roomSum: "4",
  },
]);
const tableBody = ref([
  {
    state: "111",
    name: "Tom",
    roomNum: "单人间",
    list: [
      {
        state: "101",
        data: "2023-08-10",
        roomNum: "单人间",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-11",
        roomNum: "单人间",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-12",
        roomNum: "单人间",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-13",
        roomNum: "单人间",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-14",
        roomNum: "单人间",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-15",
        roomNum: "单人间",
        money: 140,
      },
    ],
  },
  {
    state: "101",
    name: "Tom",
    roomNum: "大床房",
    list: [
      {
        state: "101",
        data: "2023-08-10",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-11",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-12",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-13",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-14",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-15",
        roomNum: "大床房",
        money: 140,
      },
    ],
  },
  {
    state: "102",
    name: "John",
    roomNum: "大床房",
    list: [
      {
        state: "101",
        data: "2023-08-10",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-11",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-12",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-13",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-14",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-15",
        roomNum: "大床房",
        money: 140,
      },
    ],
  },
  {
    state: "103",
    name: "Morgan",
    roomNum: "大床房",
    list: [
      {
        state: "101",
        data: "2023-08-10",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-11",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-12",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-13",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-14",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-15",
        roomNum: "大床房",
        money: 140,
      },
    ],
  },
  {
    state: "109",
    name: "Morgan",
    roomNum: "大床房",
    list: [
      {
        state: "101",
        data: "2023-08-10",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-11",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-12",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-13",
        roomNum: "大床房",
        money: 140,
      },
      {
        state: "101",
        data: "2023-08-14",
        roomNum: "大床房",
        money: 120,
      },
      {
        state: "101",
        data: "2023-08-15",
        roomNum: "大床房",
        money: 140,
      },
    ],
  },
  {
    state: "104",
    name: "Mfsdaf",
    roomNum: "双人间",
    list: [
      {
        state: "104",
        data: "2023-08-10",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-11",
        roomNum: "双人间",
        money: 130,
      },
      {
        state: "104",
        data: "2023-08-12",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-13",
        roomNum: "双人间",
        money: 130,
      },
      {
        state: "104",
        data: "2023-08-14",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-15",
        roomNum: "双人间",
        money: 130,
      },
    ],
  },
  {
    state: "105",
    name: "Mjgj",
    roomNum: "双人间",
    list: [
      {
        state: "104",
        data: "2023-08-10",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-11",
        roomNum: "双人间",
        money: 130,
      },
      {
        state: "104",
        data: "2023-08-12",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-13",
        roomNum: "双人间",
        money: 130,
      },
      {
        state: "104",
        data: "2023-08-14",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-15",
        roomNum: "双人间",
        money: 130,
      },
    ],
  },
  {
    state: "108",
    name: "Mjgj",
    roomNum: "双人间",
    list: [
      {
        state: "104",
        data: "2023-08-10",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-11",
        roomNum: "双人间",
        money: 130,
      },
      {
        state: "104",
        data: "2023-08-12",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-13",
        roomNum: "双人间",
        money: 130,
      },
      {
        state: "104",
        data: "2023-08-14",
        roomNum: "双人间",
        money: 120,
      },
      {
        state: "104",
        data: "2023-08-15",
        roomNum: "双人间",
        money: 130,
      },
    ],
  },
]);
const datePicker = ref([]);
const roomType = ref([
  // { roomNum: "单人间", scope: [] },
  // { roomNum: "大床房", scope: [] },
  // { roomNum: "双人间", scope: [] },
]);
// 选择日期数据
const timeRef = ref();
let nowdate = dayjs().format("YYYY-MM-DD");
const calendarTime = ref(nowdate); //日历绑定数据
const calendarDate = ref({
  date1: dayjs().format("MM/DD"),
  date2: dayjs(nowdate).add(28, "day").format("MM/DD"),
});
// 批量置净脏数据 (------------------------)
const cleanDialogVisible = ref(false);
const roomTree = ref();
const defaultProps = ref({
  label: "label",
  children: "children",
});
const count = ref([]); // 选中的全部数据
const cleanTitle = ref("");
const checked = ref(false);
const datas = ref([
  {
    id: 1,
    label: "大床房",
    children: [
      {
        id: 11,
        label: "11",
      },
      {
        id: 12,
        label: "12",
      },
      {
        id: 13,
        label: "13",
      },
      {
        id: 14,
        label: "14",
      },
    ],
  },
  {
    id: 2,
    label: "圆床房",
    children: [
      {
        id: 21,
        label: "21",
      },
      {
        id: 22,
        label: "22",
      },
      {
        id: 23,
        label: "23",
      },
      {
        id: 24,
        label: "24",
      },
      {
        id: 25,
        label: "25",
      },
      {
        id: 26,
        label: "26",
      },
      {
        id: 27,
        label: "27",
      },
      {
        id: 28,
        label: "28",
      },
    ],
  },
  {
    id: 3,
    label: "双人床",
    children: [
      {
        id: 31,
        label: "31",
      },
      {
        id: 32,
        label: "32",
      },
      {
        id: 33,
        label: "33",
      },
      {
        id: 34,
        label: "34",
      },
      {
        id: 35,
        label: "35",
      },
      {
        id: 36,
        label: "36",
      },
      {
        id: 37,
        label: "37",
      },
      {
        id: 38,
        label: "38",
      },
    ],
  },
]);
const dataLength = ref();

// 批量开关房数据 (------------------------)
const roomCloseDialogVisible = ref(false);
const roomCloseTree = ref();

const roomCloseCount = ref([]); // 选中的全部数据
const roomCloseTitle = ref("");
const roomCloseChecked = ref(false);
const roomCloseDatas = ref([
  {
    id: 1,
    label: "大床房",
    children: [
      {
        id: 11,
        label: "11",
      },
      {
        id: 12,
        label: "12",
      },
      {
        id: 13,
        label: "13",
      },
      {
        id: 14,
        label: "14",
      },
    ],
  },
  {
    id: 2,
    label: "圆床房",
    children: [
      {
        id: 21,
        label: "21",
      },
      {
        id: 22,
        label: "22",
      },
      {
        id: 23,
        label: "23",
      },
      {
        id: 24,
        label: "24",
      },
      {
        id: 25,
        label: "25",
      },
      {
        id: 26,
        label: "26",
      },
      {
        id: 27,
        label: "27",
      },
      {
        id: 28,
        label: "28",
      },
    ],
  },
  {
    id: 3,
    label: "双人床",
    children: [
      {
        id: 31,
        label: "31",
      },
      {
        id: 32,
        label: "32",
      },
      {
        id: 33,
        label: "33",
      },
      {
        id: 34,
        label: "34",
      },
      {
        id: 35,
        label: "35",
      },
      {
        id: 36,
        label: "36",
      },
      {
        id: 37,
        label: "37",
      },
      {
        id: 38,
        label: "38",
      },
    ],
  },
]);
const roomCloseDataLength = ref();
const firstShow = ref(false); // 判断是否为第一步操作
const lastShow = ref(false); // 判断是否为第二步操作
const lastData = ref({
  createTime: "",
  radio: "",
  textarea: "",
});

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数
const api = ref("");
const addDialogVisible = ref(false); // 控制添加员工弹窗

// 表单数据
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
  account: "",
  pass: "",
  phone: "",
  id: "",
});
// 表单验证
const rules = reactive({
  account: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  pass: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "用户名称不能为空",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "手机号码不能为空",
      trigger: "blur",
    },
  ],
});

watch(calendarTime, (newVal, oldVal) => {
  // console.log(newVal, oldVal);
  getList();
});
// 改变日历或者单日
const dateNumChange = (val) => {
  // console.log(val);
  if (val == dateNum.value) {
  } else {
    dateNum.value = val;
    getList();
  }
};
// 获取账户列表
const getList = async () => {
  calendarLoading.value = true;
  dateOneLoading.value = true;
  if (dateNum.value == "日历") {
    let data = {
      managerId: sessionStorage.getItem("token"), // 当前页
      showType: 1, // 房型关键字
      page: currentPageState.value,
      rows: pageSizeState.value,
    };
    if (calendarTime.value) {
      data.setDate = calendarTime.value;
    }
    let res = await axios({
      method: "get",
      url: api.value + "/mhotel/house/number/status/queryData.action",
      headers: {},
      params: data,
    });
    console.log(res, "日历房源数据");
    if (res.data.code == 200) {
      tableDate.value = res.data.data.pageList;
      totalState.value = res.data.data.total;

      // setTimeout(()=>{
      //   // tableDate.value = res.data.data.datas.slice(0, 10)
      //   tableDate.value = res.data.data.datas
      // },1000)
      res.data.data.dateTimes.forEach((item) => {
        item.week = item.weekStr.slice(2, 3);
        item.date = item.dateStr.slice(5);
      });
      dateTimes.value = res.data.data.dateTimes;
      calendarLoading.value = false;
      // for (let j = 0; j <= res.data.data.datas.length; j++) {
      //   if (j == 0) {
      //     roomType.value.push({
      //       houseName: res.data.data.datas[j].houseName,
      //       ind: j,
      //       scope: [],
      //     });
      //   } else {
      //     for (let i = 0; i < roomType.value.length; i++) {
      //       // console.log(item.houseName, roomType.value[i].houseName);
      //       // if (item.houseName == roomType.value[i].houseName) {
      //       //   return false;
      //       // } else {
      //       //   roomType.value.push({
      //       //     houseName: item.houseName,
      //       //     ind: index,
      //       //     scope: [],
      //       //   });
      //       //   return false;
      //       // }
      //     }
      //   }
      // }
    } else {
      calendarLoading.value = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
    // let arr = [];
    // arr = res.data.data.pageList.map((item) => {
    //   return {
    //     houseName: item.houseName,
    //     id: item.id,
    //     numberName: item.numberName,
    //     scope: [],
    //   };
    // });
    // let roomtype = [];
    // arr.reduce(function (prev, cur, index) {
    //   // console.log(prev, cur);
    //   if (prev) {
    //     roomtype.push({ ind: 0, scope: [], ...prev });
    //   } else {
    //     if (cur.houseName != roomtype[roomtype.length - 1].houseName) {
    //       roomtype.push({ ind: index, scope: [], ...cur });
    //     }
    //   }
    //   // return Math.max(prev, cur);
    // });
    // roomtype.forEach((item, index) => {
    //   tableDate.value.forEach((i, ind) => {
    //     if (item.houseName == i.houseName) {
    //       item.scope.push(ind);
    //     }
    //   });
    // });
    // console.log(roomtype);
    // roomType.value = roomtype;
  } else if ((dateNum.value = "单日")) {
    let data = {
      managerId: sessionStorage.getItem("token"), // 当前页
      showType: 2, // 房型关键字
    };
    if (searchInput.createTime) {
      data.setDate = searchInput.createTime;
    }
    let res = await axios({
      method: "get",
      url: api.value + "/mhotel/house/number/status/queryData.action",
      headers: {},
      params: data,
    });
    console.log(res, "单日房源数据");
    if (res.data.code == 200) {
      dateOneLoading.value = false;
      res.data.data.pageList.forEach((item) => {
        if (item.houseNumberList) {
          item.houseNumberList.forEach((i) => {
            i.roomShow = false;
          });
        }
      });
      dateOne.value = res.data.data.pageList;
    }

    // if (res.data.code == 200) {
    //   tableData.list = res.data.data.pageList;
    //   total.value = res.data.data.total;
    // } else {
    //   ElMessage({
    //     type: "error",
    //     showClose: true,
    //     message: res.data.message,
    //     center: true,
    //   });
    // }
  }
};
const tableScroll = (ele) => {
  // ele : 绑定的表格元素
  // console.log(ele.layout.table, "priceTable.value.bodyWrapper");
  let table = ele.layout.table.refs.bodyWrapper;
  table.addEventListener(
    "scroll",
    async (e) => {
      // if (tableScrollRef.value) {
      //   e.target.scrollTop = 0;
      //   // scrolltop8.value = false;
      //   console.log("置顶到顶部");
      // }
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let clientHeight = e.target.clientHeight;
      console.log(scrollTop, "scrollTop");
      console.log(scrollHeight, "scrollHeight");
      console.log(clientHeight);
      console.log(scrollTop + clientHeight);
      if (scrollTop + clientHeight == scrollHeight) {
        console.log("滚动到底部了");
        // calendarLoading.value = true;
        if (tableDate.value.length <= 10) {
          let data = {
            managerId: sessionStorage.getItem("token"), // 当前页
            showType: 1, // 房型关键字
          };
          if (calendarTime.value) {
            data.setDate = calendarTime.value;
          }
          let res = await axios({
            method: "get",
            url: api.value + "/mhotel/house/number/status/queryData.action",
            headers: {},
            params: data,
          });
          console.log(res, "日历房源数据");
          if (res.data.code == 200) {
            tableDate.value = res.data.data.datas;
            // calendarLoading.value = false;
          } else {
            // calendarLoading.value = false;
            ElMessage({
              type: "error",
              showClose: true,
              message: res.data.message,
              center: true,
            });
          }
          let arr = [];
          arr = res.data.data.datas.map((item) => {
            return {
              houseName: item.houseName,
              id: item.id,
              numberName: item.numberName,
              scope: [],
            };
          });
          let roomtype = [];
          arr.reduce(function (prev, cur, index) {
            // console.log(prev, cur);
            if (prev) {
              roomtype.push({ ind: 0, scope: [], ...prev });
            } else {
              if (cur.houseName != roomtype[roomtype.length - 1].houseName) {
                roomtype.push({ ind: index, scope: [], ...cur });
              }
            }
            // return Math.max(prev, cur);
          });
          roomtype.forEach((item, index) => {
            tableDate.value.forEach((i, ind) => {
              if (item.houseName == i.houseName) {
                item.scope.push(ind);
              }
            });
          });
          console.log(roomtype);
          roomType.value = roomtype;
        }
      }
    },
    true
  );
};

// 房间筛选(------------------------------------------)
const roomFilter = () => {
  console.log("房间筛选");
  drawerRoom.value = true;
};
// 取消房间筛选
const cancelDrawerRoom = () => {
  drawerRoom.value = false;
};
const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === cities.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};
// 重置房间选择
const resetRoomDrawer = () => {
  console.log("重置房间选择");
};
// 确认房间选择
const yesRoomDrawer = () => {
  console.log("确认房间选择");
  drawerRoom.value = false;
};

// 日历表头选择日期 (----------------------------------------)
// 弹窗日期选择框
const calendarClick = () => {
  timeRef.value.handleOpen();
};
// 改变日期组件
const changeCalendar = (val) => {
  console.log(val);
  calendarDate.value.date1 = dayjs(val).format("MM/DD");
  // console.log(calendarDate.value.date1, "日期被改变");
  calendarDate.value.date2 = dayjs(val).add(28, "day").format("MM/DD");
  // console.log(calendarDate.value.date2);
};
// 点击表头的今字实现定位当天日期
const nowDaySel = () => {
  let nowdate = dayjs().format("YYYY-MM-DD");
  // console.log(nowdate);
  changeCalendar(nowdate);
  calendarTime.value = nowdate;
};
// 点击房间号变净房（脏房）
const roomOption = async (row, index) => {
  console.log("点击房间号变净房（脏房", row);
  let data = {
    id: row.numberId,
    houseStatus: index,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/modifyHouseStatus.action",
    headers: {},
    data: data,
  });
  if (res.data.code == 200) {
    if (index == 1) {
      ElMessage({
        type: "success",
        showClose: true,
        message: "转净房成功",
        center: true,
      });
    } else if (index == 2) {
      ElMessage({
        type: "success",
        showClose: true,
        message: "转脏房成功",
        center: true,
      });
    }
    getList();
  }
  console.log(res, "置净成功");
};

// 合并表格 （--------------------------------------------)
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];
        }
      }
    }
  }
};
// 转 1停用房 2维修房 3保留房（-------------------------------）
const clickTable = async (row, date, index) => {
  console.log(row, date, index);
  const formData = new FormData();
  formData.set("numberId", row.numberId);
  formData.set("status", 2);
  formData.set("setDate", date);
  formData.set("closeType", index);
  formData.set("remark", "关房");
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/status/modifyStatus.action",
    headers: {},
    data: formData,
  });
  console.log(res, "关房成功");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: "关房成功",
      center: true,
    });
  }
};
// 关房弹窗(---------------------------------)
// 关房按钮(日历)
const closeRoom = (row, date) => {
  console.log(row, date);
  roomCloseOneDialogVisible.value = true;
  roomcloseForm.numberId = row.numberId;
  roomcloseForm.date = date;
};
// 关房按钮（单日）
const roomOneClose = (row) => {
  roomCloseOneDialogVisible.value = true;
  console.log(row);
  roomcloseForm.numberId = row.id;
  roomcloseForm.date = searchInput.createTime;
};
// 取消关房弹窗
const roomCloseOneTitle = () => {
  roomCloseOneDialogVisible.value = false;
  roomcloseForm.radio = "";
  roomcloseForm.textarea = "";
  roomcloseForm.date = "";
  roomcloseForm.numberId = "";
};
// 确定关房
const yesCloseRoom = async () => {
  const formData = new FormData();
  formData.set("numberId", roomcloseForm.numberId);
  formData.set("status", 2);
  formData.set("setDate", roomcloseForm.date);
  formData.set("closeType", roomcloseForm.radio);
  formData.set("remark", roomcloseForm.textarea);
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/status/modifyStatus.action",
    headers: {},
    data: formData,
  });
  console.log(res, "关房成功");
  if (res.data.code == 200) {
    getList();
    roomCloseOneDialogVisible.value = false;
    roomcloseForm.radio = "";
    roomcloseForm.textarea = "";
    roomcloseForm.date = "";
    roomcloseForm.numberId = "";
    ElMessage({
      type: "success",
      showClose: true,
      message: "关房成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 开房
const openRoom = async (row, date) => {
  console.log(row, date);
  const formData = new FormData();
  formData.set("numberId", row.numberId);
  formData.set("status", 0);
  formData.set("setDate", date);
  formData.set("remark", "关房");
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/status/modifyStatus.action",
    headers: {},
    data: formData,
  });
  console.log(res, "开房成功");
  getList();
};

// 批量置净脏房 (--------------------------------------)
const clean = async (flag) => {
  if (flag == 1) {
    cleanTitle.value = "批量置脏";
    datas.value = [];
    let data = {
      managerId: sessionStorage.getItem("token"), // 当前页
      status: 1,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/mhotel/house/number/status/queryListWithHouse.action",
      headers: {},
      params: data,
    });
    console.log(res, "批量置脏房数据");
    if (res.data.code == 200) {
      res.data.data.forEach((item) => {
        let data = {
          id: "",
          label: "",
          children: [],
        };
        data.id = item.id;
        data.label = item.hName;
        if (item.houseNumberList) {
          item.houseNumberList.forEach((i) => {
            data.children.push({ id: i.id, label: i.numberName });
          });
        }
        datas.value.push(data);
      });
      cleanDialogVisible.value = true;
      dataLength.value = 0;
      datas.value.forEach((item) => {
        dataLength.value = dataLength.value + item.children.length;
      });
    }
  } else {
    cleanTitle.value = "批量置净";
    datas.value = [];
    let data = {
      managerId: sessionStorage.getItem("token"), // 当前页
      status: 2,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/mhotel/house/number/status/queryListWithHouse.action",
      headers: {},
      params: data,
    });
    console.log(res, "批量置净房数据");
    res.data.data.forEach((item) => {
      // console.log(item);
      let data = {
        id: "",
        label: "",
        children: [],
      };
      data.id = item.id;
      data.label = item.hName;
      if (item.houseNumberList) {
        item.houseNumberList.forEach((i) => {
          data.children.push({ id: i.id, label: i.numberName });
        });
      }
      datas.value.push(data);
    });
    cleanDialogVisible.value = true;
    dataLength.value = 0;
    datas.value.forEach((item) => {
      dataLength.value = dataLength.value + item.children.length;
    });
  }
};
// 关闭置净脏房
const cancelClean = () => {
  cleanDialogVisible.value = false;
  roomTree.value.setCheckedNodes([]);
  count.value = [];
  checked.value = false;
};
// 确定批量置脏
const notarizeClean = async () => {
  if (cleanTitle.value == "批量置脏") {
    let ids = [];
    count.value.forEach((i) => {
      ids.push(i.id);
    });
    let data = {
      houseStatus: 2,
      // createId: sessionStorage.getItem("roomId"),
      idList: ids,
    };
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/house/number/modifyHouseStatus.action",
      headers: {},
      data: data,
    });
    console.log(res, "确定批量置脏房");
    if (res.data.code == 200) {
      getList();
      cleanDialogVisible.value = false;
      roomTree.value.setCheckedNodes([]);
      count.value = [];
      checked.value = false;
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (cleanTitle.value == "批量置净") {
    let ids = [];
    count.value.forEach((i) => {
      ids.push(i.id);
    });
    let data = {
      houseStatus: 1,
      // createId: sessionStorage.getItem("roomId"),
      idList: ids,
    };
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/house/number/modifyHouseStatus.action",
      headers: {},
      data: data,
    });
    console.log(res, "确定批量置净房");
    if (res.data.code == 200) {
      getList();
      cleanDialogVisible.value = false;
      roomTree.value.setCheckedNodes([]);
      count.value = [];
      checked.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,
      });
    }
  }
};
// 全选床型
const chooseAll = () => {
  count.value = [];
  if (checked.value) {
    // console.log(data.value);
    let children = [];
    datas.value.forEach((item) => {
      // console.log(item);
      item.children.forEach((i) => {
        count.value.push(i);
        children.push(i);
      });
    });
    roomTree.value.setCheckedNodes(children);
  } else {
    roomTree.value.setCheckedNodes([]);
    count.value = [];
  }
};
// 勾选房间
const checkRoom = (data, nodes) => {
  // console.log(nodes);
  count.value = [];
  // 选中勾选的房间赋值给count
  nodes.checkedNodes.forEach((item, index) => {
    if (!item.children) {
      // console.log(item);
      count.value.push(item);
    }
  });
  // 判断勾选的房间数量和总数量是否相等
  if (dataLength.value == count.value.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
  console.log(count.value);
};
// 取消选中房间
const cancelCheck = (i) => {
  // console.log(i);
  count.value = count.value.filter((item) => {
    return i.id != item.id;
  });
  // 判断勾选的房间数量和总数量是否相等;
  if (dataLength.value == count.value.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
  roomTree.value.setCheckedNodes(count.value);
  console.log(count.value);
};

// 批量开关房 (--------------------------------------)
const roomClose = async (flag) => {
  roomCloseCount.value = [];
  roomCloseDatas.value = [];
  let data = {
    managerId: sessionStorage.getItem("token"), // 当前页
    // status: 1,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/mhotel/house/number/status/queryListWithHouse.action",
    headers: {},
    params: data,
  });
  console.log(res, "批量置脏房数据");
  if (res.data.code == 200) {
    res.data.data.forEach((item) => {
      let data = {
        id: "",
        label: "",
        children: [],
      };
      data.id = item.id;
      data.label = item.hName;
      if (item.houseNumberList) {
        item.houseNumberList.forEach((i) => {
          data.children.push({ id: i.id, label: i.numberName });
        });
      }
      roomCloseDatas.value.push(data);
    });
    roomCloseDialogVisible.value = true;
    roomCloseDataLength.value = 0;
    roomCloseDatas.value.forEach((item) => {
      roomCloseDataLength.value =
        roomCloseDataLength.value + item.children.length;
    });
  }
  if (flag == 1) {
    roomCloseTitle.value = "批量开房";
  } else {
    roomCloseTitle.value = "批量关房";
  }
  roomCloseDialogVisible.value = true;
  firstShow.value = true;
  lastShow.value = false;
  roomCloseDataLength.value = 0;
  roomCloseDatas.value.forEach((item) => {
    roomCloseDataLength.value =
      roomCloseDataLength.value + item.children.length;
  });
};
// 关闭开关房间
const cancelRoomClose = () => {
  roomCloseDialogVisible.value = false;
  firstShow.value = false;
  lastShow.value = false;
  roomCloseTree.value.setCheckedNodes([]);
  roomCloseCount.value = [];
  roomCloseChecked.value = false;
};
// 全选房间
const chooseAllRoomClose = () => {
  roomCloseCount.value = [];
  if (roomCloseChecked.value) {
    // console.log(data.value);
    let children = [];
    roomCloseDatas.value.forEach((item) => {
      // console.log(item);
      item.children.forEach((i) => {
        roomCloseCount.value.push(i);
        children.push(i);
      });
    });
    roomCloseTree.value.setCheckedNodes(children);
  } else {
    roomCloseTree.value.setCheckedNodes([]);
    roomCloseCount.value = [];
  }
};
// 勾选房间
const checkRoomClose = (data, nodes) => {
  // console.log(data, nodes);
  roomCloseCount.value = [];
  // 选中勾选的房间赋值给count
  nodes.checkedNodes.forEach((item, index) => {
    if (!item.children) {
      // console.log(item);
      roomCloseCount.value.push(item);
    }
  });
  // 判断勾选的房间数量和总数量是否相等
  if (roomCloseDataLength.value == roomCloseCount.value.length) {
    roomCloseChecked.value = true;
  } else {
    roomCloseChecked.value = false;
  }
  console.log(roomCloseCount.value);
};
// 取消选中房间
const cancelCheckRoomClose = (i) => {
  console.log(i);
  roomCloseCount.value = roomCloseCount.value.filter((item) => {
    return i.id != item.id;
  });
  // 判断勾选的房间数量和总数量是否相等
  if (roomCloseDataLength.value == roomCloseCount.value.length) {
    roomCloseChecked.value = true;
  } else {
    roomCloseChecked.value = false;
  }
  roomCloseTree.value.setCheckedNodes(roomCloseCount.value);
  // console.log(count.value);
};
// 点击批量开关房下一步
const lastStep = () => {
  firstShow.value = false;
  lastShow.value = true;
};
// 点击批量开关房上一步
const firstStep = () => {
  firstShow.value = true;
  lastShow.value = false;
};
// 点击批量开关房中删除房间
const closeRoomDel = (i) => {
  console.log(i);
  roomCloseCount.value = roomCloseCount.value.filter((item) => {
    console.log(item);
    return i.id != item.id;
  });
  roomCloseTree.value.setCheckedNodes(roomCloseCount.value);
};
// 确认开关房
const notarizeRoomClose = async () => {
  if (roomCloseTitle.value == "批量开房") {
    let ids = [];
    roomCloseCount.value.forEach((i) => {
      ids.push(i.id);
    });
    let data = {
      status: 0,
      houseNumberIds: ids,
      setDate: lastData.value.createTime.join(","),
      remark: lastData.value.textarea,
    };
    console.log(data);
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/house/number/status/modifyStatusBatch.action",
      headers: {},
      data: data,
    });
    console.log(res, "确定批量开房");
    if (res.data.code == 200) {
      getList();
      roomCloseDialogVisible.value = false;
      roomCloseTree.value.setCheckedNodes([]);
      roomCloseCount.value = [];
      roomCloseChecked.value = false;
      lastData.value.createTime = "";
      lastData.value.radio = "";
      lastData.value.textarea = "";
      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 (roomCloseTitle.value == "批量关房") {
    let ids = [];
    roomCloseCount.value.forEach((i) => {
      ids.push(i.id);
    });
    let data = {
      status: 2,
      houseNumberIds: ids,
      createId: sessionStorage.getItem("roomId"),
      closeType: lastData.value.radio,
      setDate: lastData.value.createTime.join(","),
      remark: lastData.value.textarea,
    };
    console.log(data);
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/house/number/status/modifyStatusBatch.action",
      headers: {},
      data: data,
    });
    console.log(res, "确定批量开房");
    if (res.data.code == 200) {
      getList();
      roomCloseDialogVisible.value = false;
      roomCloseTree.value.setCheckedNodes([]);
      roomCloseCount.value = [];
      roomCloseChecked.value = false;
      lastData.value.createTime = "";
      lastData.value.radio = "";
      lastData.value.textarea = "";
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 单独开关房(-------------------------------------------------------)
// const roomClose = async (flag) => {
//   roomCloseCount.value = [];
//   roomCloseDatas.value = [];
//   let data = {
//     managerId: sessionStorage.getItem("token"), // 当前页
//     // status: 1,
//   };
//   let res = await axios({
//     method: "get",
//     url: api.value + "/mhotel/house/number/status/queryListWithHouse.action",
//     headers: {},
//     params: data,
//   });
//   console.log(res, "批量置脏房数据");
//   if (res.data.code == 200) {
//     res.data.data.forEach((item) => {
//       let data = {
//         id: "",
//         label: "",
//         children: [],
//       };
//       data.id = item.id;
//       data.label = item.hName;
//       if (item.houseNumberList) {
//         item.houseNumberList.forEach((i) => {
//           data.children.push({ id: i.id, label: i.numberName });
//         });
//       }
//       roomCloseDatas.value.push(data);
//     });
//     roomCloseDialogVisible.value = true;
//     roomCloseDataLength.value = 0;
//     roomCloseDatas.value.forEach((item) => {
//       roomCloseDataLength.value =
//         roomCloseDataLength.value + item.children.length;
//     });
//   }
//   if (flag == 1) {
//     roomCloseTitle.value = "批量开房";
//   } else {
//     roomCloseTitle.value = "批量关房";
//   }
//   roomCloseDialogVisible.value = true;
//   firstShow.value = true;
//   lastShow.value = false;
//   roomCloseDataLength.value = 0;
//   roomCloseDatas.value.forEach((item) => {
//     roomCloseDataLength.value =
//       roomCloseDataLength.value + item.children.length;
//   });
// };
// 关闭开关房间
const cancelRoomOneClose = () => {
  roomCloseDialogVisible.value = false;
  firstShow.value = false;
  lastShow.value = false;
  roomCloseTree.value.setCheckedNodes([]);
  roomCloseCount.value = [];
  roomCloseChecked.value = false;
};

//导出功能
const importExcel = async () => {
  if (searchInput.createTime == null) {
    searchInput.createTime = "";
  }
  let data = new FormData();
  data.set("number", searchInput.carnumber);
  data.set("create_time", searchInput.createTime);
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/admintoExcel.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    data: data,
  });
  // console.log(res, "导出账号");
  if (res.data.code == 200) {
    // const elt = document.createElement("a");
    // elt.setAttribute(
    //   "href",
    //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
    // );
    // // elt.setAttribute("download", "file.xlsx");
    // // elt.style.display = "none";
    // document.body.appendChild(elt);
    var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
    console.log("获得地址数据:", downloadPath);
    var downloadLink = document.createElement("a");
    downloadLink.style.display = "none"; // 使其隐藏
    downloadLink.href = downloadPath;
    downloadLink.download = "";
    downloadLink.click();
    document.body.appendChild(downloadLink);
    document.body.removeChild(downloadLink);
    elt.click();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 添加员工
const addlist = () => {
  dialongTitle.value = "新增账号";
  addDialogVisible.value = true;
  ruleForm.name = "";
  ruleForm.account = "";
  ruleForm.pass = "";
  ruleForm.phone = "";
};
// 取消添加员工
const cancelAdd = () => {
  addDialogVisible.value = false;
  ruleFormRef.value.resetFields();
};
//编辑按钮
const edit = (row) => {
  dialongTitle.value = "编辑信息";
  addDialogVisible.value = true;
  console.log(row);
  ruleForm.pass = row.password;
  ruleForm.phone = row.phone;
  ruleForm.name = row.username;
  ruleForm.account = row.account;
  ruleForm.id = row.id;
};
// 确认添加员工
const submitAdd = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (dialongTitle.value == "新增账号") {
        let data = {
          username: ruleForm.name,
          account: ruleForm.account,
          password: ruleForm.pass,
          phone: ruleForm.phone,
        };
        let res = await axios({
          method: "post",
          url: api.value + "/repairAdmin/insertRepairAdmin",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "添加账号");
        if (res.data.code == 200) {
          getList();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          ruleFormRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        let data = {
          username: ruleForm.name,
          phone: ruleForm.phone,
          id: ruleForm.id,
        };
        let res = await axios({
          method: "post",
          url: api.value + "/repairAdmin/updateRepairAdminById",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        // console.log(res, "修改账号");
        if (res.data.code == 200) {
          getList();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          ruleFormRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

//删除按钮
const del = async (row) => {
  console.log(row);
  let data = {
    id: row.id,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairAdmin/deleteRepairAdminById",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  if (res.data.code == 200) {
    if (tableData.list.length == 1 && currentPage.value != 1) {
      currentPage.value = currentPage.value - 1;
    }
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  console.log(res);
};
// 取消删除
const cancelEvent = () => {
  ElMessage({
    type: "info",
    showClose: true,
    message: "取消删除",
    center: true,
  });
};

// 单日（------------------------------------------------------）
// 改变单日日期
const roomOneDateChange = (val) => {
  console.log(val);
  searchInput.createTime = val;
  getList();
};
// 关房按钮
const dateOneCloseRoom = async (i, index) => {
  // console.log(i);
  const formData = new FormData();
  formData.set("numberId", i.id);
  formData.set("status", 2);
  formData.set("setDate", searchInput.createTime);
  formData.set("closeType", index);
  formData.set("remark", "关房");
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/status/modifyStatus.action",
    headers: {},
    data: formData,
  });
  console.log(res, "关房成功");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: "关房成功",
      center: true,
    });
  }
};

// 开房按钮
const dateOneOpenRoom = async (i) => {
  console.log(i);
  const formData = new FormData();
  formData.set("numberId", i.houseNumberStatuses[0].numberId);
  formData.set("status", 0);
  formData.set("setDate", i.houseNumberStatuses[0].setDate);
  formData.set("remark", "关房");
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/status/modifyStatus.action",
    headers: {},
    data: formData,
  });
  console.log(res);
  if (res.data.code == 200) {
    // i.roomShow = false;
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      // message: res.data.message,
      message: "开房成功",
      center: true,
    });
  }
};
// 转脏房 净房
const dateOneClean = async (i, index) => {
  console.log(i, index);
  let data = {
    id: i.id,
    houseStatus: index,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/house/number/modifyHouseStatus.action",
    headers: {},
    data: data,
  });
  if (res.data.code == 200) {
    if (index == 1) {
      ElMessage({
        type: "success",
        showClose: true,
        message: "转净房成功",
        center: true,
      });
    } else if (index == 2) {
      ElMessage({
        type: "success",
        showClose: true,
        message: "转脏房成功",
        center: true,
      });
    }
    getList();
  }
  console.log(res, "置净脏成功");
};
// // 点击打开
// const roomOneOpen = (i) => {
//   console.log(i);
//   if (i.roomShow) {
//     i.roomShow = false;
//   } else {
//     i.roomShow = true;
//   }
// };
// // 取消点击
// const roomOneCencel = (i) => {
//   i.roomShow = false;
// };

// 表格斑马纹颜色修改
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();
};
// 房态分页
const handleCurrentChangeState = (value) => {
  // console.log(value);
  currentPageState.value = value;
  getList();
};

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

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 240px);
  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);

    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;

    .cameratxt {
      display: flex;
      align-items: center;
      height: 60px;
    }
  }

  .middle {
    width: 96%;
    margin: 0 auto;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .el-radio-group {
      .el-radio-button.is-active {
        :deep(.el-radio-button__inner) {
          background-color: rgba(9, 101, 98, 1);
          border: 1px solid rgba(9, 101, 98, 1);
          box-shadow: none;
        }
      }
    }

    .selDate {
      span {
        // background-color: rgba(9, 101, 98, 1);
        border: 1px solid rgba(9, 101, 98, 1);
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
      }

      .is_active {
        background-color: rgba(9, 101, 98, 1);
        color: #fff;
      }
    }

    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 20px 0 0 0;

      .search {
        margin-left: 0 !important;
        color: #fff;
      }

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

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

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

    .gongneng {
      margin: 10px 0;
      display: flex;
      justify-content: flex-end;

      .el-dropdown {
        margin: 5px 0 0 20px;
      }
    }

    :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 {
    width: 96%;
    // height: 600px;
    height: calc(100% - 118px);
    overflow: auto;
    margin: 10px auto 10px;

    .el-table--fit {
      height: calc(100% - 60px);

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

        // 日历
        .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(9, 101, 98, 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);
        }

        // 房间清扫图标
        .cell {
          .roomNumber {
            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(9, 101, 98, 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_oneday {
    color: #000;
    width: 96%;
    // height: 630px;
    overflow: auto;
    margin: 0 auto;

    .roomType {
      // border: 1px solid red;
      .title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 600;
        margin: 10px 0;

        span {
          color: #696969;
          font-size: 14px;
          margin-left: 10px;
          font-weight: 400;
        }
      }

      .roomNum {
        display: flex;
        flex-wrap: wrap;

        .roomOne {
          border-radius: 4px;
          background: rgba(240, 243, 247, 1);
          margin: 0 20px 20px 0;

          .content {
            width: 200px;
            height: 120px;
            opacity: 1;
            position: relative;

            .li {
              margin: 5px 0 0 0;
              padding: 0 13px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .status {
                background-color: rgb(132, 0, 255);
                color: #fff;
                font-size: 14px;
                padding: 0 3px;
                transform: scale(0.7);
                // background-color: rgb(217, 0, 27);
              }

              .statu {
                // background-color: rgb(132, 0, 255);
                background-color: rgb(217, 0, 27);
              }

              .closeRoom {
                background-color: rgba(240, 243, 247, 1);

                img {
                  width: 20px;
                }
              }

              .roomTypes {
                position: absolute;
                bottom: 3px;
                right: 10px;
              }
            }
          }
        }
      }
    }
  }

  // 批量置脏房
  :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;
          }
        }
      }
    }
  }

  // 开关房
  :deep(.roomCloseDilogs) {
    // 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;

      .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: 80px;
            height: 40px;
            text-align: right;
            line-height: 40px;
            color: #000;
            margin-right: 15px;
          }

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

          .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: 400px;
          }
        }
      }
    }
  }

  .el-pagination {
    // width: 1600px;
    width: 96%;
    margin: 20px auto 0px;
    justify-content: flex-end;

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

  // 房间筛选抽屉
  :deep(.roomDrawer) {
    // border: 1px solid red;
    .el-drawer__header {
      color: #000;
      margin-bottom: 0;
      padding: 16px 20px;
      border-bottom: 1px solid #e0e0e0;

      .el-drawer__close-btn {
        outline: 0;
        padding: 0;
      }
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

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

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

  .el-popper__arrow {
    left: 95px !important;
  }
}

// 操作房间  保留房  开房
.el-popper.is-light.roomOption {
  min-width: 80px !important;
  width: 80px !important;
  padding: 0 !important;
  background-color: rgba(77, 77, 77, 1);

  ul {
    list-style: none;
    padding: 0;
    margin: 6px 0;

    li {
      padding: 4px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }

    li:hover {
      background-color: #222121;
      border-radius: 4px;
    }
  }

  .el-popper__arrow::before {
    background-color: rgba(77, 77, 77, 1);
  }

  .popover {
    .roomInfo {
      width: 300px;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

      .top {
        height: 40px;
        background-color: rgb(242, 243, 246);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;

        .status {
          background-color: rgb(5, 61, 200);
          color: #fff;
          padding: 1px 5px;
        }
      }

      .bottom {
        .li {
          // padding: 20px 15px 0 15px;
          width: 94%;
          height: 35px;
          line-height: 35px;
          margin: 0 auto;
          // padding: 0 10px;
        }
      }

      .el_btn {
        .roomClose {
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-top: 1px solid rgb(226, 226, 226);
          cursor: pointer;
          color: rgb(93, 129, 219);
        }

        .roomClose:hover {
          background-color: rgb(237, 239, 247);
        }
      }
    }
  }
}

// 单日操作 开房  净房
.el-popper.is-light.roomOneOption {
  min-width: 100px !important;
  max-width: 300px !important;
  width: 100px !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none;

  .roomOneInfo {
    .roomInfo {
      width: 300px;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

      .top {
        height: 40px;
        background-color: rgb(242, 243, 246);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;

        .status {
          background-color: rgb(5, 61, 200);
          color: #fff;
          padding: 1px 5px;
        }
      }

      .bottom {
        .li {
          // padding: 20px 15px 0 15px;
          width: 100%;
          height: 35px;
          line-height: 35px;
          padding: 0 10px;
        }
      }

      .el_btn {
        .roomClose {
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-top: 1px solid rgb(226, 226, 226);
          cursor: pointer;
          color: rgb(93, 129, 219);
        }

        .roomClose:hover {
          background-color: rgb(237, 239, 247);
        }
      }
    }
  }

  .roomOneInfo {
    width: 100px;

    .roomInfos {
      width: 100px;
      background-color: #fff;
      border: 1px solid #e4e7ed;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

      .bottom {
        .li {
          // padding: 20px 15px 0 15px;
          width: 100%;
          height: 35px;
          line-height: 35px;
          padding: 0 10px;
        }
      }

      .el_btn {
        width: 100px;
        overflow: hidden;

        .roomClose {
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-top: 1px solid rgb(226, 226, 226);
          cursor: pointer;
          color: rgb(93, 129, 219);
        }

        .roomClose:hover {
          background-color: rgb(237, 239, 247);
        }
      }
    }
  }

  // .el-popper__arrow::before {
  //   background-color: rgba(77, 77, 77, 1);
  // }
}
</style>
