<template>
  <div class="inform">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <!-- 标题区域 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }"
            >房态管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>IC卡管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 主体内容区域 -->
      <div class="inform-body">
        <!-- 筛选条件区域 -->
        <div class="order-top">
          <!-- 订单号筛选 -->
          <div class="inquire">
            <el-input
              placeholder="请输入姓名或卡号"
              style="width: 261px"
              clearable
              v-model="queryValue"
              @clear="getData(1)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button @click="getData(1)">查询</el-button>
          </div>
          <!-- 创建时间筛选 -->
          <div class="paydate">
            <span class="demonstration">创建时间:</span>
            <el-date-picker
              v-model="queryCreateTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @change="getData(1)"
            ></el-date-picker>
          </div>

          <!-- 支付时间筛选 -->
          <div class="paydate">
            <span class="demonstration">用户类型:</span>
            <!-- <el-input
              placeholder="请输入订单号"
              style="width: 261px"
              clearable
              v-model="value"
              @clear="getData(1)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>-->
            <el-select
              v-model="queryUserType"
              clearable
              placeholder="请选择类型"
              @change="getData(1)"
            >
              <el-option label="普通用户" value="2"></el-option>
              <el-option label="管理员" value="1"></el-option>
            </el-select>
          </div>

          <!-- 名字筛选 -->
          <!-- <div class="inquire">
            <el-input
              placeholder="请输入姓名"
              style="width: 261px"
              clearable
              v-model="queryName"
              @clear="getData(1)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          <el-button @click="getData(1)">查询</el-button>
          </div>-->
          <div class="add">
            <div class="export" @click="addCard">新增</div>
            <el-dialog
              :visible.sync="addDialogShow"
              :append-to-body="true"
              custom-class="addDialog"
            >
              <div class="elbody">
                <span class="ic">IC卡录入</span>
                <el-button @click="addDialogShow = false">关 闭</el-button>
                <el-button @click="save" type="primary">保 存</el-button>
              </div>
              <div slot="footer" class="dialog-footer">
                <div style="margin-left: 100px">
                  <el-divider content-position="left">基本信息</el-divider>
                </div>
                <el-form :model="icCardInfo" label-position="top">
                  <div class="left">
                    <el-form-item label="卡类型">
                      <el-select
                        v-model="icCardInfo.cardType"
                        placeholder="请选择卡类型"
                      >
                        <el-option label="IC卡" value="IC卡"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                      <el-select
                        v-model="icCardInfo.statu"
                        placeholder="请选择状态"
                      >
                        <el-option label="生效" value="1"></el-option>
                        <el-option label="失效" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="房间编号(锁设备UID)">
                      <el-input :value="icCardInfo.roomNo"></el-input>
                    </el-form-item>
                    <el-form-item label="生效时间(默认今天)">
                      <el-date-picker
                        v-model="startTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="right">
                    <el-form-item label="卡号">
                      <el-input v-model="icCardInfo.cardNumber"></el-input>
                      <span
                        style="
                          position: absolute;
                          left: 200px;
                          color: #296de3;
                          cursor: pointer;
                        "
                        @click="icCardS"
                        >读卡</span
                      >
                      <el-dialog
                        :visible.sync="icCardShow"
                        :append-to-body="true"
                        custom-class="fingerprint"
                      >
                        <div class="elbodys">
                          <span class="title">读取卡号</span>
                          <i class="el-icon-close" @click="icCardClose"></i>
                        </div>
                        <div class="el-footer">
                          {{ icTitle }}:{{ icCardInfo.cardNumber }}
                        </div>
                      </el-dialog>
                    </el-form-item>

                    <el-form-item label="姓名">
                      <el-input v-model="icCardInfo.name"></el-input>
                      <span
                        style="
                          position: absolute;
                          left: 200px;
                          color: #296de3;
                          cursor: pointer;
                        "
                        @click="Editstaff"
                        >员工</span
                      >
                      <el-dialog
                        title="添加员工"
                        :visible.sync="selectStaffShow"
                        width="692px"
                        append-to-body
                        custom-class="dialongAllRoom"
                        center
                      >
                        <div class="tree">
                          <div class="tree-left">
                            <span style="margin-left: 15px">列表</span>
                            <span style="margin-left: 228px">1/1</span>
                          </div>
                          <el-tree
                            :data="data"
                            show-checkbox
                            node-key="id"
                            ref="roomTree"
                            :default-expand-all="true"
                            :props="defaultProps"
                            @check="checkStaff"
                          ></el-tree>
                        </div>
                        <div class="tree">
                          <div class="tree-left">
                            <p style="margin-left: 15px">已选</p>
                          </div>
                          <ul class="infinite-list" style="overflow: auto">
                            <li class="infinite-list-item" v-show="title">
                              <span style="margin-left: 19px">{{ title }}</span>
                              <!-- <i class="el-icon-close" @click="cancelCheck"></i> -->
                            </li>
                          </ul>
                        </div>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="selectStaffShow = false"
                            >取 消</el-button
                          >
                          <el-button
                            type="primary"
                            @click="selectStaffShow = false"
                            >确 定</el-button
                          >
                        </span>
                      </el-dialog>
                    </el-form-item>
                    <el-form-item label="用户类型">
                      <el-select
                        v-model="icCardInfo.userType"
                        placeholder="用户"
                      >
                        <el-option label="普通用户" value="2"></el-option>
                        <el-option label="管理员" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="失效时间">
                      <el-date-picker
                        v-model="endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="12:00:00"
                        @change="endT"
                      ></el-date-picker>
                    </el-form-item>
                    <el-radio-group
                      v-model="radio"
                      v-show="selectTime"
                      @change="radioChange"
                    >
                      <el-radio label="一个星期">一个星期</el-radio>
                      <el-radio label="一个月">一个月</el-radio>
                      <el-radio label="半年">半年</el-radio>
                      <el-radio label="一年">一年</el-radio>
                      <el-radio label="长期">长期</el-radio>
                    </el-radio-group>
                  </div>
                </el-form>
              </div>
            </el-dialog>

            <div class="export" @click="exportExcel">导出IC卡</div>
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="inform-table">
          <!-- 表格区域 -->
          <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            class="Devicetable"
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)'
            }"
          >
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column
              prop="roomNo"
              width="120"
              label="房间编号"
              align="center"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="cardNumber"
              width="200"
              align="center"
              label="IC卡号"
              show-overflow-tooltip
            >
              <!-- <template slot-scope="{ row }">{{ options[row.order.orderStatu].label }}</template> -->
            </el-table-column>

            <el-table-column
              prop="takeTime"
              align="center"
              width="200"
              label="生效时间"
            ></el-table-column>
            <el-table-column
              prop="failureTime"
              align="center"
              width="200"
              label="失效时间"
            ></el-table-column>
            <el-table-column
              prop="holderName"
              align="center"
              label="持卡人姓名"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              width="200"
              label="创建时间"
            ></el-table-column>
            <el-table-column align="center" label="用户类型">
              <template slot-scope="scope">
                <span>{{
                  scope.row.userType == 1 ? "管理员" : "普通用户"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="statu" align="center" label="状态">
              <template slot-scope="{ row }">{{
                row.statu == 0 ? "失效" : "生效"
              }}</template>
            </el-table-column>
            <el-table-column prop="address" align="center" label="操作">
              <template slot-scope="{ row }">
                <!-- 解绑按钮 -->
                <span @click="handleDelete(row)" class="operate">解绑</span>
                <!-- 编辑按钮 -->
                <span @click="addCard(row)" class="operate">编辑</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器区域 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :current-page="curPage"
            layout="prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import dayjs from "dayjs";
import _ from "lodash";
export default {
  name: "icCard",
  data() {
    return {
      roomNo: "",
      // 显示的总数据
      tableData: [],
      // 多选框按钮勾选的数据
      selectionTable: [],
      // 新增 弹窗属性
      addDialogShow: false,
      nameValue: "",
      radio: "一个星期",
      icCardInfo: {
        id: "",
        cardType: "",
        userType: "",
        roomNo: "",
        cardId: "",
        name: "",
        cardNumber: "",
        statu: 1
      },
      count: [],
      startTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      endTime: dayjs(new Date())
        .add(7, "day")
        .format("YYYY-MM-DD HH:mm:ss"),

      // 员工弹窗属性
      selectStaffShow: false,
      selectTime: true, // 新增才有的选择房间时长
      defaultProps: {
        children: "children",
        label: "label"
      },
      title: "",
      data: [
        // {
        //   id: 1,
        //   label: "清洁部",
        //   disabled: true,
        //   children: [
        //     {
        //       id: 4,
        //       label: "张三"
        //     },
        //     {
        //       id: 5,
        //       label: "张三"
        //     },
        //     {
        //       id: 6,
        //       label: "张三"
        //     },
        //     {
        //       id: 7,
        //       label: "张三"
        //     }
        //   ]
        // }
      ], // 员工列表

      icCardShow: false, // 读取卡号页面弹窗
      icTitle: "请放置卡片", // 卡片读取状态

      // 筛选查询卡号绑定数据
      queryValue: "",
      // 筛选用户状态绑定数据
      queryUserType: "",
      // 筛选创建时间绑定数据
      queryCreateTime: "",
      // 弹窗控制属性
      dialogVisible: false,
      waterTable: [],
      electricTable: [],
      order: [], // 用户信息
      // 当前页
      curPage: 1,
      // 每页条数
      pageSize: 8,
      // 总条数
      total: null
    };
  },
  watch: {
    startTime(newVal, oldVal) {
      // console.log(this.endTime > newVal);
      if (this.endTime <= newVal) {
        this.endTime = "";
      }
      this.icCardInfo.radio = "";
    }
  },
  mounted() {
    this.roomNo = JSON.parse(sessionStorage.getItem("roomNo"));
    this.API.hotelStaff
      .departList()
      .then(res => {
        // console.log(res, "员工类型");

        let data = [];
        res.data.forEach(item => {
          let children = [];
          item.staffs.forEach(i => {
            children.push({
              label: i.username,
              id: i.id
            });
          });
          let arr = {
            id: item.id,
            label: item.department,
            disabled: true,
            children
          };

          data.push(arr);
        });

        this.data = data;
        // console.log(data);
      })
      .catch(err => {
        console.log(err);
      });
    this.getData();
  },
  methods: {
    // 返回首页
    goBack() {
      this.$router.push({
        name: "Home"
      });
    },
    // 获取表格数据
    async getData() {
      let params = "";
      if (!this.queryCreateTime) {
        this.queryCreateTime = "";
      }
      params = `${this.roomNo}?curPage=${this.curPage}&pageSize=${this.pageSize}&keyWord=${this.queryValue}&createTime=${this.queryCreateTime}&userType=${this.queryUserType}`;
      // console.log(params);
      let res = await this.API.icCard.icqueryInfo(params);
      // console.log(res);
      if (res.success) {
        this.tableData = res.data.list;
        this.total = res.data.totalCount;
      } else {
        this.$message.error(res.message);
      }
    },
    //新增弹窗
    async addCard(row) {
      // console.log(row);
      this.addDialogShow = true;
      // 点击编辑
      if (event.target.innerText == "编辑") {
        this.nameValue = "编辑";
        // console.log("编辑");
        this.selectTime = false;
        this.icCardInfo = {
          id: row.id.toString(),
          cardType: "IC卡",
          userType: row.userType,
          roomNo: row.roomNo,
          cardId: row.cardNumber,
          name: row.holderName,
          statu: row.statu,
          cardNumber: row.cardNumber
        };
        this.startTime = row.takeTime;
        this.endTime = row.failureTime;
      } else if (event.target.innerText == "新增") {
        // console.log("新增");
        this.nameValue = "新增";
        this.selectTime = true;
        this.icCardInfo = {
          id: "",
          cardType: "IC卡",
          userType: "",
          roomNo: this.roomNo,
          cardId: "",
          name: "",
          radio: "一个星期",
          statu: "1",
          cardNumber: ""
        };
        this.startTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
        this.endTime = dayjs(new Date())
          .add(7, "day")
          .format("YYYY-MM-DD HH:mm:ss");
      }
    },
    // 保存按钮
    async save() {
      if (this.nameValue == "编辑") {
        // console.log("编辑");
        let params = {
          id: this.icCardInfo.id,
          cardNumber: this.icCardInfo.cardNumber,
          roomNo: this.icCardInfo.roomNo,

          holderName: this.icCardInfo.name,
          userType: this.icCardInfo.userType,
          takeTime: this.startTime,
          failureTime: this.endTime,
          createTime: this.startTime,
          statu: this.icCardInfo.statu
        };
        // console.log(params);
        let res = await this.API.icCard.update(params);
        if (res.success) {
          // console.log(res);
          this.$message.success(res.message);
          this.addDialogShow = false;
          this.getData();
        } else {
          this.$message.error(res.message);
        }
      } else if (this.nameValue == "新增") {
        // console.log("新增");
        let params = {
          cardNumber: this.icCardInfo.cardNumber,
          roomNo: this.icCardInfo.roomNo,
          holderName: this.icCardInfo.name,
          userType: this.icCardInfo.userType,
          takeTime: this.startTime,
          failureTime: this.endTime,
          createTime: this.startTime,
          statu: this.icCardInfo.statu
        };
        let res = await this.API.icCard.add(params);
        if (res.success) {
          // console.log(res);
          this.$message.success(res.message);
          this.addDialogShow = false;
          this.getData();
        } else {
          this.$message.error(res.message);
        }
      }
    },
    endT() {
      if (
        this.endTime <
        dayjs(this.startTime)
          .add(1, "day")
          .format("YYYY-MM-DD HH:mm:ss")
      ) {
        this.$message({
          message: "失效日期应大于生效日期至少一天",
          type: "error"
        });
        this.endTime = "";
      }
      this.icCardInfo.radio = "";
    },
    radioChange(value) {
      this.radio = value;
      if (this.radio == "一个星期") {
        this.endTime = dayjs(this.startTime)
          .add(1, "week")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.radio == "一个月") {
        this.endTime = dayjs(this.startTime)
          .add(1, "month")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.radio == "半年") {
        this.endTime = dayjs(this.startTime)
          .add(6, "month")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.radio == "一年") {
        this.endTime = dayjs(this.startTime)
          .add(1, "year")
          .format("YYYY-MM-DD HH:mm:ss");
      } else if (this.radio == "长期") {
        this.endTime = dayjs(this.startTime)
          .add(100, "year")
          .format("YYYY-MM-DD HH:mm:ss");
      }
      // console.log(this.startTime, this.endTime);
    },
    //  读取卡号弹窗
    icCardS() {
      this.icCardShow = true;
      let _this = this;
      _this.icCardInfo.cardNumber = "";
      var wsUrl = "ws://localhost:8181/";
      let websocket = new WebSocket(wsUrl);
      websocket.onopen = function(evt) {
        var params = { type: 104, data: null };
        websocket.send(JSON.stringify(params));
      };

      websocket.onmessage = function(evt) {
        let data = JSON.parse(evt.data);
        // console.log(data);
        if (data.type == 150) {
          _this.icTitle = "未放置卡片,请重新读卡";
        } else if (data.type == 141) {
          _this.icTitle = "获取卡号失败";
        } else if (data.type == 140) {
          _this.icTitle = "获取卡号成功";
          _this.icCardInfo.cardNumber = data.data.uid;
          setTimeout(() => {
            _this.icCardShow = false;
          }, 2000);
        }
      };
    },
    // 关闭读取卡号弹窗
    icCardClose() {
      this.icCardShow = false;
    },
    //员工弹窗
    Editstaff() {
      this.selectStaffShow = true;
    },
    checkStaff(data, nodes) {
      // console.log(data, nodes);
      this.$refs.roomTree.setCheckedNodes([]);
      this.count = [
        {
          id: data.id,
          label: data.label
        }
      ];
      // console.log(this.count);
      this.$refs.roomTree.setCheckedNodes(this.count);
      this.title = this.count[0].label;
      this.icCardInfo.name = this.count[0].label;
    },
    cancelCheck() {
      // console.log(222);
      //   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);
    },

    // 导出订单按钮回调
    exportExcel() {
      let params = {
        keyWord: this.queryValue,
        userType: this.queryUserType,
        roomNo: this.roomNo,
        createTime: this.queryCreateTime
      };
      this.API.icCard.downLoadICInfo(params).then(res => {
        // console.log(res);
        let name = `${this.roomNo}房IC卡数据`;
        var content = res;
        // var data = new Blob([content],{type:"application/octet-stream;charset=utf-8"});
        var data = new Blob([content], {
          type: "application/vnd.ms-excel;charset=utf-8"
        });
        var downloadUrl = window.URL.createObjectURL(data);
        var anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = name + ".xlsx";
        anchor.click();
        window.URL.revokeObjectURL(data);
        if (res) {
          this.$message.success("导出成功");
        } else {
          this.$message.error("导出失败");
        }
      });
    },

    // 导出表格
    // excel(id) {
    //   let xlsxParam = { raw: true };
    //   /* generate workbook object from table */
    //   let wb = XLSX.utils.table_to_book(document.querySelector(id));
    //   /* get binary string as output */
    //   let wbout = XLSX.write(wb, {
    //     bookType: "xlsx",
    //     bookSST: true,
    //     type: "array"
    //   });
    //   try {
    //     FileSaver.saveAs(
    //       new Blob([wbout], { type: "application/octet-stream" }),
    //       "订单管理.xlsx"
    //     );
    //   } catch (e) {
    //     if (typeof console !== "undefined") console.log(e, wbout);
    //   }
    //   return wbout;
    // },

    //解绑按钮回调
    handleDelete(row) {
      // console.log(row.order.id);
      this.$confirm("确认解绑？")
        .then(async () => {
          let res = await this.API.icCard.unbundIC({
            statu: "0",
            id: row.id
          });
          // console.log(res);
          if (res.success) {
            this.$message.success("解绑成功");
            let totalPage = Math.ceil((this.total - 1) / this.pageSize);
            let currentPage =
              this.curPage > totalPage ? totalPage : this.curPage;
            this.curPage = currentPage < 1 ? 1 : currentPage;
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    // 翻页逻辑回调
    handleCurrentChange(val) {
      this.curPage = val;
      this.getData();
    },

    // 多选框按钮操作
    handleSelectionChange(list) {
      // console.log(list);
      this.selectionTable = list;
    },

    // 表格样式设置
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.inform /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .el-breadcrumb {
      margin-left: 33px;
      .el-breadcrumb__item {
        font-size: 20px;
      }
    }
  }
  .inform-body {
    .order-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 33px 29px 34px 33px;
      font-size: 16px;
      font-weight: 400;
      color: #000;
      .add {
        display: flex;
        align-items: center;
      }
      .el-button {
        background-color: rgba(41, 109, 227, 1);
        color: #fff;
        margin-left: 9px;
      }
      .paydate {
        margin: 0 0 0 0px;
        .el-date-editor {
          margin-left: 7px;
          width: 236px;
          .el-range__icon {
            display: none;
          }
        }
      }
      .state {
        // margin-left: 30px;
        .el-input {
          width: 150px;
        }
      }
      .export {
        width: 94px;
        height: 32px;
        opacity: 1;
        color: #fff;
        text-align: center;
        line-height: 32px;
        background: rgba(41, 109, 227, 1);
        cursor: pointer;
        border-radius: 2px;
        margin-left: 10px;
      }
    }
    .inform-table {
      .execlTable,
      .selectTable {
        display: none;
      }
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
          .el-checkbox.is-checked {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }

          .el-checkbox__input.is-checked,
          .el-checkbox__input.is-indeterminate {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }
        }
        tr {
          height: 64px;
          td {
            .cell {
              .el-dialog__wrapper {
                .el-dialog.editCard {
                  width: 1136px !important;
                  height: 644px !important;
                  .el-dialog__header {
                    height: 86px;
                    padding: 0;
                    display: flex;
                    align-items: center;
                  }
                  .el-dialog__body {
                    text-align: left;
                    .dialog-footer {
                      .el-divider--horizontal {
                        width: 900px;
                        .el-divider__text {
                          font-size: 20px;
                        }
                      }
                    }
                    .el-form {
                      display: flex;
                      justify-content: center;
                      .left {
                        margin: 0 100px;
                      }
                      .right {
                        margin: 0 85px;
                      }
                    }
                    .el-input {
                      width: 240px;
                    }
                  }
                  .el-dialog__footer {
                  }
                }
              }
              .el-checkbox.is-checked {
                .el-checkbox__inner {
                  background-color: rgba(41, 109, 227, 1);
                }
              }
              .is-indeterminate {
                .el-checkbox__inner {
                  background-color: rgba(41, 109, 227, 1);
                }
              }
              .operate {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                padding: 0 5px;
              }
              .el-dialog__wrapper {
                overflow: hidden;
                .el-dialog {
                  width: 968px !important;
                  margin-top: 249px !important;
                  height: 550px;
                  opacity: 1;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: none;
                  .el-dialog__header {
                    height: 83px;
                    border-bottom: 1px solid rgba(230, 230, 230, 1);

                    span {
                      float: left;
                      font-size: 20px;
                      font-weight: 500;
                      color: #000;
                    }

                    .el-dialog__close {
                      width: 35px;
                      height: 35px;
                      &::before {
                        font-size: 24px;
                        color: #000;
                      }
                    }
                  }
                  .el-dialog__body {
                    padding: 0 38px;
                    .userinfo {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin-top: 15px;
                    }
                    .info {
                      display: flex;
                      .user {
                        .name {
                          text-align: left;
                          padding: 12px 0;
                        }
                        .el-input {
                          width: 283px;
                          height: 38px;
                          opacity: 1;
                          margin-right: 81px;
                          .el-input__inner {
                            color: #000;
                          }
                        }
                      }
                    }
                    .rate {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin: 15px 0;
                    }
                    .water {
                      text-align: left;
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 0, 0, 1);
                    }
                    .el-table {
                      margin: 10px 0;
                      tr {
                        height: 48px;
                      }
                      .el-table__body-wrapper {
                        overflow: visible;
                      }
                    }
                  }
                }
              }

              .el-dialog__title {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                padding: 10px 18px 0 18px;
              }
            }
          }
          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            &::after {
              transform: rotate(45deg) scaleY(1.5);
              top: 3px;
              left: 5px;
            }
          }
        }
        th {
          font-weight: 400;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .el-pagination {
        padding: 0;
        button {
          width: 36px;
          background: #fff;
          color: rgba(0, 0, 0, 1);
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
        }
        ul {
          .active {
            background: #fff;
            color: rgba(0, 97, 255, 1);
            border: 1px solid rgba(0, 97, 255, 1);
            box-sizing: border-box;
          }
          .el-icon {
            border: none;
          }
          li {
            background: #fff;
            color: rgba(0, 0, 0, 1);
            width: 36px;
            height: 36px;
            font-size: 14px;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8px;
            line-height: 36px;
          }
        }
        .el-pagination__jump {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          margin-left: 10px;
          font-weight: 400;
          height: 36px;
          .el-input {
            width: 65px;
            height: 36px;
            margin: 0 10px;
            input {
              width: 65px;
              height: 36px;
              border: 1px solid rgba(0, 0, 0, 1);
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
.el-dialog__wrapper {
  /deep/ .addDialog {
    width: 1136px;
    height: 644px;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 86px;
      padding: 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .elbody {
        display: flex;
        align-items: center;
        .ic {
          font-size: 20px;
          color: #000;
          margin: 0 850px 0 25px;
        }
        display: flex;
        .el-button--primary {
          background: #296de3;
        }
      }
    }
    .el-dialog__footer {
      text-align: left;
      .dialog-footer {
        .el-divider--horizontal {
          width: 900px;
          .el-divider__text {
            font-size: 20px;
          }
        }
      }
      .el-form {
        display: flex;
        justify-content: center;
        .left {
          margin: 0 100px;
        }
        .right {
          margin: 0 100px;
        }
      }
      .el-input {
        width: 240px;
      }
    }
  }
}

/deep/ .dialongAllRoom {
  .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 {
    .el-button--primary {
      background: rgba(41, 109, 227, 1);
    }
  }
}
/deep/ .fingerprint {
  width: 600px;
  height: 300px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    width: 100%;
    height: 70px;
    padding: 0;
    border-bottom: 1px solid #ccc;
    .elbodys {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      color: #000;

      .el-icon-close {
        cursor: pointer;
        margin-right: 20px;
      }
      .title {
        margin-left: 20px;
      }
      .el-button--primary {
        background: #296de3;
      }
    }
  }
  .el-footer {
    // height: 350px;
    margin: 70px auto;
    font-size: 40px;
    font-weight: 800;
  }
}
</style>
<style lang="scss">
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3;
  }
}
</style>
