hotel-saas-tenant-frontend/src/views/room/fangtailive.vue

<template>
  <a-card :bordered="false">
    <a-tabs v-model="activeKey" type="card" @change="tabsClick">
      <a-tab-pane key="1" tab="实时房态"> </a-tab-pane>
      <a-tab-pane key="2" tab="日历房态"> </a-tab-pane>
      <a-tab-pane key="3" tab="客单"> </a-tab-pane>
      <a-tab-pane key="4" tab="远期房态"> </a-tab-pane>
      <a-tab-pane key="5" tab="物品租借"> </a-tab-pane>
      <a-tab-pane key="6" tab="客人留言"> </a-tab-pane>
      <a-tab-pane key="7" tab="客人物品管理"> </a-tab-pane>
    </a-tabs>

    <div
      v-if="activeKey === '1'"
      style="display: flex; height: calc(100vh - 240px)"
    >
      <div style="width: 80%" class="course-week">
        <div style="display: flex; flex-direction: column">
          <div style="display: flex; gap: 5px; flex-flow: wrap">
            <a-dropdown :disabled="scheduleBtnDis">
              <a-menu slot="overlay" @click="scheduleClick">
                <a-menu-item key="1"> 散客预定 </a-menu-item>
                <a-menu-item key="2"> 团队预定</a-menu-item>
              </a-menu>
              <a-button type="danger"> 预定 <a-icon type="down" /> </a-button>
            </a-dropdown>
            <a-dropdown :disabled="checkInBtnDis">
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1"> 散客入住 </a-menu-item>
                <a-menu-item key="2"> 团队入住</a-menu-item>
              </a-menu>
              <a-button type="danger">
                入住 <a-icon type="down" />
              </a-button> </a-dropdown
            ><a-button
              style="margin-bottom: 10px"
              @click="handleClean"
              :disabled="cleanDisabled"
              type="danger"
              >置干净</a-button
            ><a-button
              style="margin-bottom: 10px"
              @click="handleDirty"
              type="danger"
              :disabled="dirtyDisabled"
              >置脏</a-button
            >
            <a-button
              v-if="wxCompleteBtn"
              style="margin-bottom: 10px"
              @click="handleCompleteRepair"
              type="danger"
              >完成维修</a-button
            >
            <a-button
              v-else
              style="margin-bottom: 10px"
              @click="handleWx"
              :disabled="lockDisabled"
              type="danger"
              >置维修</a-button
            >
            <a-button
              v-if="offLockBtn"
              style="margin-bottom: 10px"
              @click="handleOffLock"
              type="danger"
              >解锁</a-button
            ><a-button
              v-else
              style="margin-bottom: 10px"
              @click="handleLock"
              :disabled="lockDisabled"
              type="danger"
              >锁房</a-button
            >
            <a-button
              disabled
              style="margin-bottom: 10px"
              @click="handleAdd"
              type="danger"
              >联房</a-button
            ><a-button
              disabled
              style="margin-bottom: 10px"
              @click="handleAdd"
              type="danger"
              >批量制卡</a-button
            >
            <!-- <a-button style="margin-bottom: 10px" @click="toPage" type="danger"
              >查询散客详单</a-button
            >
            <a-button
              style="margin-bottom: 10px"
              @click="toTeamPage"
              type="danger"
              >查询团队详单</a-button
            > -->
          </div>
          <div class="week-top">
            <div class="w-choose-status">
              <div v-for="sta in roomStatusColorList">
                <span class="square" :style="{ background: sta.extend }"></span>
                <span class="title">{{ sta.title }}</span>
              </div>
            </div>
            <div class="w-choose-status">
              批量操作<a-switch
                v-model="multipleRoom"
                @change="multipleRoomChange"
              />
            </div>
          </div>
        </div>
        <div class="week-table" style="overflow: hidden auto">
          <div id="components-grid-demo-playground" class="w-time-period-list">
            <div
              v-for="(period, cIndex) in roomList"
              :key="`period${cIndex}`"
              style="padding: 5px"
            >
              <p>
                <span style="color: rgba(0, 186, 173, 1); font-weight: 600">
                  {{ period.buildingName }}{{ period.name }}
                </span>
                <a-divider type="vertical" />
                <span style="padding-right: 5px"
                  >{{ period.rooms.length }}间：在住{{
                    checkInCount(period.rooms)
                  }}间/空置{{ vacantCount(period.rooms) }}间</span
                >
                <a-icon
                  type="right"
                  v-if="period.collapse == 0"
                  @click="collapseClick(period, 1)"
                />
                <a-icon type="down" v-else @click="collapseClick(period, 0)" />
              </p>

              <a-row :gutter="[5, 5]" v-show="period.collapse == 1">
                <a-col
                  v-for="(roomLive, roomLiveIndex) in period.rooms"
                  :key="`period${cIndex}roomLive${roomLiveIndex}`"
                  :span="3"
                  @click.stop="roomItemClick(roomLive)"
                  @dblclick.stop="handleBillInfo(roomLive)"
                >
                  <!-- <div class="post-mark"></div> -->

                  <div
                    class="room-item"
                    :style="{
                      background:
                        roomStatusColorList && roomStatusColorList.length > 0
                          ? getRoomStatusColor(roomLive.roomInfo.roomStatus)
                          : '',
                    }"
                  >
                    <div
                      class="select-cell"
                      v-if="roomLive.roomInfo.state == 88"
                    >
                      <a-icon
                        type="check-circle"
                        theme="twoTone"
                        two-tone-color="#52c41a"
                        style="font-size: 40px"
                      />
                    </div>
                    <a-popover placement="rightTop">
                      <template
                        slot="content"
                        v-if="
                          roomLive.livingData && roomLive.livingData.livingOrder
                        "
                      >
                        <p>
                          入住:{{ roomLive.livingData.livingOrder.arrivalTime }}
                        </p>
                        <p>
                          预离:{{ roomLive.livingData.livingOrder.dueOutTime }}
                        </p>
                        <p>
                          已住:{{ roomLive.livingData.livingOrder.liveDayCount }}晚 已付：{{ roomLive.livingData.livingOrder.shouKuan }}元
                        </p>
                        <!-- <p>来源:{{ roomLive.detail.mobile }} 消费：300元</p> -->
                        <p>
                          房价:{{
                            roomLive.livingData.price &&
                            roomLive.livingData.price.length > 0
                              ? roomLive.livingData.price[0].price
                              : 0
                          }}/晚 余额：{{ (roomLive.livingData.livingOrder.shouKuan - roomLive.livingData.livingOrder.xiaoFei) }}
                          <!-- {{ roomLive.detail.balance }} -->
                        </p>
                        <p>
                          来源:{{
                            getCustomerSourceList(
                              roomLive.livingData.livingOrder.customerSource
                            )
                          }}
                        </p>
                        <p>注:{{ roomLive.livingData.livingOrder.remark }}</p>
                      </template>
                      <template
                        slot="title"
                        v-if="
                          roomLive.livingData && roomLive.livingData.livingOrder
                        "
                      >
                        <p>
                          客人姓名:{{
                            roomLive.livingData.livingCustomers
                              ? roomLive.livingData.livingCustomers.customerName
                              : ""
                          }}
                          性别：{{
                            roomLive.livingData.livingCustomers
                              ? roomLive.livingData.livingCustomers.gender == 1
                                ? "男"
                                : "女"
                              : ""
                          }}
                        </p>
                        <p>
                          手机号:{{
                            roomLive.livingData.livingCustomers
                              ? roomLive.livingData.livingCustomers.phone
                              : ""
                          }}
                        </p>
                        <!-- <p>同住人:{{ roomLive.detail.mobile }} 性别：女</p> -->
                      </template>
                      <template
                        slot="content"
                        v-if="
                          !roomLive.livingData ||
                          !roomLive.livingData.livingOrder
                        "
                      >
                        <p>
                          房态：{{
                            getRoomStatusName(roomLive.roomInfo.roomStatus)
                          }}
                        </p>
                        <p
                          v-if="
                            roomLive.bookingData &&
                            roomLive.bookingData.bookingCustomer
                          "
                        >
                          预定人：{{
                            roomLive.bookingData.bookingCustomer.name
                          }}
                        </p>
                        <p
                          v-if="
                            roomLive.bookingData &&
                            roomLive.bookingData.bookingCustomer
                          "
                        >
                          手机：{{ roomLive.bookingData.bookingCustomer.phone }}
                        </p>
                        <p
                          v-if="
                            roomLive.bookingData &&
                            roomLive.bookingData.bookingOrder
                          "
                        >
                          预抵日：{{
                            roomLive.bookingData.bookingOrder.arrivalTime
                          }}
                        </p>
                        <!-- <p>
                          备注：{{ roomLive.livingData.livingOrder.remark }}
                        </p> -->
                      </template>
                      <template
                        slot="title"
                        v-if="
                          !roomLive.livingData ||
                          !roomLive.livingData.livingOrder
                        "
                      >
                        <span>{{ roomLive.layout.name }}</span
                        ><span>￥{{ roomLive.layout.marketPrice }}/晚</span>
                      </template>
                      <a-dropdown :trigger="['contextmenu']">
                        <div style="height: 100%">
                          <div
                            style="
                              text-overflow: ellipsis;
                              white-space: nowrap;
                              overflow: hidden;
                            "
                          >
                            <span
                              style="
                                font-size: 20px;
                                font-weight: 600;
                                margin-right: 2px;
                              "
                              >{{ roomLive.roomInfo.name }}</span
                            >
                            {{ roomLive.layout.name }}
                          </div>
                          <template
                            v-if="
                              roomLive.livingData &&
                              roomLive.livingData.livingOrder
                            "
                          >
                            <!-- <div>
                              <span style="margin-right: 5px">{{
                                roomLive.detail.occupant
                              }}</span
                              ><a-tag
                                :style="{
                                  color:
                                    sourceType[roomLive.detail.source || 1]
                                      .color,
                                }"
                                >携</a-tag
                              >
                            </div> -->
                            <div>
                              <span>
                                {{
                                  roomLive.livingData.livingCustomers
                                    .customerName
                                }}
                                <a-tag
                                  color="pink"
                                  v-if="
                                    roomLive.livingData.livingOrder
                                      .vipCustomerId
                                  "
                                >
                                  vip
                                </a-tag>
                              </span>
                            </div>
                            <div>
                              <span
                                >{{
                                  roomLive.livingData.livingOrder.liveDayCount
                                }}天/{{
                                  roomLive.livingData.livingOrder.arrivalTime.substr(
                                    5,
                                    5
                                  )
                                }}</span
                              >
                            </div>
                            <div
                              style="
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                              "
                            >
                              <!-- <span
                                >￥{{ roomLive.detail.amout }}/付{{
                                  roomLive.detail.payAmount
                                }}/余{{ roomLive.detail.balance }}</span
                              > -->
                              <span
                                >￥{{
                                  roomLive.livingData.price &&
                                  roomLive.livingData.price.length > 0
                                    ? roomLive.livingData.price[0].price
                                    : 0
                                }}/付{{
                                  roomLive.livingData && roomLive.livingData.livingOrder ?
                                  roomLive.livingData.livingOrder.shouKuan:0
                                }}/余{{ 
                                  roomLive.livingData && roomLive.livingData.livingOrder ?
                                  (roomLive.livingData.livingOrder.shouKuan - roomLive.livingData.livingOrder.xiaoFei):0
                                }}</span
                              >
                            </div>
                            <a-tag color="blue" v-if="
                              roomLive.livingData && roomLive.livingData.livingOrder 
                              && ((roomLive.livingData.livingOrder.shouKuan - roomLive.livingData.livingOrder.xiaoFei) < 0)
                            ">欠</a-tag>
                            <a-tag
                              color="blue"
                              v-if="
                                roomLive.livingData &&
                                roomLive.livingData.livingOrder &&
                                roomLive.livingData.livingOrder.livingType == 2
                              "
                              >钟</a-tag
                            >
                            <a-tag
                              color="blue"
                              v-if="
                                roomLive.livingData &&
                                roomLive.livingData.livingOrder &&
                                roomLive.livingData.livingOrder.isTeam
                              "
                              >团</a-tag
                            ><a-tag
                              color="blue"
                              v-if="
                                roomLive.livingData &&
                                roomLive.livingData.livingOrder &&
                                roomLive.livingData.livingOrder.dueOutTime ==
                                  currentDate
                              "
                              >离</a-tag
                            >
                            <a-tag color="blue">{{
                              getCustomerSourceList(
                                roomLive.livingData.livingOrder.customerSource,
                                true
                              )
                            }}</a-tag>
                          </template>
                          <template v-else>
                            <div>
                              <span
                                >￥{{ roomLive.layout.marketPrice }}/晚</span
                              >
                            </div>
                            <div>
                              <span
                                v-if="
                                  roomLive.bookingData &&
                                  roomLive.bookingData.bookingOrder &&
                                  roomLive.bookingData.bookingCustomer
                                "
                              >
                                {{ roomLive.bookingData.bookingCustomer.name }}
                              </span>
                            </div>
                            <div>
                              <span
                                v-if="
                                  roomLive.bookingData &&
                                  roomLive.bookingData.bookingOrder
                                "
                              >
                                {{
                                  roomLive.bookingData.bookingOrder.dayCount
                                }}天/{{
                                  roomLive.bookingData.bookingOrder.arrivalTime.substr(
                                    5,
                                    5
                                  )
                                }}
                              </span>
                            </div>
                            <!-- <div
                              style="
                                margin-top: 22px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                              "
                            >
                              <span
                                >注:{{
                                  roomLive.livingData.livingOrder.remark
                                }}</span
                              >
                            </div> -->
                            <a-tag
                              v-if="
                                roomLive.bookingData &&
                                roomLive.bookingData.bookingOrder
                              "
                              >订</a-tag
                            >
                          </template>
                        </div>
                        <a-menu
                          slot="overlay"
                          @click="(e) => onMenuClick(e, roomLive)"
                        >
                          <a-menu-item
                            key="1"
                            v-if="
                              !roomLive.livingData ||
                              !roomLive.livingData.livingOrder
                            "
                          >
                            入住
                          </a-menu-item>
                          <a-menu-item
                            key="2"
                            v-if="
                              !roomLive.livingData ||
                              !roomLive.livingData.livingOrder
                            "
                          >
                            预定</a-menu-item
                          >
                          <a-menu-item
                            key="31"
                            v-if="roomLive.roomInfo.roomStatus === 2"
                          >
                            置干净
                          </a-menu-item>
                          <a-menu-item key="3" v-else> 置脏 </a-menu-item>
                          <a-menu-item
                            key="41"
                            v-if="roomLive.roomInfo.roomStatus === 5"
                          >
                            完成维修
                          </a-menu-item>
                          <a-menu-item key="4" v-else> 置维修 </a-menu-item>
                          <a-menu-item
                            key="51"
                            v-if="roomLive.roomInfo.roomStatus === 6"
                          >
                            解锁
                          </a-menu-item>
                          <a-menu-item key="5" v-else> 锁房 </a-menu-item>

                          <template v-if="roomLive.roomInfo.roomStatus === 3 || roomLive.roomInfo.roomStatus === 4">
                            <a-menu-item key="6"> 详单 </a-menu-item>

                            <a-menu-item key="7"> 账单 </a-menu-item>

                            <a-menu-item key="8"> 查房 </a-menu-item>

                            <a-menu-item key="9"> 入账 </a-menu-item>

                            <a-menu-item key="10"> 续租/提前 </a-menu-item>

                            <a-menu-item key="11"> 制房卡 </a-menu-item>

                            <a-menu-item key="12"> 注销房卡 </a-menu-item>

                            <a-menu-item key="13"> 换房 </a-menu-item>

                            <a-menu-item key="14"> 合并联房 </a-menu-item>

                            <a-menu-item key="15"> 添加同住 </a-menu-item>

                            <a-menu-item key="16"> 结账退房 </a-menu-item>

                            <a-menu-item key="17"> 撤销入住 </a-menu-item>
                          </template>
                          

                          <a-menu-item key="18"> 日志 </a-menu-item>
                        </a-menu>
                      </a-dropdown>
                    </a-popover>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 1%"></div>
      <div style="width: 19%; overflow: hidden auto">
        <div>
          <a-input-search
            style="width: 100%; margin-bottom: 8px"
            placeholder="房间号/姓名/手机号/身份证号"
            enter-button="搜索"
            v-model="keyWord"
            type="danger"
            @search="checkChange"
          />
        </div>
        <p style="font-size: 16px; font-weight: 600; color: rgb(0, 186, 173)">
          按楼层
        </p>
        <a-tree-select
          style="width: 100%"
          v-model="checkedroomBuildingFloorList"
          :tree-data="roomBuildingFloorTree"
          tree-checkable
          :show-checked-strategy="SHOW_PARENT"
          :replaceFields="{
            children: 'children',
            title: 'name',
            key: 'id',
            value: 'id',
          }"
          @change="checkChange"
        />
        <p
          style="
            font-size: 16px;
            font-weight: 600;
            color: rgb(0, 186, 173);
            margin-top: 10px;
          "
        >
          按房态
        </p>
        <a-checkbox-group
          v-model="checkedRoomStatusList"
          :options="roomStatusList"
          @change="checkChange"
        >
        </a-checkbox-group>
        <p
          style="
            font-size: 16px;
            font-weight: 600;
            color: rgb(0, 186, 173);
            margin-top: 10px;
          "
        >
          按来源
        </p>
        <a-checkbox-group
          v-model="checkedCustomerSourceList"
          :options="customerSourceList"
          @change="checkChange"
        >
        </a-checkbox-group>
        <p
          style="
            font-size: 16px;
            font-weight: 600;
            color: rgb(0, 186, 173);
            margin-top: 10px;
          "
        >
          按房型
        </p>
        <a-checkbox-group
          v-model="checkedCesRoomLayoutList"
          :options="cesRoomLayoutList"
          @change="checkChange"
        >
        </a-checkbox-group>
      </div>
    </div>
    <template v-else-if="activeKey === '2'">
      <calendarfangtai> </calendarfangtai>
    </template>
    <template v-else-if="activeKey === '3'">
      <guestorders></guestorders>
    </template>
    <template v-else-if="activeKey === '4'">
      <forwardfangtai></forwardfangtai>
    </template>
    <template v-else-if="activeKey === '5'">
      <leasegoods></leasegoods>
    </template>
    <template v-else-if="activeKey === '6'">
      <membermessage></membermessage>
    </template>
    <template v-else-if="activeKey === '7'">
      <membergoodsmanage></membergoodsmanage>
    </template>
    <upkeep-room-modal ref="modalForm" @ok="modalWxFormOk"></upkeep-room-modal>
    <bill-room-info-modal
      ref="ModalBillRoomInfo"
      @ok="modalLockRoomFormOk"
    ></bill-room-info-modal>
    <bill-room-form-modal
      ref="ModalBillRoomForm"
      @ok="modalBillRoomFormOk"
    ></bill-room-form-modal>
    <schedule-room-modal
      ref="ModalScheduleRoom"
      @ok="modalFormOk"
    ></schedule-room-modal>
    <schedule-team-room-modal
      ref="ModalScheduleTeamRoom"
      @ok="modalTeamFormOk"
    ></schedule-team-room-modal>
    <edit-schedule-room-modal
      ref="ModalEditScheduleRoom"
      @ok="modalFormOk"
    ></edit-schedule-room-modal>
    <lock-room-modal
      ref="ModalLockRoom"
      @ok="modalLockRoomFormOk"
    ></lock-room-modal>
    <clean-room-modal
      ref="ModalCleanRoom"
      @ok="modalLockRoomFormOk"
    ></clean-room-modal>
  </a-card>
</template>

<script>
import "@/assets/less/TableExpand.less";
// import { mixinDevice } from "@/utils/mixin";
// import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { httpAction, getAction, postAction } from "@/api/manage";
import UpkeepRoomModal from "./modules/upkeep/UpkeepRoomModal.vue";
import BillRoomInfoModal from "./modules/checkIn/BillRoomInfoModal.vue";
import BillRoomFormModal from "./modules/checkIn/BillRoomFormModal.vue";
import ScheduleRoomModal from "./modules/schedule/ScheduleRoomModal.vue";
import ScheduleTeamRoomModal from "./modules/scheduleTeam/ScheduleRoomModal.vue";
import EditScheduleRoomModal from "./modules/schedule/EditScheduleRoomModal.vue";
import LockRoomModal from "./modules/lock/LockRoomModal.vue";
import CleanRoomModal from "./modules/clean/CleanRoomModal.vue";
import calendarfangtai from "./calendarfangtai";
import forwardfangtai from "./forwardfangtai";
import guestorders from "./guestorders";
import leasegoods from "./leasegoods";
import membermessage from "./membermessage";
import membergoodsmanage from "./membergoodsmanage";
import { TreeSelect } from "ant-design-vue";
import moment from "moment";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

export default {
  name: "BusMeetingRoomList",
  // mixins: [JeecgListMixin, mixinDevice],
  components: {
    UpkeepRoomModal,
    BillRoomInfoModal,
    BillRoomFormModal,
    ScheduleRoomModal,
    ScheduleTeamRoomModal,
    EditScheduleRoomModal,
    calendarfangtai,
    guestorders,
    forwardfangtai,
    leasegoods,
    membermessage,
    membergoodsmanage,
    LockRoomModal,
    CleanRoomModal,
  },
  data() {
    return {
      currentDate: moment(new Date()).format("YYYY-MM-DD"),
      activeKey: "1",
      timeId: null,
      multipleRoom: false,
      keyWord: "",
      checkedroomBuildingFloorList: [],
      SHOW_PARENT,
      cardStatus: {
        0: {
          title: "空净",
          color: "rgba(67, 207, 124, 1)",
        },
        1: {
          title: "在住",
          color: "#00a0e9",
        },
        2: {
          title: "今日预离",
          color: "rgba(10, 122, 114, 1)",
        },
        3: {
          title: "欠费",
          color: "rgba(172, 51, 193, 1)",
        },
        4: {
          title: "锁房/脏房",
          color: "rgba(128, 128, 128, 1)",
        },
      },
      sourceType: {
        0: {
          title: "美团",
          color: "rgba(67, 207, 124, 1)",
        },
        1: {
          title: "携程",
          color: "#00a0e9",
        },
        2: {
          title: "飞猪",
          color: "rgba(10, 122, 114, 1)",
        },
        3: {
          title: "去哪儿",
          color: "rgba(172, 51, 193, 1)",
        },
        4: {
          title: "同程艺龙",
          color: "rgba(128, 128, 128, 1)",
        },
        5: {
          title: "微信订房",
          color: "rgba(128, 128, 128, 1)",
        },
      },
      startDate: "",
      endDate: "",
      customerSourceList: [],
      checkedCustomerSourceList: [],
      cesRoomLayoutList: [],
      checkedCesRoomLayoutList: [],
      roomBuildingFloorTree: [],
      roomStatusColorList: [],
      roomList: [],
      oldRoomList: [],
      roomStatusList: [],
      checkedRoomStatusList: [],
      scheduleBtnDis: false,
      checkInBtnDis: false,
    };
  },
  watch: {
    activeKey(key) {
      console.log("activeKey", key);
    },
  },
  computed: {
    lockDisabled() {
      return !this.roomList.some((t) =>
        t.rooms.some((c) => c.roomInfo.state === 88)
      );
    },
    offLockBtn() {
      return this.roomList.some((t) =>
        t.rooms.some(
          (c) => c.roomInfo.state === 88 && c.roomInfo.roomStatus === 6
        )
      );
    },
    wxCompleteBtn() {
      return this.roomList.some((t) =>
        t.rooms.some(
          (c) => c.roomInfo.state === 88 && c.roomInfo.roomStatus === 5
        )
      );
    },
    cleanDisabled() {
      return !this.roomList.some((t) =>
        t.rooms.some(
          (c) =>
            c.roomInfo.state === 88 &&
            (c.roomInfo.roomStatus === 2 || c.roomInfo.roomStatus === 4)
        )
      );
    },
    dirtyDisabled() {
      return !this.roomList.some((t) =>
        t.rooms.some(
          (c) =>
            c.roomInfo.state === 88 &&
            (c.roomInfo.roomStatus === 1 || c.roomInfo.roomStatus === 3)
        )
      );
    },
  },
  created() {
    // 禁用右键
    // document.oncontextmenu = new Function("event.returnValue=false");
    var _info = JSON.parse(localStorage.getItem("storeInfo"));
    // if (_info) {
    //   this.model.hotelId = _info.id;
    // }
    getAction("/business/busDictItem/list", {
      hotelId: _info.id,
      dictId: "1639538915239743490",
    }).then((res) => {
      if (res.success) {
        var list = [];
        res.result.records.forEach((item) => {
          list.push({ label: item.itemText, value: item.id });
        });
        this.customerSourceList = list;
      }
    });
    getAction("/rooms/cesRoomLayout/list", {
      pageSize: 99999,
      pageNo: 1,
    }).then((res) => {
      if (res.success) {
        var list = [];
        res.result.records.forEach((item) => {
          list.push({ label: item.name, value: item.id });
        });
        this.cesRoomLayoutList = list;
      }
    });
    getAction("/rooms/cesRoomBuildingFloor/tree", {}).then((res) => {
      if (res.success) {
        this.roomBuildingFloorTree = res.result;
      }
    });
    getAction("/rooms/cesRooms/room-status-color", {}).then((res) => {
      if (res.success) {
        this.roomStatusColorList = res.result;
        var list = [];
        res.result.forEach((item) => {
          list.push({ label: item.title, value: item.value });
        });
        this.roomStatusList = list;
      }
    });
    this.loadData();
  },
  mounted() {
    // this.handleBillInfo();
    // this.handleCheckInAdd()
    // this.$refs.ModalScheduleRoom.addList([]);
    //   this.$refs.ModalScheduleRoom.title = "预定登记";
    //   this.$refs.ModalScheduleRoom.disableSubmit = false;
    // this.$refs.ModalScheduleTeamRoom.addList([]);
    //   this.$refs.ModalScheduleTeamRoom.title = "团队预定登记";
    //   this.$refs.ModalScheduleTeamRoom.disableSubmit = false;
    // this.$refs.ModalEditScheduleRoom.addList([]);
    // this.$refs.ModalEditScheduleRoom.title = "详单";
    // this.$refs.ModalEditScheduleRoom.disableSubmit = false;
  },
  methods: {
    moment,
    getCustomerSourceList(customerSource, first) {
      var find = this.customerSourceList.find((t) => t.value == customerSource);
      if (find) {
        return first ? find.label.substr(0, 1) : find.label;
      }
      return "";
    },
    checkInCount(rooms) {
      return rooms.filter((t) => t.livingData && t.livingData.livingOrder)
        .length;
    },
    vacantCount(rooms) {
      return rooms.filter((t) => !t.livingData || !t.livingData.livingOrder)
        .length;
    },
    tabsClick(e) {
      if (e == "1") {
        this.loadData();
      }
    },
    getRoomStatusColor(roomStatus) {
      var find = this.roomStatusColorList.find((t) => t.value == roomStatus);
      return find ? find.extend : "";
    },
    getRoomStatusName(roomStatus) {
      var find = this.roomStatusList.find((t) => t.value == roomStatus);
      return find ? find.label : "";
    },
    toPage() {
      this.$router.push({
        // path: "/room/scheduledetail",
        // query: { id: "YD20230331112026203" },
        name: "room-scheduledetail",
        params: { id: "YD20230331112026203" },
      });
    },
    toTeamPage() {
      this.$router.push({
        // path: "/room/scheduleteamdetail",
        // query: { id: "YD20230403170240075" },
        name: "room-scheduleteamdetail",
        params: { id: "YD20230403170240075" },
      });
    },
    addScheduleTeam() {
      this.$refs.ModalScheduleTeamRoom.addList([]);
      this.$refs.ModalScheduleTeamRoom.title = "团队预定登记";
      this.$refs.ModalScheduleTeamRoom.disableSubmit = false;
    },
    scheduleClick(e) {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            c.roomInfo.marketPrice = c.layout.marketPrice;
            selectRoom.push(c.roomInfo);
          }
        });
      });
      this.$refs.ModalScheduleRoom.addList(selectRoom, e.key);
      this.$refs.ModalScheduleRoom.title =
        e.key == "1" ? "散客预定登记" : "团队预定登记";
      this.$refs.ModalScheduleRoom.disableSubmit = false;
    },
    handleMenuClick(e) {
      console.log("click", e);
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            c.roomInfo.marketPrice = c.layout.marketPrice;
            selectRoom.push(c.roomInfo);
          }
        });
      });
      this.$refs.ModalBillRoomForm.addList(selectRoom, e.key);
      this.$refs.ModalBillRoomForm.title =
        e.key == "1" ? "散客入住登记" : "团队入住登记";
      this.$refs.ModalBillRoomForm.disableSubmit = false;
    },
    roomItemClick(roomLive) {
      // 清除上一次的定时器
      if (this.timeId) {
        clearTimeout(this.timeId);
      }
      this.timeId = setTimeout(() => {
        if (!this.multipleRoom && roomLive.roomInfo.state !== 88) {
          this.roomList.forEach((item) => {
            item.rooms.forEach((c) => {
              if (c.roomInfo.state === 88) {
                c.roomInfo.state = 0;
              }
            });
          });
        }

        if (roomLive.roomInfo.state !== 88) {
          roomLive.roomInfo.state = 88;

          if (roomLive.livingData && roomLive.livingData.livingOrder) {
            this.checkInBtnDis = true;
          } else {
            this.checkInBtnDis = false;
          }

          if (
            (roomLive.livingData && roomLive.livingData.livingOrder) ||
            (roomLive.bookingData && roomLive.bookingData.bookingOrder)
          ) {
            this.scheduleBtnDis = true;
          } else {
            this.scheduleBtnDis = false;
          }
        } else {
          roomLive.roomInfo.state = 0;
        }
        if (this.multipleRoom) {
          this.checkInBtnDis = false;
          this.scheduleBtnDis = false;
          this.roomList.forEach((item) => {
            item.rooms.forEach((c) => {
              if (c.roomInfo.state === 88) {
                if (!this.checkInBtnDis) {
                  if (c.livingData && c.livingData.livingOrder) {
                    this.checkInBtnDis = true;
                  } else {
                    this.checkInBtnDis = false;
                  }
                }
                if (!this.scheduleBtnDis) {
                  if (
                    (c.livingData && c.livingData.livingOrder) ||
                    (c.bookingData && c.bookingData.bookingOrder)
                  ) {
                    this.scheduleBtnDis = true;
                  } else {
                    this.scheduleBtnDis = false;
                  }
                }
              }
            });
          });
        }
        // 清除定时器
        clearTimeout(this.timeId);
      }, 200);
    },
    handleBillInfo(roomLive) {
      console.log("handleBillInfo", roomLive);
      if (this.timeId) {
        clearTimeout(this.timeId);
      }
      if (!roomLive.livingData || !roomLive.livingData.livingOrder) {
        if (!roomLive.bookingData || !roomLive.bookingData.bookingOrder) {
          this.handleCheckInAdd(roomLive);
        } else {
          this.$router.push({
            name: "room-scheduledetail",
            params: { id: roomLive.bookingData.bookingOrder.bookingOrdersNo },
          });
        }
      } else {
        this.$refs.ModalBillRoomInfo.add(
          roomLive.livingData.livingOrder.bookingOrderId,
          1
        );
        this.$refs.ModalBillRoomInfo.title = "账单";
        this.$refs.ModalBillRoomInfo.disableSubmit = true;
      }
      roomLive.roomInfo.state = 0;
    },
    handleCheckInAdd(roomLive) {
      if (this.timeId) {
        clearTimeout(this.timeId);
      }
      roomLive.roomInfo.marketPrice = roomLive.layout.marketPrice;
      this.$refs.ModalBillRoomForm.addList([roomLive.roomInfo], 1);
      this.$refs.ModalBillRoomForm.title = "散客入住登记";
      this.$refs.ModalBillRoomForm.disableSubmit = false;
    },
    multipleRoomChange() {
      this.roomList.forEach((item) => {
        item.rooms.forEach((c) => {
          if (c.roomInfo.state == 88) {
            c.roomInfo.state = 0;
          }
        });
      });
    },
    onChange() {},
    onCheck(value, label, extra) {
      console.log("onCheck", value);
      console.log(
        "checkedroomBuildingFloorList",
        this.checkedroomBuildingFloorList
      );
    },
    checkChange(e) {
      console.log("e", e);
      console.log(
        "checkedroomBuildingFloorList",
        this.checkedroomBuildingFloorList
      );
      var list = this.oldRoomList;
      if (this.checkedCesRoomLayoutList.length > 0) {
        list = this.oldRoomList.reduce((acc, curr) => {
          const rooms = curr.rooms.filter((room) =>
            this.checkedCesRoomLayoutList.includes(room.layout.id)
          );
          acc.push({ ...curr, rooms });
          return acc;
        }, []);
      }
      if (this.checkedRoomStatusList.length > 0) {
        list = list.reduce((acc, curr) => {
          const rooms = curr.rooms.filter((room) =>
            this.checkedRoomStatusList.includes(
              room.roomInfo.roomStatus.toString()
            )
          );
          acc.push({ ...curr, rooms });
          return acc;
        }, []);
      }
      if (this.checkedCustomerSourceList.length > 0) {
        list = list.reduce((acc, curr) => {
          const rooms = curr.rooms.filter((room) =>
            room.livingData && room.livingData.livingOrder
              ? this.checkedCustomerSourceList.includes(
                  room.livingData.livingOrder.customerSource
                )
              : room.bookingData && room.bookingData.bookingOrder
              ? this.checkedCustomerSourceList.includes(
                  room.bookingData.bookingOrder.customerSource
                )
              : false
          );
          acc.push({ ...curr, rooms });
          return acc;
        }, []);
      }
      if (this.checkedroomBuildingFloorList.length > 0) {
        list = list.filter(
          (item) =>
            this.checkedroomBuildingFloorList.includes(item.buildingId) ||
            this.checkedroomBuildingFloorList.includes(item.id)
        );
      }
      if (this.keyWord) {
        //房号/姓名/手机号搜索
        list = list.reduce((acc, curr) => {
          const rooms = curr.rooms.filter(
            (room) =>
              room.roomInfo.name == this.keyWord ||
              (room.livingData && room.livingData.livingCustomers
                ? room.livingData.livingCustomers.customerName == this.keyWord
                : room.bookingData && room.bookingData.bookingCustomer
                ? room.bookingData.bookingCustomer.name == this.keyWord
                : false) ||
              (room.livingData && room.livingData.livingCustomers
                ? room.livingData.livingCustomers.phone == this.keyWord
                : room.bookingData && room.bookingData.bookingCustomer
                ? room.bookingData.bookingCustomer.phone == this.keyWord
                : false)
          );
          acc.push({ ...curr, rooms });
          return acc;
        }, []);
      }
      console.log("list2", list);
      this.roomList = list;
    },
    // roomStatusChange(e) {
    //   console.log("e", e);
    //   var list = this.oldRoomList;
    //   if (this.checkedRoomStatusList.length > 0) {
    //     list = this.oldRoomList.reduce((acc, curr) => {
    //       const rooms = curr.rooms.filter((room) =>
    //       this.checkedRoomStatusList.includes(room.roomInfo.roomStatus.toString())
    //       );
    //       acc.push({ ...curr, rooms });
    //       return acc;
    //     }, []);
    //   }
    //   console.log("list2", list);
    //   this.roomList = list;
    // },
    collapseClick(row, value) {
      this.$set(row, "collapse", value);
    },
    handleAdd(e) {
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = "维修";
      this.$refs.modalForm.disableSubmit = false;
    },
    modalWxFormOk() {
      this.loadData();
    },
    handleWx() {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            selectRoom.push({ roomId: c.roomInfo.id, roomNo: c.roomInfo.name });
          }
        });
      });
      if (selectRoom.length === 0) {
        this.$message.warning("请先选择房间");
        return;
      }
      console.log("selectRoom", selectRoom);
      this.$refs.modalForm.add({ roomRepairList: selectRoom });
      this.$refs.modalForm.title = "维修";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleLock(e) {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            selectRoom.push({ roomId: c.roomInfo.id, roomNo: c.roomInfo.name });
          }
        });
      });
      if (selectRoom.length === 0) {
        this.$message.warning("请先选择房间");
        return;
      }
      console.log("selectRoom", selectRoom);
      this.$refs.ModalLockRoom.add({ roomLockList: selectRoom });
      this.$refs.ModalLockRoom.title = "锁房";
      this.$refs.ModalLockRoom.disableSubmit = false;
    },
    handleDirty() {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            selectRoom.push(c.roomInfo.id);
          }
        });
      });
      if (selectRoom.length === 0) {
        this.$message.warning("请先选择房间");
        return;
      }
      var ids = selectRoom.join(",");
      postAction("/rooms/cesRooms/dirtyRoom?roomIds=" + ids, {}).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.loadData();
        }
      });
    },
    handleClean(e) {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            selectRoom.push({ roomId: c.roomInfo.id, roomNo: c.roomInfo.name });
          }
        });
      });
      if (selectRoom.length === 0) {
        this.$message.warning("请先选择房间");
        return;
      }
      console.log("selectRoom", selectRoom);
      this.$refs.ModalCleanRoom.add({ roomCleanList: selectRoom });
      this.$refs.ModalCleanRoom.title = "清理房间";
      this.$refs.ModalCleanRoom.disableSubmit = false;
    },
    handleOffLock() {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            selectRoom.push(c.roomInfo.id);
          }
        });
      });
      if (selectRoom.length === 0) {
        this.$message.warning("请先选择房间");
        return;
      }
      var ids = selectRoom.join(",");
      postAction("/fw/fwRoomLock/offLockRoom?roomIds=" + ids, {}).then(
        (res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
          }
        }
      );
    },
    handleCompleteRepair() {
      var selectRoom = [];
      this.roomList.forEach((t) => {
        t.rooms.forEach((c) => {
          if (c.roomInfo.state === 88) {
            selectRoom.push(c.roomInfo.id);
          }
        });
      });
      if (selectRoom.length === 0) {
        this.$message.warning("请先选择房间");
        return;
      }
      var ids = selectRoom.join(",");
      postAction("/fw/fwRoomRepair/completeRepairRoom?roomIds=" + ids, {}).then(
        (res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
          }
        }
      );
    },
    modalLockRoomFormOk() {
      this.loadData();
    },
    onMenuClick(e, row) {
      console.log("e", e);
      console.log("row", row);
      var that = this;
      if (e.key == "1") {
        if (row.bookingData && row.bookingData.bookingOrder) {
          this.$confirm({
            title: "提示",
            content: "此房间有预定是否预定转入住?",
            onOk: function () {
              that.$router.push({
                name: "room-scheduledetail",
                params: {
                  id: row.bookingData.bookingOrder.bookingOrdersNo,
                },
              });
            },
          });
        } else {
          row.roomInfo.marketPrice = row.layout.marketPrice;
          this.$refs.ModalBillRoomForm.addList([row.roomInfo], 1);
          this.$refs.ModalBillRoomForm.title = "散客入住登记";
          this.$refs.ModalBillRoomForm.disableSubmit = false;
        }
      } else if (e.key == "2") {
        this.$refs.ModalScheduleRoom.addList([row.roomInfo], 1);
        this.$refs.ModalScheduleRoom.title = "散客预定登记";
        this.$refs.ModalScheduleRoom.disableSubmit = false;
      } else if (e.key == "3") {
        var selectRoom = [row.roomInfo.id];
        if (selectRoom.length === 0) {
          this.$message.warning("请先选择房间");
          return;
        }
        var ids = selectRoom.join(",");
        postAction("/rooms/cesRooms/dirtyRoom?roomIds=" + ids, {}).then(
          (res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.loadData();
            }
          }
        );
      } else if (e.key == "31") {
        var selectRoom = [
          {
            roomId: row.roomInfo.id,
            roomNo: row.roomInfo.name,
          },
        ];

        if (selectRoom.length === 0) {
          this.$message.warning("请先选择房间");
          return;
        }
        console.log("selectRoom", selectRoom);
        this.$refs.ModalCleanRoom.add({ roomCleanList: selectRoom });
        this.$refs.ModalCleanRoom.title = "清理房间";
        this.$refs.ModalCleanRoom.disableSubmit = false;
      } else if (e.key == "4") {
        var selectRoom = [
          {
            roomId: row.roomInfo.id,
            roomNo: row.roomInfo.name,
          },
        ];

        if (selectRoom.length === 0) {
          this.$message.warning("请先选择房间");
          return;
        }
        console.log("selectRoom", selectRoom);
        this.$refs.modalForm.add({ roomRepairList: selectRoom });
        this.$refs.modalForm.title = "维修";
        this.$refs.modalForm.disableSubmit = false;
      } else if (e.key == "41") {
        var selectRoom = [row.roomInfo.id];
        if (selectRoom.length === 0) {
          this.$message.warning("请先选择房间");
          return;
        }
        var ids = selectRoom.join(",");
        postAction(
          "/fw/fwRoomRepair/completeRepairRoom?roomIds=" + ids,
          {}
        ).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.loadData();
          }
        });
      } else if (e.key == "51") {
        var selectRoom = [row.roomInfo.id];
        if (selectRoom.length === 0) {
          this.$message.warning("请先选择房间");
          return;
        }
        var ids = selectRoom.join(",");
        postAction("/fw/fwRoomLock/offLockRoom?roomIds=" + ids, {}).then(
          (res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.loadData();
            }
          }
        );
      }else if(e.key == 6 || e.key == 7){
          this.handleBillInfo(row)
          return
      }else if(e.key == 15){
        this.handleBillInfo(row)
        // this.$refs.ModalBillRoomInfo.addlivingCustomer(row.livingData.livingOrder.id, 1);
        return
      }
    },
    modalBillRoomFormOk(e) {
      this.loadData();
      console.log("e", e);
      this.$refs.ModalBillRoomInfo.add(e);
      this.$refs.ModalBillRoomInfo.title = "账单";
      this.$refs.ModalBillRoomInfo.disableSubmit = true;
    },
    modalFormOk(e) {
      console.log("e", e);
      this.loadData();
      this.$router.push({
        // path: "/room/scheduledetail",
        // query: { id: e },
        name: "room-scheduledetail",
        params: { id: e },
      });
    },
    modalTeamFormOk(e) {
      console.log("e", e);
      this.loadData();
      this.$router.push({
        // path: "/room/scheduledetail",
        // query: { id: e },
        name: "room-scheduleteamdetail",
        params: { id: e },
      });
    },
    loadData() {
      this.checkInBtnDis = false;
      this.scheduleBtnDis = false;
      getAction("/rooms/cesRooms/realtime-rooms", {}).then((res) => {
        if (res.success) {
          res.result.forEach((row) => {
            this.$set(row, "collapse", 1);
          });
          this.roomList = res.result;
          this.oldRoomList = JSON.parse(JSON.stringify(res.result));
        }
      });
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
<style scoped>
.course-week {
  /* border: 1px solid #ddd; */
  /* padding: 1%; */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.post-mark {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.select-cell {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(102, 102, 102, 0.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.week-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 1%;
  box-sizing: border-box;
}

.week-top .week-btn-wrap {
  width: 200px;
  display: flex;
  justify-content: space-around;
  color: #409eff;
}

.week-top .week-btn-wrap span {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

.w-today-date {
  font-weight: bold;
  font-size: 16px;
}

.w-choose-status {
  display: flex;
  /* justify-content: flex-end;
  width: 200px; */
}

.w-choose-status > div {
  width: 100%;
  flex: 1;
  display: flex;
  padding: 0 2%;
  white-space: nowrap;
  line-height: 20px;
  box-sizing: border-box;
}

.w-choose-status > div .square {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-sizing: border-box;
}

.w-choose-status > div .title {
  display: flex;
  align-items: center;
  line-height: 16px;
  padding-left: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.week-table {
  display: flex;
  flex-direction: column;
}

.week-table .table-header {
  width: 100%;
  height: 80px;
  background: #eaedf2;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #eaedf2;
  box-sizing: border-box;
}

.table-header .w-table-date,
.table-week {
  width: 100%;
  height: 40px;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-header .w-table-date > span,
.table-week > span {
  flex: 1;
  color: #000;
  height: 100%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.w-table-date .w-day-item,
.table-week .w-day-item {
  color: #000;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.week-table .w-time-period-list {
  width: 100%;
}

.w-time-period-list .w-time-period-row {
  width: 100%;
  min-height: 60px;
}

.w-time-period-col {
  width: 100%;
  min-height: 60px;
  display: flex;
}

.w-time-period-col .w-time-period {
  width: 12.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #eaedf2;
  /* border-bottom: 1px solid #eaedf2; */
  box-sizing: border-box;
}
.w-time-period-col:last-child {
  border-bottom: 1px solid #eaedf2;
}
.meeting-room-center {
  transform: translate(-200%, 0%);
  width: 14px;
  font-size: 14px;
  word-wrap: break-word;
  position: absolute;
}

.w-time-period-col .w-row-day {
  width: 100%;
  display: flex;
  justify-content: center;
}

.w-row-day .w-things {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid #eaedf2;
  border-bottom: 1px solid #eaedf2;
  box-sizing: border-box;
  cursor: pointer;
}

.w-row-day .w-things:last-child {
  border-right: 1px solid #eaedf2;
}

.w-things .w-thing-item {
  display: flex;
  /* width: 80%; */
  height: 135px;
  font-size: 14px;
  flex-direction: column;
  justify-content: space-around;
  min-height: 50px;
  border-radius: 10px;
  margin: 2% 1%;
  padding: 1% 2%;
  cursor: pointer;
  color: #fff;
  background: #ff6200;
  box-sizing: border-box;
  transition: all 1s linear 0.5s;
}

.w-isCurDate {
  color: #ff2525 !important;
}

.w-noMore {
  min-height: 200px;
  padding: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(156, 173, 173, 0.3);
  color: #9cadadb7;
  box-sizing: border-box;
}

.w_expand,
.w_shrink {
  color: #0a98d5;
  cursor: pointer;
  width: 100%;
  padding: 2% 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style scoped>
#components-grid-demo-playground [class~="ant-col"] {
  background: transparent;
  border: 0;
}
#components-grid-demo-playground .room-item {
  background: rgba(67, 207, 124, 1);
  height: 125px;
  /* line-height: 200px; */
  font-size: 13px;
  color: #f9f9f9;
  padding: 2px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
#components-grid-demo-playground pre {
  background: #f9f9f9;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 16px;
}
</style>