<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="header-left">
        <span class="title">房态管理</span>
        <span>/ 共{{ roomData.length }}间</span>
      </div>
      <div class="header-right">
        <el-input
          placeholder="请输入房间号  如:17-1-1-1001"
          prefix-icon="el-icon-search"
          class="inquire-input"
          v-model="inquireValue"
        ></el-input>
        <el-button class="inquire-button" @click="inquireRoom">查询</el-button>
        <div class="control" style="margin-left: 17px">
          <div class="title" @click="roomAll" 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
              custom-class="dialongAllRoom"
            >
              <div class="tree">
                <div class="tree-left">
                  <el-checkbox
                    v-model="checked"
                    style="margin-left: 15px"
                    @change="chooseAll"
                    >全选</el-checkbox
                  >
                  <span style="margin-left: 165px"
                    >{{ count.length }} / {{ data[0].children.length }}</span
                  >
                </div>
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  ref="roomTree"
                  :props="defaultProps"
                  @check="checkRoom"
                ></el-tree>
              </div>
              <div class="tree">
                <div class="tree-left">
                  <p style="margin-left: 15px">已选 ( {{ count.length }} )</p>
                </div>
                <ul
                  class="infinite-list"
                  v-infinite-scroll="load"
                  style="overflow: auto"
                  infinite-scroll-immediate="false"
                >
                  <li
                    v-for="(i, index) in count"
                    :key="index"
                    class="infinite-list-item"
                    v-show="!i.children"
                  >
                    <span style="margin-left: 19px">{{ i.label }}</span>
                    <i class="el-icon-close" @click="cancelCheck(i)"></i>
                  </li>
                </ul>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="PLcloseRoom">确 定</el-button>
              </span>
            </el-dialog>
          </ul>
        </div>
      </div>
    </div>
    <div class="home-body" v-loading="cardShow">
      <div class="room-floor wrapper" element-loading-text="获取房间信息中">
        <div class="scrollBlock" ref="scrollBlock">
          <div class="floor" v-for="(items, i) in Data" :key="i">
            <div class="header-title">
              <div class="tier">{{ parseInt(items.floor) }}层</div>
              <span>/&nbsp; 共{{ items.room.length }}间</span>
            </div>
            <div class="main-floor">
              <div class="room-num" v-for="item in items.room" :key="item.id">
                <el-popover
                  placement="right"
                  trigger="click"
                  popper-class="popperOptions"
                >
                  <div class="control-room">
                    <el-button
                      size="mini"
                      @click="closeRoom(item)"
                      :disabled="item.statu != 1"
                      >关房</el-button
                    >
                    <el-button
                      size="mini"
                      @click="todirty(item)"
                      :disabled="item.statu == 4 || item.statu == 5"
                      >转脏房</el-button
                    >
                    <el-button
                      size="mini"
                      :disabled="item.statu != 4 && item.statu != 5"
                      @click="leisure(item)"
                      >转空闲</el-button
                    >
                    <el-button size="mini" @click="closeEle(item)">{{
                      item.electricName
                    }}</el-button>
                    <!-- <el-button
                      size="mini"
                      :disabled="item.statuName != '脏房'"
                      @click="leisure(item)"
                      >清扫</el-button
                    >-->
                    <el-button size="mini" @click="ICpage(item.roomNo)"
                      >IC卡</el-button
                    >
                    <el-button size="mini" @click="fingerprintPage(item.roomNo)"
                      >指纹</el-button
                    >
                  </div>
                  <div
                    @click="EachRoom($event, item)"
                    :class="item.roomId == clickId ? 'cardId' : ''"
                    class="card"
                    slot="reference"
                  >
                    <div class="title">
                      <span>
                        <span style="font-size: 16px">{{ item.build }}栋</span>
                        {{ item.roomNo.slice(3) }}
                      </span>
                      <div class="state" :style="bgState(item.statu)">
                        {{ item.statuName }}
                      </div>
                    </div>
                    <template v-if="item.statu == 2 || item.statu == 3">
                      <!--显示房间所属人信息 -->
                      <div class="teacher">{{ item.useInfo.userName }}</div>
                      <div class="num">
                        <span>水:{{ item.useInfo.startOfWater }}吨</span
                        >&nbsp;&nbsp;
                        <span>电:{{ item.useInfo.startOfElectric }}度</span>
                      </div>
                      <div class="count-down">
                        <span>退房倒计时 {{ item.EndTime }}</span>
                      </div>
                    </template>
                  </div>
                </el-popover>
                <div class="tuifang" @click.stop="roomLock(item)">
                  <IconSvg :W="21" :H="21" name="tuifang" />

                  <el-dialog
                    title="门锁管理"
                    custom-class="lock"
                    :append-to-body="true"
                    :visible.sync="item.doorLockShow"
                    width="30%"
                    :before-close="lockClose"
                    :destroy-on-close="true"
                  >
                    <div class="title">
                      <span>门锁管理</span>
                      <i class="el-icon-close" @click="lockClose(item)"></i>
                    </div>
                    <div class="roomID" style="margin-top: 13px">
                      <div class="roomblock">
                        <span>门锁ID:</span>
                        <div class="number" v-if="doorLockList.doorIdshow">
                          <span>{{ doorLockList.doorId }}</span>
                          <div @click="editlock">
                            <IconSvg :W="16" :H="16" name="edit" />
                          </div>
                        </div>
                        <el-input
                          ref="roomId"
                          v-else
                          size="mini"
                          v-model="doorLockList.doorId"
                          @blur="editLockInput"
                        ></el-input>
                      </div>
                      <div class="roomblock">
                        <span>水表编码:</span>
                        <div class="number" v-if="doorLockList.waterIdshow">
                          <span>{{ doorLockList.waterId }}</span>
                          <div @click="editWater">
                            <IconSvg :W="16" :H="16" name="edit" />
                          </div>
                        </div>
                        <el-input
                          v-else
                          size="mini"
                          v-model="doorLockList.waterId"
                          @blur="editWaterInput"
                        ></el-input>
                      </div>
                    </div>
                    <div class="roomID">
                      <div class="roomblock">
                        <span>门锁序列号:</span>
                        <div class="number" v-if="doorLockList.doorNumshow">
                          <span>{{ doorLockList.doorNum }}</span>
                          <div @click="editRoomNum">
                            <IconSvg :W="16" :H="16" name="edit" />
                          </div>
                        </div>
                        <el-input
                          v-else
                          size="mini"
                          v-model="doorLockList.doorNum"
                          @blur="editRoomNumInput"
                        ></el-input>
                      </div>
                      <div class="roomblock">
                        <span>电表编码:</span>
                        <div
                          class="number"
                          v-if="doorLockList.electricityIdshow"
                        >
                          <span>{{ doorLockList.electricityId }}</span>
                          <div @click="editEle">
                            <IconSvg :W="16" :H="16" name="edit" />
                          </div>
                        </div>
                        <el-input
                          v-else
                          size="mini"
                          v-model="doorLockList.electricityId"
                          @blur="editEleInput"
                        ></el-input>
                      </div>
                    </div>
                    <div class="roomID">
                      <div class="roompassword">
                        <span>门锁密码:</span>
                        <div
                          class="sendpass"
                          v-for="item in roomPassWord"
                          :key="item.id"
                        >
                          <span>{{ item.lockRealtimePassword }}</span>
                          <span class="password" @click="sending(item)"
                            >下发密码</span
                          >
                          <span style="margin-left: 10px">
                            密码到期时间 :
                            {{ item.endTime.replace("T", " ") }}
                          </span>
                        </div>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click.stop="lockClose(item)" size="mini"
                        >取消</el-button
                      >
                      <el-button size="mini" @click.stop="UpdataRoom(item)"
                        >完成</el-button
                      >
                    </span>
                  </el-dialog>
                </div>
              </div>
            </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> -->
            <el-calendar v-model="date"></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">{{ allNum ? allNum : roomData.length }}间</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, ind) in cities"
                :label="city"
                :key="city"
              >
                {{ city }}
                <span
                  >{{
                    citiesNumber[ind] ? citiesNumber[ind] : citiesNum[ind]
                  }}间</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>
import dayjs from "dayjs";
import _ from "lodash";
export default {
  name: "Home",
  data() {
    return {
      cardShow: true,
      clickId: "",
      inquireValue: "", // 房间号
      switchOff: "关电",
      // 门锁管理
      doorLock: false,
      doorLockList: {
        id: "",
        roomId: "",
        doorId: "",
        doorIdshow: true,
        waterId: "",
        waterIdshow: true,
        doorNum: "111111",
        doorNumshow: true,
        electricityId: "",
        electricityIdshow: true
      },
      roomPassWord: [], // 密码列表
      // 批量数据
      dialogVisible: false,
      Endtime: [],
      count: [], // 选中的全部数据
      title: "",
      checked: false,
      titles: ["批量开电", "批量关电"],
      titles2: ["批量开房", "批量关房"],
      data: [
        {
          id: 15263458,
          label: "墨轩湖酒店",
          children: [
            // {
            //   id: 2,
            //   label: "17栋1单元02层01",
            // },
          ]
        }
      ],
      floorRoomDatas: [],
      Data: [],
      roomData: [],
      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: "",

      // 房态筛选数据
      checkAll: false,
      checkedCities: [],
      cities: ["空闲", "预定", "入住", "脏房", "锁定"],
      citiesNum: [0, 0, 0, 0, 0],
      isIndeterminate: false,
      ids: 0, // 勾选的房间数量
      allNum: 0,
      allData: [],
      citiesNumber: ""
    };
  },
  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 = ">";
    // this.$store.commit("user/SET_TIME", this.date);
    this.date = this.$store.state.user.time;
    this.allList();
    this.roomList();
  },
  created() {
    // let arr = {
    //   roomNo: "1-5-1007",
    //   build: 1,
    //   floor: "5",
    //   roomTypeId: 2,
    //   roomTypeName: "测试房",
    //   enableUse: "1",
    // };
    // this.API.room.roomSave(arr).then((res) => {
    //   console.log(res);
    // });
    // console.log(this.$router.options.routes);
    window.addEventListener("scroll", this.lazyLoading, true); // 滚动到底部，再加载的处理事件
  },
  //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
  destroyed() {
    window.removeEventListener("scroll", this.lazyLoading);
    //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
  },
  watch: {
    date(newVal, oldVal) {
      // console.log(newVal);
      this.$store.commit("user/SET_TIME", this.date);
      this.roomList();
      this.allList();
      this.checkedCities = [];
      this.isIndeterminate = false;
      this.checkAll = false;
      this.ids = 0;
    }
  },
  methods: {
    // 数据滚动加载
    // lazyLoading() {
    //   // 滚动到底部，再加载的处理事件
    //   //滚动高度
    //   let scrollTop =
    //     document.getElementsByClassName("room-floor")[0].scrollTop;
    //   // console.log(scrollTop, "scrollTop");
    //   //可视区高度
    //   let clientHeight =
    //     document.getElementsByClassName("room-floor")[0].clientHeight;
    //   // console.log(clientHeight, "clientHeight");
    //   //滚动页面的高度
    //   let scrollHeight = this.$refs.scrollBlock.scrollHeight;
    //   // console.log(scrollHeight, "scrollHeight");
    //   if (scrollTop + clientHeight >= scrollHeight) {
    //     // 滚动到底部，逻辑代码
    //     //事件处理
    //     // let augument = {
    //     //   curPage: 2,
    //     //   pageSize: 25,
    //     // };
    //     // this.API.room.roomPageGroup(augument).then((res) => {
    //     //   console.log(res);
    //     // });
    //     // this.API.room
    //     //   .roomPageGroup({ curPage: 1, pageSize: 20 })
    //     //   .then((res) => {
    //     //     console.log(res.data.list);
    //     //   });
    //     // this.API.room
    //     //   .roomPageGroup({ curPage: 2, pageSize: 20 })
    //     //   .then((res) => {
    //     //     console.log(res.data.list);
    //     //   });
    //     console.log("滚动到底部，触发"); //此处可以添加数据请求
    //     // 这这里可以写一些业务逻辑，请求数据等
    //   }
    // },
    allList() {
      this.API.room.roomPageGroup({ curPage: 1, pageSize: 200 }).then(res => {
        let arrays = [];
        res.data.list.forEach(items => {
          items.floors.forEach(item => {
            // console.log(item);
            arrays.push(item);
          });
        });
        // console.log(arrays);
        var res = []; // 层数
        var narr = []; // 每层对应的数组
        for (var i = 0; i < arrays.length; i++) {
          var n = res.indexOf(arrays[i].floor);
          if (n == -1) {
            res.push(arrays[i].floor);
            narr.push({ floor: arrays[i].floor, room: [...arrays[i].room] });
          } else {
            narr[n].room.push(...arrays[i].room);
          }
        }
        // console.log(narr);
        let ids = [];
        narr.forEach(item => {
          item.room.forEach(item => {
            ids.push(item.id);
          });
        });
        let roomIds = [];
        ids.forEach(item => {
          roomIds.push("roomIds=" + item);
        });
        roomIds = roomIds.join("&");
        let startDay = dayjs(this.date).format("YYYY-MM-DD");
        // console.log(startDay);
        let endDay = dayjs(this.date)
          .add(1, "day")
          .format("YYYY-MM-DD");
        let params =
          "?" +
          "startDay=" +
          startDay +
          "&" +
          "endDay=" +
          endDay +
          "&" +
          roomIds;
        this.API.roomRealTimeStatu.realData(params).then(res => {
          let roomData = res.data;
          this.allNum = roomData.length;
          narr.forEach(items => {
            items.room.forEach(item => {
              // console.log(item);
              roomData.forEach(i => {
                if (i.electricType == 1) {
                  i.electricName = "关电";
                } else {
                  i.electricName = "开电";
                }
                if (item.id == i.roomId) {
                  item = Object.assign(item, i);
                  i = Object.assign(i, item);
                }
              });
            });
          });

          let citiesNum = [0, 0, 0, 0, 0];
          narr.forEach(items => {
            items.room.forEach(resItem => {
              this.cities.forEach((i, ind) => {
                if (resItem.statu == ind + 1) {
                  resItem.statuName = i;
                  citiesNum[resItem.statu - 1] += 1;
                }
              });
            });
          });
          // console.log(citiesNum);

          this.allData = narr;
          this.citiesNumber = citiesNum;
        });
      });
    },
    roomList(Datas, resData) {
      this.cardShow = true; // 数据加载前
      this.API.room.roomPageGroup({ curPage: 1, pageSize: 200 }).then(res => {
        this.floorRoomDatas = [];
        // console.log(res);

        let arrays = [];
        let lists = resData ? resData : res.data.list;
        lists.forEach(items => {
          // console.log(items);
          items.floors.forEach(item => {
            // console.log(item);
            arrays.push(item);
          });
        });
        // console.log(arrays);
        var res = []; // 层数
        var narr = []; // 每层对应的数组
        for (var i = 0; i < arrays.length; i++) {
          var n = res.indexOf(arrays[i].floor);
          if (n == -1) {
            res.push(arrays[i].floor);
            narr.push({ floor: arrays[i].floor, room: [...arrays[i].room] });
          } else {
            narr[n].room.push(...arrays[i].room);
          }
        }
        // console.log(narr);
        // 筛选时传进来的数据代替接口数据(Datas)
        this.floorRoomDatas = Datas ? Datas : narr;
        // console.log(this.floorRoomDatas);
        let ids = [];
        this.floorRoomDatas.forEach(item => {
          item.room.forEach(item => {
            ids.push(item.id);
          });
        });
        let roomIds = [];
        ids.forEach(item => {
          roomIds.push("roomIds=" + item);
        });
        roomIds = roomIds.join("&");
        let startDay = dayjs(this.date).format("YYYY-MM-DD");
        // console.log(startDay);
        let endDay = dayjs(this.date)
          .add(1, "day")
          .format("YYYY-MM-DD");
        let params =
          "?" +
          "startDay=" +
          startDay +
          "&" +
          "endDay=" +
          endDay +
          "&" +
          roomIds;
        this.API.roomRealTimeStatu.realData(params).then(res => {
          // console.log(res);
          this.roomData = res.data;
          this.Data = _.cloneDeep(this.floorRoomDatas);
          this.Data.forEach(items => {
            // console.log(items);
            items.room.forEach(item => {
              // console.log(item);
              this.roomData.forEach(i => {
                if (i.electricType == 1) {
                  i.electricName = "开电";
                } else {
                  i.electricName = "关电";
                }
                if (item.id == i.roomId) {
                  item = Object.assign(item, i);
                  i = Object.assign(i, item);
                }
              });
            });
          });
          this.floorRoomDatas.forEach(items => {
            // console.log(items);
            items.room.forEach(item => {
              // console.log(item);

              this.roomData.forEach(i => {
                if (item.id == i.roomId) {
                  item = Object.assign(item, i);
                  i = Object.assign(i, item);
                }
              });
            });
          });
          this.citiesNum = [0, 0, 0, 0, 0];
          this.Data.forEach(items => {
            items.room.forEach(resItem => {
              if (resItem.useInfo) {
                this.showTime(resItem, resItem.useInfo.enableEndTime);
              }
              this.cities.forEach((i, ind) => {
                if (resItem.statu == ind + 1) {
                  resItem.statuName = i;
                  this.citiesNum[resItem.statu - 1] += 1;
                }
              });
            });
          });

          // this.data[0].children = [];

          // this.Data.forEach((items) => {
          //   items.room.forEach((item) => {
          //     this.roomData.forEach((i, index) => {
          //       if (item.id == i.roomId) {
          //         this.$set(item, "doorLockShow", false);
          //         // console.log(i);
          //         let arr = {
          //           id: i.roomId,
          //           label: i.build + "栋" + i.roomNo,
          //         };
          //         if (i.statu == 1) {
          //           this.data[0].children.push(arr);
          //         }
          //       }
          //     });
          //   });
          // });
          // console.log(this.Data);
          this.cardShow = false;
        });
      });
    },
    // 退房倒计时
    showTime(item, endtime) {
      setInterval(() => {
        //设置2020年春节时间
        var newyear = new Date(endtime);
        //获取当前时间
        var date1 = new Date();
        //两个日期对象直接相减就能获取两个日期相差的时间戳(以毫秒计，也就是能得出相差多少毫秒)
        var ms = newyear - date1;
        //获取天数
        var day = Math.floor(ms / 1000 / 3600 / 24);
        //获取小时数
        var h = Math.floor((ms % (3600 * 24 * 1000)) / 1000 / 3600);
        //获取分钟数
        var m = Math.floor((((ms % (3600 * 24 * 1000)) / 1000) % 3600) / 60);
        //获取秒数
        var s = Math.floor((((ms % (3600 * 24 * 1000)) / 1000) % 3600) % 60);
        if (day < 10) {
          day = "0" + day;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        if (ms < 0) {
          this.$set(item, "EndTime", "00:00:00:00");
        } else {
          let enableEndTime = day + ":" + h + ":" + m + ":" + s;
          this.$set(item, "EndTime", enableEndTime);
        }
      }, 0);
    },
    bgState(e) {
      let color = ["", "#296DE3", "#00BAAD", "#D3DBE6", "#FF5733", "#3BB1E3"];
      return { background: color[e] };
    },
    EachRoom($event, item) {
      // console.log(item);
      this.clickId = item.roomId;
    },

    // 根据房间号查询房间
    inquireRoom() {
      let roomNo = this.inquireValue;
      if (this.inquireValue == "") {
        this.roomList();
      } else {
        this.API.room.roomPageGroup({ roomNo }).then(res => {
          // console.log(res);
          if (res.data.list.length) {
            this.roomList("", res.data.list);
            this.checkedCities = [];
            this.isIndeterminate = false;
            this.checkAll = false;
            this.inquireValue = "";
          } else {
            this.$message.error("请输入正确的房间号");
          }
        });
      }
    },

    // 批量开关房start
    roomAll() {
      // console.log("点击roomAll-------------------------------");
      this.room = !this.room;
      if (this.data == 0) {
        this.checked = false;
      }
      //         this.data[0].children = [];
      // console.log(this.Data);
      //           this.Data.forEach((items) => {
      //             items.room.forEach((item) => {
      //               this.roomData.forEach((i, index) => {
      //                 if (item.id == i.roomId) {
      //                   this.$set(item, "doorLockShow", false);
      //                   // console.log(i);
      //                   let arr = {
      //                     id: i.roomId,
      //                     label: i.build + "栋" + i.roomNo,
      //                   };
      //                   if (i.statu == 1) {
      //                     this.data[0].children.push(arr);
      //                   }
      //                 }
      //               });
      //             });
      //           });
    },
    chooseAll() {
      // console.log("点击批量房间-----------------------------");
      // console.log(this.data[0].children);
      if (this.checked) {
        this.$refs.roomTree.setCheckedNodes(this.data[0].children);
        this.count = this.data[0].children;
      } else {
        this.$refs.roomTree.setCheckedNodes([]);
        this.count = [];
      }
    },
    dialogShow(e) {
      this.dialogVisible = true;
      this.$nextTick(function() {
        this.$refs.roomTree.setCheckedNodes([]);
      });
      this.title = e.target.innerText;
      this.checked = false;
      // console.log(this);
      if (this.title == "批量关房") {
        // console.log("批量关房");
        this.count = [];
        this.checked = false;

        // this.$refs.roomTree.setCheckedNodes([]);
        {
          this.data[0].children = [];

          this.Data.forEach(items => {
            items.room.forEach(item => {
              this.roomData.forEach((i, index) => {
                // console.log(i);
                if (item.id == i.roomId) {
                  this.$set(item, "doorLockShow", false);
                  // console.log(i);
                  let arr = {
                    id: i.roomId,
                    label: i.build + "栋" + i.roomNo,
                    statuId: i.statuId
                  };
                  if (i.statu == 1) {
                    this.data[0].children.push(arr);
                  }
                }
              });
            });
          });
        }
      } else {
        // console.log("批量开房");
        this.data[0].children = [];
        this.count = [];
        this.checked = false;
        this.Data.forEach(items => {
          items.room.forEach(item => {
            this.roomData.forEach((i, index) => {
              if (item.id == i.roomId) {
                this.$set(item, "doorLockShow", false);
                // console.log(i);
                let arr = {
                  id: i.roomId,
                  label: i.build + "栋" + i.roomNo,
                  statuId: i.statuId
                };
                if (i.statu == 5) {
                  this.data[0].children.push(arr);
                }
              }
            });
          });
        });
      }
    },
    load() {
      // this.count += 0;
      // if (this.count < 50) {
      //   this.count += 4;
      // }
    },
    // 勾选房间
    checkRoom(data, nodes) {
      this.count = _.cloneDeep(nodes.checkedNodes);
      nodes.checkedNodes.forEach((item, index) => {
        if (item.children) {
          this.count.splice(index, 1);
        }
      });
      if (this.data[0].children.length == this.count.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }

      // console.log(this.count);
    },
    // 取消选中房间
    cancelCheck(i) {
      // console.log(i);
      this.count = this.count.filter(item => {
        return i.id != item.id;
      });
      if (this.data[0].children.length == this.count.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.$refs.roomTree.setCheckedNodes(this.count);
      // console.log(this.count);
    },
    PLcloseRoom() {
      this.dialogVisible = false;
      if (this.title == "批量关房") {
        let roomId = [];
        let startDate = dayjs(new Date()).format("YYYY-MM-DD");
        let endDate = dayjs(new Date())
          .add(1, "day")
          .format("YYYY-MM-DD");
        let remark = "锁定房间";

        this.count.forEach(item => {
          roomId.push(item.id);
        });
        // console.log(roomId);
        this.$confirm("确认关闭房间吗？")
          .then(_ => {
            this.API.roomRealTimeStatu
              .lock({ roomId, startDate, endDate, remark })
              .then(res => {
                // console.log(res);
                if (res.success) {
                  this.$message({
                    message: "关房成功",
                    type: "success"
                  });
                  this.roomList(this.Data);
                  this.allList();
                  this.room = false;
                  this.count = [];
                  this.$refs.roomTree.setCheckedNodes([]);
                } else {
                  this.$message.error(res.message);
                }
              });
          })
          .catch(_ => {});
      } else if (this.title == "批量开房") {
        let statuIds = [];
        // let startDate = dayjs(new Date()).format("YYYY-MM-DD");
        // let endDate = dayjs(new Date())
        //   .add(1, "day")
        //   .format("YYYY-MM-DD");
        this.count.forEach(item => {
          statuIds.push(item.statuId);
        });
        this.$confirm("确认开房吗？")
          .then(_ => {
            this.API.roomRealTimeStatu.clean({ statuIds }).then(res => {
              // console.log(res);
              if (res.success) {
                this.$message({
                  message: "成功转为空闲房",
                  type: "success"
                });
                this.roomList(this.Data);
                this.allList();
                this.room = false;
                this.count = [];
                this.$refs.roomTree.setCheckedNodes([]);
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(_ => {});
        //   this.API.roomRealTimeStatu.clean(item.statuId).then(res => {
        //   console.log(res);
        //   console.log(item);
        //   if (res.success) {
        //     this.roomList(this.Data);
        //     this.allList();
        //     this.$message({
        //       message: "成功转为空闲房",
        //       type: "success"
        //     });
        //   } else {
        //     this.$message.error(res.message);
        //   }
        // });
      }
    },
    // 批量开关房end

    //脏房转空闲
    leisure(item) {
      // console.log(item);
      // console.log(item.statuId);
      let statuIds = [item.statuId];
      this.API.roomRealTimeStatu.clean({ statuIds }).then(res => {
        // console.log(res);
        if (res.success) {
          this.roomList(this.Data);
          this.allList();
          this.$message({
            message: "成功转为空闲房",
            type: "success"
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 锁定房间
    closeRoom(item) {
      // console.log(item);
      let roomId = [item.roomId];
      let startDate = dayjs(this.$store.state.user.time).format("YYYY-MM-DD");
      // let startDate = this.$store.state.user.time;
      let endDate = dayjs(new Date())
        .add(36000, "day")
        .format("YYYY-MM-DD");
      // console.log(startDate, endDate);

      // let startDate = "2022-08-23";
      // let endDate = "2022-08-24";
      let remark = "锁定房间";
      this.API.roomRealTimeStatu
        .lock({ roomId, startDate, endDate, remark })
        .then(res => {
          // console.log(res);
          if (res.success) {
            this.roomList(this.Data);
            this.allList();
            this.$message({
              message: "关房成功",
              type: "success"
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 转脏房
    todirty(item) {
      // console.log(item);
      let roomId = item.roomId;
      let startDay = dayjs(this.date).format("YYYY-MM-DD");
      let endDay = dayjs(this.date)
        .add(1, "day")
        .format("YYYY-MM-DD");
      // let startDate = "2022-08-23";
      // let endDate = "2022-08-24";
      this.API.roomRealTimeStatu
        .toDirty({ roomId, startDay, endDay })
        .then(res => {
          // console.log(res);
          if (res.success) {
            this.roomList(this.Data);
            this.allList();
            this.$message({
              message: "成功转为脏房",
              type: "success"
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 关电
    closeEle(item) {
      // console.log(item);
      let operType = "";
      let roomId = item.roomId;
      this.$confirm(`确认${item.electricName}吗？`)
        .then(_ => {
          if (item.electricType == 1) {
            operType = "2";
          } else {
            operType = "1";
          }
          let reqFlag = true;
          if (reqFlag) {
            this.API.roomThirdSetting
              .changeElectric(roomId, operType)
              .then(res => {
                reqFlag = false;
                // console.log(res);
                if (res.success) {
                  this.roomList(this.Data);
                  this.$message({
                    message: `${item.electricName}成功`,
                    type: "success"
                  });
                  reqFlag = true;
                } else {
                  this.$message.error(res.message);
                }
              });
          }
        })
        .catch(_ => {});
    },

    // IC卡页面
    ICpage(roomNo) {
      // console.log(roomNo);
      sessionStorage.setItem("roomNo", JSON.stringify(roomNo));
      this.$router.push({
        name: "icCard",
        params: {
          roomNo: roomNo
        }
      });
    },
    // 指纹页面
    fingerprintPage(roomNo) {
      sessionStorage.setItem("roomNo", JSON.stringify(roomNo));
      this.$router.push({
        name: "fingerprint",
        params: {
          id: 12345
        }
      });
    },
    // 房态筛查
    handleCheckAllChange(val) {
      // console.log(val);
      this.roomList();
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // this.API.room.roomPageGroup({ curPage: 1, pageSize: 100 }).then((res) => {
      //
      // });
      // this.roomList();
      if (value.length) {
        // console.log(this.Data);

        let array = [];
        let room = [];
        this.allData.forEach((items, index) => {
          array.push({ floor: items.floor, room: [] });
          items.room.forEach((item, ind) => {
            if (
              value.some(i => {
                return i == item.statuName;
              })
            ) {
              room.push(item);
            }
          });
        });
        room.forEach(items => {
          array.forEach(item => {
            if (items.floor == item.floor) {
              item.room.push(items);
            }
          });
        });
        array = array.filter((item, index) => {
          return item.room.length;
        });
        if (array.length == 0) {
          // this.roomList();
          // console.log("勾选的房间数量为0");
          this.Data = [];
          this.data[0].children = [];
        } else {
          // this.roomList(array, "");
          // console.log("勾选的房间数量有房间");
          this.Data = array;
          this.data[0].children = [];

          this.Data.forEach(items => {
            items.room.forEach(item => {
              this.roomData.forEach((i, index) => {
                if (item.id == i.roomId) {
                  this.$set(item, "doorLockShow", false);
                  // console.log(i);
                  let arr = {
                    id: i.roomId,
                    label: i.build + "栋" + i.roomNo
                  };
                  if (i.statu == 1) {
                    this.data[0].children.push(arr);
                  }
                }
              });
            });
          });
        }
        // console.log(value);
      } else {
        this.roomList();
      }

      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    reset() {
      this.roomList();
      this.checkedCities = [];
      this.isIndeterminate = false;
      this.checkAll = false;
      this.ids = 0;
    },

    //门锁管理
    lockClose(item) {
      // this.Data.forEach((items) => {
      //   items.room.forEach((i) => {
      //     if (item.id == i.id) {
      //       this.$set(i, "doorLockShow", false);
      //     }
      //   });
      // });
      // item.doorLockShow = false;
      this.$set(item, "doorLockShow", false);
    },
    // 下发密码
    sending(item) {
      // console.log(item);
      this.$confirm(`确认下发密码(${item.lockRealtimePassword})吗？`)
        .then(_ => {
          this.API.doorLock.sendPassword(item.id).then(res => {
            // console.log(res);
            if (res.success) {
              this.$message({
                message: "下发密码成功",
                type: "success"
              });
              this.doorLock = false;
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(_ => {});
    },
    roomLock(item) {
      // console.log(item);
      this.$set(item, "doorLockShow", true);
      // 房间id查询密码锁
      this.API.doorLock.roomDoorLockRoomId(item.roomId).then(res => {
        // console.log(res);
        this.roomPassWord = res.data;
      });
      // 根据房间id查询(拿到电表码，水表码)
      this.API.roomThirdSetting.settingId(item.roomId).then(res => {
        // console.log(res.data);
        this.doorLockList.id = res.data.id;
        this.doorLockList.roomId = res.data.roomId;
        this.doorLockList.electricityId = res.data.electricId;
        this.doorLockList.waterId = res.data.waterId;
        this.doorLockList.doorId = res.data.lockId;
      });
    },

    // 编辑门锁ID
    editlock() {
      this.doorLockList.doorIdshow = false;
    },
    editLockInput() {
      this.doorLockList.doorIdshow = true;
      // console.log(111);
    },

    // 门锁序列号
    editRoomNum() {
      this.doorLockList.doorNumshow = false;
    },
    editRoomNumInput() {
      this.doorLockList.doorNumshow = true;
      // console.log(111);
    },

    // 编辑水表编码
    editWater() {
      this.doorLockList.waterIdshow = false;
    },
    editWaterInput() {
      this.doorLockList.waterIdshow = true;
      // console.log(111);
    },

    // 编辑电表编码
    editEle() {
      this.doorLockList.electricityIdshow = false;
    },
    editEleInput() {
      this.doorLockList.electricityIdshow = true;
      // console.log(111);
    },

    // 修改房间水表码、电表码、锁id
    UpdataRoom(item) {
      // console.log(item);
      item.doorLockShow = false;
      // console.log(this.doorLockList);
      let arr = {
        id: this.doorLockList.id,
        roomId: item.roomId,
        waterId: this.doorLockList.waterId,
        electricId: this.doorLockList.electricityId,
        lockId: this.doorLockList.doorId
      };
      // console.log(arr);
      this.$confirm(`确认修改吗？`)
        .then(_ => {
          this.API.roomThirdSetting.Updata(arr).then(res => {
            if (res.success) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
            } else {
              // console.log(res);
              this.$message.error(res.message);
            }
          });
        })
        .catch(_ => {});
    },

    // 取消修改房间水表码、电表码、锁id
    cancel() {
      this.dialogVisible = false;
    }
  }
};
</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: 833px;

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

    .inquire-button {
      width: 73px;
      height: 37px;
      font-size: 16px;
      margin: 0 20px 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;
            position: relative;
            .tuifang {
              position: absolute;
              right: 35px;
              top: 100px;
              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;
                    }
                  }
                }
              }
            }
            .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;
                justify-content: space-between;
                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: 7px;
                  background: rgba(41, 109, 227, 1);
                }
              }
              .teacher {
                margin: 5px 15px;
              }
              .num {
                margin: 5px 15px;
              }
              .count-down {
                margin-left: 15px;
                display: flex;

                span {
                  margin-right: 54px;
                }
              }
            }
            .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: 243px;
        .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: 240px;

          .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;
}
.dialongAllRoom {
  .el-dialog__footer {
    .el-button--primary {
      background: rgba(41, 109, 227, 1);
    }
  }
}
/deep/ .lock.el-dialog {
  box-shadow: none;
  margin: 350px 0 0 450px !important;
  width: 555px !important;
  height: 377px !important;

  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    padding: 0;
    .title {
      font-size: 18px;
      color: #000;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      padding: 20px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      i {
        cursor: pointer;
      }
    }
    .roomID {
      display: flex;
      height: 49px;
      .roompassword {
        margin: 10px 19px;
        .sendpass {
          margin: 5px;
        }
        .password {
          margin-left: 10px;
          color: #fff;
          border-radius: 2px;
          font-size: 12px;
          padding: 2px;
          cursor: pointer;
          background-color: rgba(41, 109, 227, 1);
        }
      }
      .roomblock {
        margin: 10px 19px;
        width: 262px;
        display: flex;
        align-items: center;
        span {
          margin-right: 5px;
        }
        .number {
          display: flex;
          span {
            margin-right: 5px;
          }
        }
      }

      .el-input {
        width: 150px;
      }
    }
  }
  .el-dialog__footer {
    margin: 20px 14px 0px 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;
      }
    }
  }
}

/deep/ .addroom.el-dialog {
  box-shadow: none;
  margin: 150px 0 0 600px !important;
  width: 700px !important;
  .el-dialog__header {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
  }
  .el-dialog__body {
    .el-form {
      display: flex;
      .room {
        margin: 0 40px;
      }
    }
  }
  .el-dialog__footer {
    margin: 40px 14px 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;
      }
    }
  }
}

/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;
      overflow: auto;
    }

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

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

  .control-room {
    width: 70px;
    // height: 167px;
    opacity: 1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    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;
    .el-button {
      margin-left: 0;
      height: 24px !important;
      color: rgba(0, 0, 0, 1);
      border: none;
      border-radius: 0;
      // background-color: #f0f3f7;
    }
  }
  .popper__arrow {
    top: 35px !important;
  }
}
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3;
  }
}
</style>
