<template>
  <div class="device-select-nav main-device-select-card">
    <div v-if="childDeviceList.length > 0" class="layout-select-wrap">
      <!-- <div
        class="but"
        :disabled="tSelectLabelList.length <= 0"
        @click="handleChildStatus('true')"
      >
        <i class="iconfont iconT icon-c"></i>

        <span class="but-title">合闸</span>
      </div>

      <div
        class="but"
        :disabled="tSelectLabelList.length <= 0"
        @click="handleChildStatus('true')"
      >
        <i class="iconfont iconF icon-c"></i>

        <span class="but-title">分闸</span>
      </div>

      <div class="but" @click="handleAllStatus('true')">
        <i class="iconfont iconhezha icon-c"></i>

        <span class="but-title">一键合闸</span>
      </div>

      <div class="but" @click="handleAllStatus('false')">
        <i class="iconfont iconfenzha icon-c"></i>

        <span class="but-title">一键分闸</span>
      </div>

      <div class="but" @click="handleAllSelect('true')">
        <i class="iconfont iconquanxuan icon-c"></i>
        <span class="but-title">{{
          childDeviceList.length > tSelectList.length ? "全选" : "取消"
        }}</span>
      </div> -->

      <el-button
        :disabled="tSelectLabelList.length <= 0"
        plain
        size="mini"
        type="info"
        @click="handleChildStatus('true')"
      >
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <i class="iconfont iconT but-icon" />
          合闸
        </div>
      </el-button>
      <el-button
        :disabled="tSelectLabelList.length <= 0"
        plain
        size="mini"
        type="info"
        @click="handleChildStatus('false')"
      >
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <i class="iconfont iconF but-icon" />
          分闸
        </div>
      </el-button>
      <el-button plain size="mini" type="info" @click="handleAllStatus('true')">
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <i class="iconfont iconhezha but-icon" />
          一键合闸
        </div>
      </el-button>
      <el-button
        plain
        size="mini"
        type="info"
        @click="handleAllStatus('false')"
      >
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <i class="iconfont iconfenzha but-icon" />
          一键分闸
        </div></el-button
      >
      <el-button
        :disabled="tSelectLabelList.length <= 0"
        plain
        size="mini"
        type="info"
        @click="handleDevSearch()"
      >
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <i class="iconfont el-icon-search but-icon" />
          查找设备
        </div>
      </el-button>
      <el-button plain size="mini" type="info" @click="handleAllSelect()">
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <i class="iconfont iconquanxuan but-icon" />
          {{ childDeviceList.length > tSelectList.length ? "全选" : "取消" }}
        </div>
      </el-button>

      <span class="title-span">已选择设备：</span>
      <span v-if="tSelectLabelList.length <= 0">当前未选择设备</span>
      <el-tag
        v-for="(item, idx) in tSelectLabelList"
        :key="idx"
        closable
        style="margin: 5px 5px 5px 0px"
        @close="selectDevClose(item)"
      >
        {{ item }}
      </el-tag>
    </div>
    <div v-else class="layout-select-wrap">
      <span class="title-span">当前没有可用于分闸合闸设备~</span>
    </div>
    <div class="layout-device-list">
      <el-card
        :body-style="{
          padding: '0px',
          width: '220px',
          boxShadow: '0 1px 5px 0 #2530341a',
          cursor: 'pointer'
        }"
        :style="
          deviceInfo.deviceId === checkobxDeviceId
            ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0;'
            : ' margin: 5px; width: 220px; flex-shrink: 0;'
        "
        @click.native="viewDeviceChange(deviceInfo.deviceId)"
      >
        <div class="nav-p-dev">
          <div
            style="
              height: 25px;
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding: 0 10px;
              padding-right: 10px;
              padding-top: 5px;
              justify-content: space-between;
              align-items: baseline;
            "
          >
            <span
              :title="deviceInfo.deviceName"
              class="dev-info-title"
              style="
                font-weight: 400;
                height: 30px;
                font-size: 16px;
                line-height: 30px;
                white-space: nowrap;
                display: inline-block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              >{{ deviceInfo.deviceName }}</span
            >
            <div style="width: 60px; display: flex; justify-content: center">
              <i
                :class="signalType(deviceInfo.stype)"
                style="color: black; font-size: 20px"
              ></i>
              <signal-intensity
                v-if="deviceInfo.stype !== 'LAN' && deviceInfo.stype !== 'lan'"
                :intensityNumber="deviceInfo.signal"
              ></signal-intensity>
            </div>
            <!-- <i
              v-if="deviceInfo.deviceId === checkobxDeviceId"
              class="el-icon-s-claim"
              style="font-size: 25px; color: #1890ff"
            ></i> -->
          </div>
          <div class="dev-info">
            <div
              :class="
                deviceInfo['deviceState'] == 'ONLINE'
                  ? 'dev-info-state'
                  : 'dev-info-state off-line'
              "
            >
              <i
                v-if="deviceInfo['deviceState'] == 'ONLINE'"
                class="iconfont iconSYS_STA_1"
              />
              <i v-else class="iconfont iconlixian" />
              <span style="margin-left: 1px">{{
                deviceInfo["deviceState"] == "ONLINE" ? "在线" : "离线"
              }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <el-card
        v-for="item in childDeviceList"
        :key="item.deviceId"
        :body-style="{ padding: '0px', width: '220px', cursor: 'pointer' }"
        :style="
          item.deviceId === checkobxDeviceId
            ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
            : ' margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
        "
        @click.native="viewDeviceChange(item.deviceId)"
      >
        <div class="nav-c-dev">
          <div
            style="
              height: 25px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding: 0 10px;
              padding-right: 10px;
              padding-top: 15px;
              align-items: center;
            "
          >
            <span
              :title="item.deviceName"
              class="dev-info-title"
              style="
                font-weight: 400;
                height: 30px;
                font-size: 16px;
                line-height: 30px;
                white-space: nowrap;
                display: inline-block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              >{{ item.deviceName }}</span
            >
            <div
              :class="
                tSelectList.indexOf(item.deviceId) >= 0
                  ? 'checkbox-i selected-c'
                  : 'checkbox-i'
              "
              @click.stop="handleCheckbox(item)"
            >
              <i
                v-show="tSelectList.indexOf(item.deviceId) >= 0"
                class="el-icon-check"
              ></i>
            </div>
          </div>
          <div class="dev-info">
            <div
              :class="
                item['deviceState'] === 'ONLINE'
                  ? 'dev-info-state'
                  : 'dev-info-state off-line'
              "
              style="width: 60px"
            >
              <i
                v-if="item['deviceState'] === 'ONLINE'"
                class="iconfont iconSYS_STA_1"
              />
              <i v-else class="iconfont iconlixian" />
              <span style="margin-left: 1px; margin-top: 1px">{{
                getDeviceState(item["deviceState"])
              }}</span>
            </div>
            <div
              style="
                width: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
              "
            >
              <i
                v-if="item['switch'] == '1'"
                class="iconfont iconT"
                style="color: #76bbff; font-size: 16px"
              />
              <i
                v-else
                class="iconfont iconF"
                style="font-size: 16px; color: #878686"
              />

              <span style="margin-left: 1px; margin-top: 1px; color: #878686">{{
                item["switch"] == "1" ? "合闸" : "分闸"
              }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <e-web-socket
      :closeSleepTime="10000"
      :wsServiceUrl="wsStatusService"
      @message="wsMessage($event)"
    ></e-web-socket>
  </div>
</template>

<script>
import {
  listChildrenDevice,
  setSwitchControl,
  setLivetimeControl,
  searchDevControl, setSwitchAllControl
} from "@/api/iot/device";
import {
  devLiveWebSocketBaseUrl,
  webSocketProjectGatewayUrl
} from "@/config/env";
import SignalIntensity from "./signalIntensity";
import EWebSocket from "@/components/EWebSocket/src/basic/index";
import { setFunctionControl } from '../../../api/iot/device'
export default {
  name: "DeviceSelectNav",
  components: {
    SignalIntensity,
    EWebSocket
  },
  props: {
    deviceInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    wsDeviceInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      checkobxDeviceId: "",
      childDeviceList: [],
      stompClient: null,
      socket_flag: true,
      setTimeOut_flag: null,
      timingPingWs_flag: null,
      tSelectList: [],
      tSelectLabelList: [],
      iotSignalType: [],
      // wsDeviceInfo: null?,
      wsStatusService: ""
    };
  },
  created() {
    this.checkobxDeviceId = this.deviceInfo.deviceId || null;
    this.getDicts("iot_signal_type").then(response => {
      this.iotSignalType = response.data;
    });
  },
  watch: {
    wsDeviceInfo: {
      handler: function() {
        this.timingPingWs(this.wsDeviceInfo);
        if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
          for (let i = 0; i < this.childDeviceList.length; i++) {
            if (
              this.childDeviceList[i]["deviceId"] ===
              this.wsDeviceInfo["deviceId"]
            ) {
              if(this.wsDeviceInfo?.switch !== null){
                this.wsDeviceInfo.switch = this.wsDeviceInfo.switch.toString();
              }
              // this.childDeviceList[i]["switch"] =
              //   this.wsDeviceInfo?.switch !== null
              //     ? this.wsDeviceInfo?.switch.toString()
              //     : this.wsDeviceInfo?.switch
              // this.wsDeviceInfo?.switch;
              this.$forceUpdate();
              break;
            }
          }
          // this.timingPingWs(this.wsDeviceInfo);
          // 更换设备 开启ws
          // this.connection();
        } else {
          // this.connection();
        }
      },
      deep: true
    },
    deviceInfo: {
      handler: function() {
        this.checkobxDeviceId = this.deviceInfo.deviceId || null;
        this.getList();
      },
      deep: true
    }
  },
  methods: {
    getDeviceState(e) {
      switch (e) {
        case "ONLINE":
          return "在线";
        case "OUTLINE":
          return "脱线";
        default:
          return "离线";
      }
    },
    // 开启 设备状态ws
    handleOpenDevStatusService(str) {
      this.wsStatusService = `${webSocketProjectGatewayUrl}/${this.getGuid()}/${
        this.deviceInfo.deviceKey
      },${str}`;
    },
    wsMessage(e) {
      console.log("wsMessage", e);
      // if (
      //   e["deviceState"] ||
      //   (e["switch"] !== null && e["switch"] !== undefined)
      // ) {
      //   if(e["switch"] == "1"){
      //     e["switch"] = 1
      //   }else if(e["switch"] == "0"){
      //     e["switch"] = 0
      //   }
      //   this.handleDeviceInfo(e);
      // }
      this.handleDeviceInfo(e);
    },
    // 处理 socket 数据返回 赋值问题
    handleDeviceInfo(param) {
      if (param.tags.device_key === this.deviceInfo.deviceKey) {
        if(param.type === "state"){
          this.$nextTick(() => {
            this.$set(this.deviceInfo, 'deviceState',param.state);
          });
        }
        // this.deviceInfo = Object.assign(this.deviceInfo, param);
      } else {
        if (this.childDeviceList && this.childDeviceList.length > 0) {
          this.childDeviceList = this.childDeviceList.map(item => {
            if (item["deviceKey"] === param.tags.device_key) {
              if(param.type === "state"){
                item.deviceState = param.state;
              }
              if(param.type === "extra" && param.extra.type === "switch"){
                item.switch = param.extra.switch;
              }
              return item;
            } else {
              return item;
            }
          });
          this.$forceUpdate();
        }
      }
    },
    handleAllStatus(type) {
      if (this.childDeviceList.length > 0) {
        // this.childDeviceList.forEach(v => {
        //   if (this.tSelectList.indexOf(v.deviceId) < 0) {
        //     this.tSelectList.push(v.deviceId);
        //     this.tSelectLabelList.push(v.deviceName);
        //   }
        // });
        this.handleChildAllStatus(type);
      }
    },
    // 点击子设备 线路开关
    handleChildAllStatus(type) {
      // if (this.tSelectLabelList.legnth > 0) {
      this.$prompt("请输入登录密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[a-z A-z 0-9 $.]+/,
        inputType: "password",
        inputErrorMessage: "登录密码不能为空"
      }).then(({ value }) => {
        let params = {
          data: {
            // cmd: "set_switch",
            params: {
              switch: 1
            }
          },
          deviceId: "",
          verifyKey: value
        };

        switch (type) {
          case "true":
            params.data.params.switch = 1;
            params.deviceId = this.deviceInfo.deviceId;
            break;

          case "false":
            params.data.params.switch = 0;
            params.deviceId = this.deviceInfo.deviceId;
            break;
        }

        setSwitchAllControl(params).then(res => {
          this.msgSuccess("修改成功");
        });
      });
      // }
    },
    handleDevSearch() {
      this.$prompt("请输入登录密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[a-z A-z 0-9 $.]+/,
        inputType: "password",
        inputErrorMessage: "登录密码不能为空"
      }).then(({ value }) => {
        let params = {
          data: {
            params: {}
          },
          deviceId: this.tSelectList.toString(),
          verifyKey: value
        };

        searchDevControl(params).then(res => {
          this.msgSuccess("修改成功");
        });
      });
    },
    handleAllSelect() {
      if (this.childDeviceList.length > 0) {
        if (this.tSelectList.length >= this.childDeviceList.length) {
          this.tSelectList = [];
          this.tSelectLabelList = [];
        } else {
          this.childDeviceList.forEach(v => {
            if (this.tSelectList.indexOf(v.deviceId) < 0) {
              this.tSelectList.push(v.deviceId);
              this.tSelectLabelList.push(v.deviceName);
            }
          });
        }
      }
    },

    // 点击子设备 线路开关
    handleChildStatus(type) {
      // if (this.tSelectLabelList.legnth > 0) {
      this.$prompt("请输入登录密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[a-z A-z 0-9 $.]+/,
        inputType: "password",
        inputErrorMessage: "登录密码不能为空"
      }).then(({ value }) => {
        let params = {
          data: {
            // cmd: "set_switch",
            params: {
              switch: 1
            }
          },
          deviceId: "",
          verifyKey: value
        };

        switch (type) {
          case "true":
            params.data.params.switch = 1;
            params.deviceId = this.tSelectList.toString();
            break;

          case "false":
            params.data.params.switch = 0;
            params.deviceId = this.tSelectList.toString();
            break;
        }

        setSwitchControl(params).then(res => {
          this.msgSuccess("修改成功");
        });
      });
      // }
    },
    selectDevClose(e) {
      this.tSelectList.splice(this.tSelectLabelList.indexOf(e), 1);
      this.tSelectLabelList.splice(this.tSelectLabelList.indexOf(e), 1);
    },
    handleCheckbox(e) {
      if (this.tSelectList.indexOf(e.deviceId) >= 0) {
        // delete e
        this.tSelectList.splice(this.tSelectList.indexOf(e.deviceId), 1);
        this.tSelectLabelList.splice(
          this.tSelectLabelList.indexOf(e.deviceName),
          1
        );
      } else {
        this.tSelectLabelList.push(e.deviceName);
        this.tSelectList.push(e.deviceId);
      }
    },
    signalType(val) {
      if (val) {
        return "iconfont " + this.statusFormat(val);
      }
      return "iconfont " + this.statusFormat("0");
      // switch (val) {
      //   case "5G":
      //     return "iconfont " + this.statusFormat(val);
      //   case "4G":
      //     return "iconfont " + this.statusFormat(val);
      //   case "3G":
      //     return "iconfont " + this.statusFormat(val);
      //   case "2G":
      //     return "iconfont " + this.statusFormat(val);
      //   default:
      //     return "iconfont " + this.statusFormat(0);
      // }
    },

    // 字典状态字典翻译 描述
    statusFormat(value) {
      return this.selectDictDesc(this.iotSignalType, value);
    },

    // ws 获取子设备 状态
    connection() {
      if (this.stompClient) {
        return;
      }
      if (!this.wsDeviceInfo) {
        return;
      }
      if (!devLiveWebSocketBaseUrl) {
        return;
      }
      let headers = {
        clientid: this.wsDeviceInfo.wsClientId,
        username: this.wsDeviceInfo.wsUsername,
        sign: this.wsDeviceInfo.wsSign
      };
      // console.log("connection:--");
      this.stompClient = new WebSocket(
        `${devLiveWebSocketBaseUrl}${headers.clientid}/${headers.username}/${headers.sign}`
      );
      this.socket_flag = true;
      this.stompClient.onopen = this.socket_open;
      this.stompClient.onmessage = this.socket_onmsg;
      this.stompClient.onclose = this.socket_onclose;
    },
    socket_open(evt) {
      console.log("ws-open:", evt);
    },
    socket_onmsg(evt) {
      this.handlerWsMsgData(JSON.parse(evt.data));
    },
    handlerWsMsgData(evt) {
      this.$emit("wsRealTImeMsg", JSON.stringify(evt));
      if (this.deviceInfo.deviceId !== this.wsDeviceInfo.deviceId) {
        for (let i = 0; i < this.childDeviceList.length; i++) {
          if (this.childDeviceList[i]["deviceKey"] === evt["devId"]) {
            this.childDeviceList[i]["switch"] = evt["params"]["switch"]
              ? evt["params"]["switch"].toString()
              : "0";
            this.$forceUpdate();
            break;
          }
        }
      } else {
        this.deviceInfo["stype"] = evt["params"]["stype"]
          ? evt["params"]["stype"].toString()
          : "0";
        this.deviceInfo["signal"] = evt["params"]["signal"]
          ? evt["params"]["signal"].toString()
          : "0";
      }
    },
    socket_onclose(e) {
      // console.log("socket_onclose:--", e, this.stompClient);
      this.stompClient = null;
      if (this.socket_flag) {
        this.socket_flag = false;
        let this_ = this;
        this_.setTimeOut_flag = setTimeout(function() {
          this_.socket_flag = true;
          this_.connection();
        }, 10000);
      }
    },
    // 销毁事件
    closeWebscoket() {
      // console.log(this.stompClient);
      this.socket_flag = false;
      if (this.stompClient) {
        console.log("we-close---");
        this.stompClient.close();
      }
      this.stompClient = null;
      clearInterval(this.timingPingWs_flag);
      clearTimeout(this.setTimeOut_flag);
    },
    // 定时 ping ws
    timingPingWs(row) {
      this.extenSubmit(row);
      clearInterval(this.timingPingWs_flag);
      const _this = this;
      this.timingPingWs_flag = setInterval(function() {
        _this.extenSubmit(row);
      }, 110000);
    },
    extenSubmit(row) {
      // let params = {
      //   data: {
      //     params: {
      //       ltime: 15, // 上报间隔(0.1秒)
      //       dtime: 1200 //上报时长(0.1秒)
      //     }
      //   },
      //   deviceId: row.deviceId
      // };
      //先屏蔽设备主动拉取功能
      // setLivetimeControl(params).then(res => {
      //   console.log(res);
      //   // this.msgSuccess("成功");
      // });

      let params = {
        input: {
          ltime: 15, // 上报间隔(0.1秒)
          dtime: 1200 //上报时长(0.1秒)
        },
        deviceKey: row.deviceKey,
        funcId: "set_live_time"
      };

      //使用新版功能
      setFunctionControl(params).then(res => {
        console.log(res);
        // this.msgSuccess("成功");
      });
    },
    // 点击子设备 线路开关
    submitChildStatus(type, row) {
      this.$prompt("请输入登录密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[a-z A-z 0-9 $.]+/,
        inputType: "password",
        inputErrorMessage: "登录密码不能为空"
      }).then(({ value }) => {
        let params = {
          data: {
            params: {
              switch: type === "true" ? 1 : 0
            }
          },
          deviceId: row.deviceId,
          verifyKey: value
        };

        setSwitchControl(params).then(res => {
          // console.log(res);
          this.msgSuccess("修改成功");
        });
      });
    },
    // 勾选设备
    viewDeviceChange(id) {
      if (this.checkobxDeviceId !== id) {
        this.checkobxDeviceId = id;
        // 销毁当前ws
        this.closeWebscoket();
        this.$emit("changeEvent", { val: id });
      }
    },
    /** 查询设备列表 */
    getList() {
      listChildrenDevice({
        parentId: this.deviceInfo.deviceId,
        pageNum: 1,
        pageSize: 999999
      }).then(response => {
        this.childDeviceList = response.rows;
        var childDeviceIds = [...response.rows].map(v => {
          return v.deviceKey;
        });
        this.handleOpenDevStatusService(childDeviceIds.toString());
      });
    }
  },
  destroyed() {
    this.closeWebscoket();
  }
};
</script>

<style lang="scss">
.device-select-nav {
  min-height: 130px;
  width: 100%;
  display: flex;
  overflow-y: auto;
  background-color: #e4eaf300;
  flex-wrap: wrap;
  align-items: flex-start;
  .layout-select-wrap {
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 5px;
    // border: 1px solid #1890ff;
    margin: 0 5px 5px 0;
    border-radius: 5px;
    background-color: #1890ff00;
    .title-span {
      margin-left: 10px;
    }

    .but {
      width: 90px;
      height: 30px;
      background: #f4f5f7;
      border-radius: 5px;
      color: #6b778c;
      justify-content: center;
      align-items: center;
      display: flex;
      margin-right: 10px;
      .icon-c {
        font-size: 18px;
        margin-top: 2px;
      }
      .but-title {
        font-size: 12px;
        font-family: "Source Han Sans CN";
        font-weight: 600;
        margin-left: 5px;
        cursor: default;
      }
    }
    .but:hover {
      background: #1890ff;
      color: #fff;
    }
    .el-button {
      border: 0px;
      color: #6b778c;
      font-weight: 600;
      background: #e6e6e6d9;
    }
    .el-button--info.is-plain.is-disabled {
      color: #bcbec2;
    }
    .but-icon {
      margin-right: 5px;
      font-size: 16px;
    }
    .el-button:hover {
      background: #1890ff !important;
      color: #fff;
    }
  }
  .layout-device-list {
    width: 100%;
    display: flex;
    //height: 90px;
    overflow: auto;
  }

  .nav-p-dev {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    // padding-top: 10px;
    flex-shrink: 0;
    .dev-info {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
      .dev-info-title {
        display: block;
        width: 100%;
        text-overflow: ellipsis;
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        white-space: nowrap;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dev-info-state {
        width: 60px;
        height: 50px;
        justify-content: center;
        display: flex;
        align-items: center;
        font-size: 14px;

        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #00c805;
        justify-content: flex-start;

        /* switch按钮样式 */
        .switch-wrap .el-switch__label {
          position: absolute;
          display: none;
          color: #fff !important;
        }
        /*打开时文字位置设置*/
        .switch-wrap .el-switch__label--right {
          z-index: 1;
        }
        /* 调整打开时文字的显示位子 */
        .switch-wrap .el-switch__label--right span {
          margin-left: 10px;
        }
        /*关闭时文字位置设置*/
        .switch-wrap .el-switch__label--left {
          z-index: 1;
        }
        /* 调整关闭时文字的显示位子 */
        .switch-wrap .el-switch__label--left span {
          margin-left: 20px;
        }
        /*显示文字*/
        .switch-wrap .el-switch__label.is-active {
          display: block;
        }
        /* 调整按钮的宽度 */
        .switch-wrap.el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 60px !important;
          margin: 0;
        }
      }
      .off-line {
        color: #da2710;
      }
    }
  }
  .nav-c-dev {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    // padding-top: 10px;
    flex-shrink: 0;

    .checkbox-i {
      width: 20px;
      border: 1px solid #1890ff;
      height: 20px;
      border-radius: 3px;
      position: relative;
      // right: 184px;
      font-size: 17px;
      display: flex;
      align-items: center;
    }
    .selected-c {
      background: #1890ff;
      color: #fff;
      border-color: #fff;
    }

    .dev-info {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;

      .dev-info-title {
        display: block;
        width: 100%;
        text-overflow: ellipsis;
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        white-space: nowrap;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dev-info-state {
        width: 60px;
        height: 50px;
        justify-content: center;
        display: flex;
        align-items: center;

        justify-content: flex-start;

        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #00c805;

        /* switch按钮样式 */
        .switch-wrap .el-switch__label {
          position: absolute;
          display: none;
          color: #fff !important;
        }
        /*打开时文字位置设置*/
        .switch-wrap .el-switch__label--right {
          z-index: 1;
        }
        /* 调整打开时文字的显示位子 */
        .switch-wrap .el-switch__label--right span {
          margin-left: 10px;
        }
        /*关闭时文字位置设置*/
        .switch-wrap .el-switch__label--left {
          z-index: 1;
        }
        /* 调整关闭时文字的显示位子 */
        .switch-wrap .el-switch__label--left span {
          margin-left: 20px;
        }
        /*显示文字*/
        .switch-wrap .el-switch__label.is-active {
          display: block;
        }
        /* 调整按钮的宽度 */
        .switch-wrap.el-switch .el-switch__core,
        .el-switch .el-switch__label {
          width: 60px !important;
          margin: 0;
        }
      }
      .off-line {
        color: #da2710;
      }
    }
  }
}
.layout-device-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
.layout-device-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  // box-shadow: inset 0 0 5px #c4c4c4;
  background: #929292a6;
}
.layout-device-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // -webkit-box-shadow:
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>
