<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="header-left">
        <span class="title">房态管理 </span>
        <span> / 共182间</span>
      </div>
      <div class="header-right">
        <el-input
          placeholder="请输入姓名或者房间号"
          prefix-icon="el-icon-search"
          class="inquire-input"
        >
        </el-input>
        <el-button class="inquire-button">查询</el-button>
        <div class="control">
          <div class="title" @click="water = !water" style="cursor: pointer">
            批量控制水电
          </div>
          <ul v-show="water">
            <li
              @click="dialogShow"
              v-for="(item, index) in titles"
              :key="index"
            >
              {{ item }}
            </li>
            <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="692px"
              append-to-body
            >
              <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps"
              >
              </el-tree>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </ul>
        </div>
        <div class="control" style="margin-left: 17px">
          <div class="title" @click="room = !room" style="cursor: pointer">
            批量开关房
          </div>
          <ul v-show="room">
            <li
              @click="dialogShow"
              v-for="(item, index) in titles2"
              :key="index"
            >
              {{ item }}
            </li>
            <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="692px"
              append-to-body
            >
              <div class="tree">
                <div class="tree-left">
                  <el-checkbox v-model="checked" style="margin-left: 15px"
                    >全选</el-checkbox
                  >
                  <span style="margin-left: 165px">100 / 200</span>
                </div>
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="[2, 3]"
                  :default-checked-keys="[5]"
                  :props="defaultProps"
                >
                </el-tree>
              </div>
              <div class="tree">
                <div class="tree-left">
                  <p style="margin-left: 15px">已选 ( 100 )</p>
                </div>
                <ul
                  class="infinite-list"
                  v-infinite-scroll="load"
                  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 }}</span
                    ><i class="el-icon-close"></i>
                  </li>
                </ul>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </ul>
        </div>
      </div>
    </div>
    <div class="home-body">
      <div class="room-floor wrapper">
        <div class="floor" v-for="(items, i) in floorRoomDatas" :key="i">
          <div class="header-title">
            <div class="tier">{{ i + 1 }}层</div>
            <span>/&nbsp; 共{{ items.length }}间</span>
          </div>
          <div class="main-floor">
            <div class="room-num" v-for="(item, ind) in items" :key="ind">
              <el-popover
                placement="right"
                trigger="click"
                popper-class="popperOptions"
              >
                <div class="control-room">
                  <div>关房</div>
                  <div>转脏房</div>
                  <div>转空闲</div>
                  <div>关水</div>
                  <div>关电</div>
                  <div>清扫</div>
                  <div>取消</div>
                </div>
                <div
                  @click="EachRoom(i, ind, $event)"
                  :class="i + '' + ind == clickId ? 'cardId' : ''"
                  class="card"
                  :id="i + '' + ind"
                  slot="reference"
                >
                  <div class="title">
                    <span>{{ item.roomUnit }}</span>
                    <div class="state" :style="bgState(item.state)">
                      {{ item.state }}
                    </div>
                  </div>
                  <div class="teacher">{{ item.name }}</div>
                  <div class="num">
                    <span>水:{{ item.water }}吨</span>&nbsp;&nbsp;
                    <span>电:{{ item.electricity }}度</span>
                  </div>
                  <div class="count-down">
                    <span>退房倒计时:{{ item.outRoom }}</span>
                    <div class="tuifang" @click.stop="doorLock = true">
                      <IconSvg :W="21" :H="21" name="tuifang" />
                      <el-dialog
                        title="门锁管理"
                        :visible.sync="doorLock"
                        width="30%"
                        :before-close="lockClose"
                      >
                        <div class="text" style="margin-top: 13px">
                          <span>门锁ID:{{ item.roomLock.id }}</span>
                          <IconSvg :W="16" :H="16" name="edit" />
                        </div>
                        <div class="text">
                          <span
                            >门锁序列号:{{ item.roomLock.serialNumber }}</span
                          >
                          <IconSvg :W="16" :H="16" name="edit" />
                        </div>
                        <div class="text">
                          <span>门锁密码:{{ item.roomLock.password }}</span>

                          <span class="password" @click="sending"
                            >下发密码</span
                          >
                        </div>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click.stop="doorLock = false" size="mini"
                            >取消</el-button
                          >
                          <el-button size="mini" @click.stop="doorLock = false"
                            >完成</el-button
                          >
                        </span>
                      </el-dialog>
                    </div>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <div class="query-condition">
        <div class="title">查询条件</div>
        <div class="calendar">
          <p>日期查询</p>
          <div class="date">
            <el-date-picker
              size="mini"
              v-model="date"
              align="right"
              type="date"
              placeholder="请选择日期"
              :picker-options="pickerOptions"
              :clearable="false"
            >
            </el-date-picker>
            <el-calendar v-model="date" :first-day-of-week="7"> </el-calendar>
          </div>
        </div>
        <div class="filtrate">
          <p>房态筛选</p>
          <div class="room-filtrate">
            <div style="border-bottom: 1px solid rgba(225, 228, 232, 1)">
              <el-checkbox
                size="mini"
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <span class="all">150间</span>
            </div>
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              size="mini"
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                size="mini"
                v-for="city in cities"
                :label="city"
                :key="city"
                >{{ city }} <span>50间</span></el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div class="reset">
          <el-button @click="reset" type="primary" size="mini"
            >重置筛选</el-button
          >
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      clickId: "",
      // 门锁管理
      doorLock: false,
      // 批量数据
      dialogVisible: false,
      count: 20,
      title: "",
      checked: true,
      titles: ["批量开电", "批量开水", "批量关电", "批量关水"],
      titles2: ["批量开房", "批量关房"],
      data: [
        {
          id: 1,
          label: "墨轩湖酒店",
          children: [
            {
              id: 2,
              label: "17栋1单元02层01",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
            {
              id: 3,
              label: "17栋1单元02层01",
            },
            {
              id: 4,
              label: "17栋1单元02层01",
            },
            {
              id: 5,
              label: "17栋1单元02层01",
            },
            {
              id: 6,
              label: "17栋1单元02层01",
            },

            {
              id: 7,
              label: "17栋1单元02层01",
            },
            {
              id: 8,
              label: "17栋1单元02层01",
            },
            {
              id: 9,
              label: "17栋1单元02层01",
            },
          ],
        },
      ],
      floorRoomDatas: [
        [
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25",
            electricity: "25",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "保留房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
        ],
        [
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "保留房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
        ],
        [
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "保留房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
        ],
        [
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "保留房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已入住",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "空闲",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "脏房",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
          {
            roomUnit: "17栋1单元2层01房",
            state: "已锁定",
            name: "张强",
            water: "25吨",
            electricity: "25度",
            outRoom: "00:13:26",
            roomLock: {
              id: "123456789",
              serialNumber: "123456789",
              password: "123456789",
            },
          },
        ],
      ],

      defaultProps: {
        children: "children",
        label: "label",
      },
      water: false,
      room: false,

      //日历
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      date: new Date(),

      // 房态筛选数据
      checkAll: false,
      checkedCities: ["已入住", "空间"],
      cities: ["已入住", "空闲", "已锁定", "脏房", "保留房"],
      isIndeterminate: true,
    };
  },
  computed: {},
  mounted() {
    document.getElementsByClassName(
      "el-button--plain"
    )[0].children[0].innerText = "<";
    document.getElementsByClassName(
      "el-button--plain"
    )[1].children[0].innerText = "o";
    document.getElementsByClassName(
      "el-button--plain"
    )[2].children[0].innerText = ">";
  },
  methods: {
    bgState(e) {
      let color = ["#D3DBE6", "#296DE3", "#00BAAD", "#FF5733", "#3BB1E3"];
      let index = this.cities.findIndex((item) => {
        return e == item;
      });
      let bg = color[index];
      return { background: bg };
    },
    EachRoom(i, item, $event) {
      // console.log($event.currentTarget.id);
      this.clickId = $event.currentTarget.id;
    },
    // 控制水电
    dialogShow(e) {
      this.dialogVisible = true;
      this.title = e.target.innerHTML;
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    load() {
      this.count += 0;
      if (this.count < 50) {
        this.count += 4;
      }
    },

    // 房态筛查
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      console.log(val);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    reset() {
      this.checkedCities = [];
      this.isIndeterminate = false;
      this.checkAll = false;
    },

    //门锁管理
    lockClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    sending(done) {
      this.$confirm("确认下发密码吗？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
}

.clearfix {
  height: 96px;
  display: flex;
  align-items: center;

  .el-card__header {
    padding: 0;
  }

  .header-left {
    margin-left: 33px;
    display: flex;
    align-items: center;

    .title {
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-right: 15px;
    }
  }

  .header-right {
    display: flex;

    .inquire-input {
      width: 261px;
      height: 37px;
      background: rgba(240, 243, 247, 1);
      border-radius: 5px;
      margin-left: 715px;

      /deep/ .el-input__inner {
        height: 37px !important;
      }
    }

    .inquire-button {
      width: 73px;
      height: 37px;
      font-size: 16px;
      margin: 0 58px 0 9px;
      padding: 0;
      background: rgba(41, 109, 227, 1);
      color: #fff;
    }

    .control {
      // width: 121px;
      height: 37px;
      position: relative;

      .title {
        background: rgba(41, 109, 227, 1);
        color: #fff;
        text-align: center;
        line-height: 37px;
        padding: 0 11px;
      }

      ul {
        position: absolute;
        list-style: none;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        margin: 0;

        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        border-radius: 3px;

        li {
          height: 26px;
          font-size: 12px;
          color: #000;
          line-height: 26px;
          text-align: center;
          &:hover {
            background-color: rgba(41, 109, 227, 1);
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
/deep/ .el-card__body {
  height: 854px;
  width: 100%;
  padding: 0;
  .home-body {
    display: flex;
    height: 100%;
    .room-floor {
      height: 100%;
      overflow: auto;
      flex: 1;
      .floor {
        margin: 0 0 0 33px;
        .header-title {
          display: flex;
          align-items: center;
          height: 66px;
          .tier {
            color: rgba(0, 0, 0, 1);
            font-size: 20px;
            font-weight: 500;
            display: inline-block;
          }
          span {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            font-weight: 400;
            margin-left: 10px;
          }
        }
        .main-floor {
          display: flex;
          flex-wrap: wrap;
          .room-num {
            margin-bottom: 30px;

            .card {
              width: 228px;
              height: 140px;
              background: rgba(240, 243, 247, 1);
              border-radius: 4px;
              margin-right: 20px;
              font-size: 12px;
              font-weight: 400;
              color: #000;
              box-sizing: border-box;
              border: 1px solid transparent;
              display: flex;
              flex-direction: column;
              // div {
              //   margin-left: 15px;
              //   margin-bottom: 7px;
              // }
              .title {
                display: flex;
                align-items: center;
                margin: 15px;
                span {
                  display: inline-block;
                  height: 24px;
                  font-size: 16px;
                  font-weight: 500;
                  letter-spacing: 0px;
                  color: rgba(51, 51, 51, 1);
                }
                .state {
                  width: 46px;
                  height: 17px;
                  opacity: 1;
                  /** 文本1 */
                  font-size: 12px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  color: #fff;
                  text-align: center;
                  line-height: 17px;
                  margin-left: 15px;
                  background: rgba(41, 109, 227, 1);
                }
              }
              .teacher {
                margin: 5px 15px;
              }
              .num {
                margin: 5px 15px;
              }
              .count-down {
                margin-left: 15px;
                display: flex;
                span {
                  margin-right: 60px;
                }
                .tuifang {
                  width: 21px;
                  height: 21px;
                  cursor: pointer;
                  .el-dialog {
                    box-shadow: none;
                    margin: 350px 0 0 450px !important;
                    width: 555px !important;
                    height: 377px !important;
                    .text {
                      display: flex;
                      margin-left: 34px;
                      margin-bottom: 15px;
                      font-size: 14px;
                      font-weight: 400;
                      span {
                        margin-right: 20px;
                      }
                      .password {
                        color: #fff;
                        border-radius: 2px;
                        font-size: 12px;
                        padding: 2px;
                        cursor: pointer;
                        background-color: rgba(41, 109, 227, 1);
                      }
                    }
                    .el-dialog__body {
                      flex-direction: column;
                    }
                    .el-dialog__footer {
                      margin: 40px -48px 0 0;
                      .dialog-footer {
                        .el-button:nth-child(2) {
                          color: #fff;
                          background: rgba(41, 109, 227, 1);
                        }
                        .el-button {
                          width: 67px;
                          height: 37px;
                          padding-left: 20px;
                        }
                      }
                    }
                  }
                }
              }
            }
            .cardId {
              border: 1px solid rgba(41, 109, 227, 1);
              box-sizing: border-box;
            }
            .el-dropdown-link {
              cursor: pointer;
              color: #409eff;
            }
            .el-icon-arrow-down {
              font-size: 12px;
            }
          }
        }
      }
    }
    .query-condition {
      width: 302px;
      height: 752px;
      background: rgba(240, 243, 247, 1);
      border-radius: 4px;
      margin: 72px 29px 0 0;
      .title {
        color: rgba(0, 0, 0, 1);
        font-size: 20px;
        font-weight: 400;
        height: 55px;
        border-bottom: 1px solid rgba(217, 217, 217, 1);
        line-height: 55px;
        text-align: center;
      }
      .calendar {
        margin: 0 auto;
        width: 266px;
        height: 227px;
        .date {
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
          .el-input {
            width: 266px !important;
            .el-input__inner {
              padding-left: 15px;
            }
            .el-input__prefix {
              left: 233px !important;
            }
          }
        }
        .el-calendar {
          width: 266px;
          height: 227px;

          .el-calendar__header {
            height: 37px;
            padding: 0;
            font-size: 10px;
            padding: 0 20px;
            align-items: center;
            .el-button {
              width: 30px;
              border: none;
              padding: 5px 10px;
            }
          }
          .el-calendar__body {
            height: 190px !important;
            padding: 0 20px;
            table {
              width: 100%;
              height: 100% !important;
              thead {
                height: 19px;
                th {
                  font-size: 10.7px;
                  padding: 15px 0 10px 0;
                }
              }
              .el-calendar-table__row {
                .next,
                .prev {
                  .el-calendar-day {
                    display: none;
                  }
                }
                height: 19px !important;
                .is-selected {
                  background: transparent;
                  .el-calendar-day {
                    border-radius: 50%;
                    background-color: rgba(51, 150, 251, 1);
                    span {
                      color: #fff;
                    }
                  }
                }

                td {
                  height: 19px !important;
                  border-left: none;
                  border-top: none;
                  border-bottom: none;
                  border-right: none;

                  .el-calendar-day {
                    display: inline-block;
                    padding: 0;
                    height: 19px;
                    border: none !important;
                    margin: 4px 5px;
                    span {
                      display: inline-block;
                      font-size: 10.7px;
                      width: 19px;
                      height: 19px;
                      border-radius: 50%;
                      color: #000;
                      text-align: center;
                      line-height: 19px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .filtrate {
        margin-top: 85px;
        padding: 0 20px;
        p {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          font-weight: 400;
          padding: 10px 0;
        }
        .room-filtrate {
          border-bottom: 1px solid rgba(225, 228, 232, 1);
          .el-checkbox.is-checked {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
            .el-checkbox__label {
              color: #000;
            }
          }
          .is-indeterminate {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }
        }
        .all {
          float: right;
          font-size: 12px;
        }
        .el-checkbox {
          width: 50%;
          margin: 0;

          .el-checkbox__label {
            font-size: 12px;
            margin-bottom: 10px;
            span {
              margin-left: 25px;
              font-size: 12px;
            }
          }
        }
        .el-checkbox__inner {
          width: 12px;
          height: 12px;
          &:after {
            left: 3px;
            top: 0;
          }
        }
      }
      .reset {
        margin: 15px 20px;
        .el-button {
          width: 69px;
          height: 28px;
          background: rgba(41, 109, 227, 1);
          border-radius: 4px;
          padding: 0;
        }
      }
    }
  }
}

.box-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
}

/deep/ .el-dialog {
  height: 565px !important;

  .el-dialog__header {
    height: 81px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 1);

    span {
      font-size: 20px;
      font-weight: 500;
      margin-left: 30px;
    }

    button {
      font-size: 20px;
      width: 35px;
      height: 35px;
      top: 23px !important;
    }
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    padding: 21px 0 0 0;

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

    ul {
      width: 316px;
      height: 324px;
      list-style: none;
      padding: 0;
      margin: 0;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      li {
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
      }
    }
  }

  .el-dialog__footer {
    padding: 24px 30px 0 0;
  }
}
</style>
<style lang="scss">
.el-popover.popperOptions {
  min-width: 0;
  padding: 0;
  height: 167px;
  width: 70px;

  .control-room {
    width: 70px;
    height: 167px;
    opacity: 1;
    background: rgba(240, 243, 247, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 0px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    div {
      margin-left: 15px;
    }
  }
  .popper__arrow {
    top: 35px !important;
  }
}
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3;
  }
}
</style>