<template>
  <div class="iot-circuit-breaker-details-warp">
    <device-select
      v-if="pInfo"
      ref="deviceSelect"
      :deviceInfo="pInfo"
      :wsDeviceInfo="infoData"
      @changeEvent="viewDeviceChange($event)"
      @wsRealTImeMsg="wsRealTImeMsg($event)"
    ></device-select>
    <div :class="infoData.deviceType === '10001' ? 'link-to-list is-widening': 'link-to-list'">
      <el-button icon="el-icon-d-arrow-left" size="small" style="margin-left: 10px;" title="返回列表" type="primary" @click="toTableClick"
        >返回列表</el-button
      >
      <el-button v-if="infoData.deviceType === '10001'" size="small" title="批量升级" type="primary" @click="batchUpgradeOpen">批量升级</el-button>
    </div>
    <div class="info-tabs-circuit main-device-card">
      <div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbList"
            :key="index"
          >
            <span
              :class="
                item.deviceId === deviceId
                  ? 'breadcrumb-span show-wrap'
                  : 'breadcrumb-span'
              "
              @click="deviceClick(item, index)"
              >{{ item.deviceName }}</span
            >
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs
        v-model="activeName"
        :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
        class="device-detail-tabs"
      >
        <el-tab-pane name="runingState">
          <span slot="label">运行状态</span>
          <div class="tabs-body protocol-wrap">
            <state-management
              v-if="devudeRunState"
              :deviceInfo="infoData"
              :realTimeData="realTimeData"
            ></state-management>
          </div>
        </el-tab-pane>

        <el-tab-pane label="事件" name="eventLog">
          <div class="tabs-body">
            <event-log
              v-if="activeName === 'eventLog'"
              :pDevcieInfo="infoData"
              :sourceId="infoData.deviceId"
            ></event-log>
          </div>
        </el-tab-pane>

        <el-tab-pane label="设备信息" name="info">
          <div class="tabs-body">
            <info-wrap
              v-if="activeName === 'info'"
              :infoData="infoData"
              :isTenant="isTenant"
              @updateInfo="updateInfo($event)"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          v-if="infoData.deviceType === '10001' && !isTenant"
          label="子设备"
          name="child"
        >
          <div class="tabs-body">
            <child-device
              v-if="activeName === 'child'"
              :pDevcieInfo="infoData"
              :sourceId="infoData.deviceId"
              @EventUpload="handleUpload"
              @toChildEvent="toNewDevice"
            ></child-device>
          </div>
        </el-tab-pane>
<!--        <el-tab-pane label="触发器" name="trigger">-->
<!--          <div class="tabs-body protocol-wrap">-->
<!--            <trigger-wrap-->
<!--              v-if="activeName === 'trigger'"-->
<!--              :deviceInfo="infoData"-->
<!--              :sourceId="infoData.deviceId"-->
<!--            ></trigger-wrap>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
        <el-tab-pane label="固件" name="oat">
          <div class="tabs-body protocol-wrap">
            <model-oat
              v-if="activeName === 'oat'"
              :deviceInfo="infoData"
              :isTenant="isTenant"
              @updateInfo="updateInfo($event)"
            ></model-oat>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日志" name="devLog">
          <div class="tabs-body">
            <device-log
              v-if="activeName === 'devLog'"
              :pDevcieInfo="infoData"
              :sourceId="infoData.deviceId"
            ></device-log>
          </div>
        </el-tab-pane>
        <el-tab-pane label="场景" name="scene">
          <div class="tabs-body">
            <e-device-scene
              v-if="activeName === 'scene'"
              :sourceId="infoData.deviceId"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane v-if="infoData.deviceId === pInfo.deviceId" label="升级进度" name="batchUpgradeRate">
          <div class="tabs-body">
            <batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
          </div>
        </el-tab-pane>
        <el-tab-pane label="功能" name="function">
          <div class="tabs-body">
            <function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="height: 0;">
        <!-- 添加或修改建筑类型对话框 -->
        <dialog-template
          :title="dialogTitle"
          :visible="dialogOpen"
          style=""
          width="880px"
          @close="dialogOpen = false"
        >
          <e-batch-firmware-upgrade
            slot="dialog-center"
            :sourceData="this.form.data"
            :sourceId="this.pInfo.deviceId"
            @handleChange="handleFirmwareChange"
          ></e-batch-firmware-upgrade>
          <div slot="dialog-footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="submitForm"
              >确 定</el-button
            >
            <el-button size="mini" @click="() => {dialogOpen = false}">取 消</el-button>
          </div>

        </dialog-template>
      </div>
  </div>
</template>
<script>
import { getDevice } from "@/api/iot/device";
import InfoWrap from "./info";
import DeviceLog from "./deviceLog";
import EventLog from "@/views/profile/DeviceDetailsView/eventLog";
import StateManagement from "./stateManagement";
import TriggerWrap from "@/views/profile/DeviceTrigger/index";
import DeviceSelect from "./deviceSelectNav";
import ModelOat from "./modelOat";
import ChildDevice from "./childDevice";
import EDeviceScene from '@/views/profile/EDeviceScene/indexView'
import DialogTemplate from "@/components/DialogTemplate";
import EBatchFirmwareUpgrade from '@/views/profile/BatchFirmwareUpgrade/example'
import { upgradeBatch } from '@/api/iot/deviceOta'
import BatchUpgradeRate from "./BatchUpgradeRate";
import functionWrap from "@/views/iot/device/profile/functionWrap"
export default {
  name: "DetailsWrap",
  props: ["sourceId", "isTenant", 'isPersonal'],
  components: {
    InfoWrap,
    DeviceLog,
    StateManagement,
    TriggerWrap,
    DeviceSelect,
    ModelOat,
    ChildDevice,
    EDeviceScene,
    DialogTemplate,
    EBatchFirmwareUpgrade,
    BatchUpgradeRate,
    functionWrap,
    EventLog
  },
  data() {
    return {
      infoData: {},
      pInfo: {},
      activeName: "runingState",
      breadcrumbList: [],
      tempType: "bs",
      deviceId: "",
      devudeRunState: false,
      realTimeData: null,
      hzSelectList: [],
      userTenantId: "",
      dialogTitle: '',
      dialogOpen: false,
      form: {
        deviceId: '',
        data: []
      }
    };
  },
  created() {
    this.deviceId = this.sourceId;
    this.userTenantId = this.$store.getters.tenantId;
    this.deviceInfo();
  },
  methods: {
    // 跳转详情页
    toTableClick() {
      this.$emit('toTableClick')
    },
    handleUpload() {
      let newActive = this.activeName;
      this.deviceId = this.sourceId;
      this.userTenantId = this.$store.getters.tenantId;
      // this.deviceInfo();
      this.$refs.deviceSelect.getList();
      this.newActive = newActive;
    },
    wsRealTImeMsg(data) {
      this.realTimeData = Object.assign(data);
    },
    viewDeviceChange(row) {
      this.deviceId = row.val;
      this.deviceInfo(row.val === this.pInfo.deviceId ? null : "children");
      this.devudeRunState = false;
    },
    // 设备详情
    deviceInfo(type) {
      getDevice(this.deviceId).then((response) => {
        // if(response.data.deviceLabel && response.data.deviceLabel[0] == '空间'){
        //   response.data.deviceLabel.shift();
        // }
        if (!type) {
          this.pInfo = response.data;
        }
        this.infoData = response.data;
        this.devudeRunState = true;
        this.activeName = "runingState";
      });
    },
    toNewDevice(data) {
      this.tempType = "children";
      this.deviceId = data.deviceId;
      this.devudeRunState = false;
      this.deviceInfo();
      this.activeName = "runingState";
    },
    updateInfo(data) {
      console.log(data);
      this.deviceInfo(
        data.deviceId === this.pInfo.deviceId ? null : "children"
      );
    },
    batchUpgradeOpen() {
      this.dialogTitle = '网关批量固件升级';
      this.dialogOpen = true;
      this.form = {
        deviceId: this.pInfo.deviceId,
        data: []
      }
    },
    handleFirmwareChange(ev) {
      this.form.data = ev
    },
    submitForm() {
      if((!this.form.data || this.form.data.length <= 0) || (this.form.data && this.form.data.filter(v => !v.otaId || !v.prodKey).length > 0)) {
        this.$message({
          message: '未选择型号或固件',
          type: 'error'
        });
        return
      }

      upgradeBatch(this.form).then(res => {
        if (!res.code) return;

        this.$message({
          message: '升级固件已经提交，固件正在升级中（过程中有可能由 异常 等问题导致升级不成功！）',
          type: 'success'
        });
        this.dialogOpen = false;
        if (this.activeName === 'batchUpgradeRate'){
          this.$refs.batchUpgradeRate.getDeviceList();
        }
        this.activeName = 'batchUpgradeRate';
      });
    }
  },
};
</script>
<style lang="scss">
.iot-circuit-breaker-details-warp {
  position: relative;
  .breadcrumb-wrap {
    position: absolute;
    top: 15px;
    z-index: 10;
    left: 20px;
    width: 90%;
    overflow: hidden;
    .breadcrumb-span:hover {
      color: #1890ff;
      cursor: default;
    }
    .show-wrap {
      color: #1890ff;
    }
  }
  .product-release-dialog {
    .title-i {
      font-size: 20px;
      color: #9c9a9a;
      line-height: 18px;
    }
    .i-color {
      color: rgb(0, 193, 222);
    }
    .el-dialog__header {
      border-bottom: 1px solid rgb(116, 115, 115);
    }
    .top-tigs {
      background: #fbfbfc;
      border: 1px solid #ecedee;
      padding: 20px;
      margin-bottom: 25px;
      color: #999;
    }
    .form-bottom-prod-details {
      margin-top: 40px;
      height: 10px;
      border-top: 1px solid rgb(116, 115, 115);
      text-align: right;
      width: 100%;
      padding-top: 15px;
      width: calc(100% + 20px);
      .el-button {
        margin-right: 10px;
        margin-left: 0px;
      }
    }
    .bottom-div {
      height: 70px;
      font-size: 12px;
      border: 1px solid #ecedee;
      margin: -1px;
    }
    .one-div {
      width: 15%;
      float: left;
      border-right: 1px solid #ecedee;
      height: 30px;
      line-height: 30px;
      /* padding-left: 10px; */
      text-align: center;
      font-size: 18px;

      height: 70px;
      line-height: 76px;
      text-align: center;
      font-size: 18px;
    }
    .two-div {
      width: calc(100% - 36%);
      float: left;
      padding: 22px 10px 10px 10px;
      font-size: 12px;
    }
    .there-div {
      width: 10%;
      float: left;
      padding-top: 28px;
    }
    .four-div {
      width: 5%;
      float: left;
      padding-top: 28px;
    }
  }
  .heard {
    padding: 20px 40px 0;
    background-color: #fff;
    height: 112px;
    padding: 0px;
  }
  .info-title {
    margin-top: 0px;
    margin-bottom: 16px;
    line-height: 29px;
    overflow: hidden;
    height: 30px;
    .title {
      float: left;
      font-size: 20px;
      margin: 0 8px 0 0;
      line-height: 28px;
    }
    .el-button--small,
    .el-button--small.is-round {
      padding: 8px 15px;
      float: right;
    }
  }
  .info-icon {
    margin-top: -70px;
    float: left;
    width: 101px;
    border: 1px dotted rgb(205, 203, 203);
    height: 101px;
    .image {
      width: 100px;
      height: 100px;
    }
  }
  .info-des {
    font-size: 14px;
    width: 100%;
    float: left;
    .info-row {
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
      line-height: 20px;
      white-space: nowrap;
      .label {
        color: #aaa;
      }
      .centent {
        color: #999;
        margin-right: 8px;
      }
    }
  }

  .link-to-list {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    z-index: 100;
    .el-button--medium.is-circle {
      //width: 25px;
      //height: 20px;
      padding: 10px;
      background: #0d8afd;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      //height: 30px;
      //width: 100%;
      font-size: 14px;
    }
  }
  .link-to-list:hover {
    color: #1890ff;
    font-size: 30px;
  }

  .is-widening {
    //width: 220px;
    //left: calc(100% - 220px);
  }

  .info-tabs-circuit {
    position: relative;
    box-sizing: border-box;
    .el-tabs__content {
      //height: calc(100vh - 340px);
      //overflow: auto;
    }
    .el-tabs__header {
      background-color: #fff;
      position: relative;
      //   top: -10px;
      .el-tabs__nav-wrap {
        margin-left: 0px;
        .el-tabs__item {
          font-size: 16px;
        }
      }
    }
    .el-tabs__nav-scroll {
      //height: 65px;
      //padding-top: 25px;
      //padding-left: 5px;
      // background: #e4eaf3;
    }
    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
      background: #fff;
      color: #333;
      border: 0;
    }
    .el-tabs--border-card > .el-tabs__header .el-tabs__item {
      // border-color: red;
      color: #909399;
      background: #d3deec;
      border-radius: 8px 8px 0 0;
      border-bottom: 0;
      margin-left: 15px;
    }
    .tabs-body {
      margin-left: 0px;
      margin-right: 0px;
      padding: 0px;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 0px;
    }
    .protocol-wrap {
      .el-tabs__nav-scroll {
        height: auto;
        padding-top: 0;
        padding-left: 0;
        background: #fff;
      }
    }
  }
  .children-wrap {
    .el-tabs__header {
      .el-tabs__nav-scroll {
        height: 85px;
        .el-tabs__nav {
          margin-top: 20px;
        }
      }
    }
  }
  .child-table {
    margin-top: 25px;
    // margin-left: 20px;
    margin-right: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: #fff;
  }
}
.product-release-dialog {
  .title-i {
    font-size: 20px;
    color: #9c9a9a;
    line-height: 18px;
  }
  .i-color {
    color: rgb(0, 193, 222);
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .top-tigs {
    background: #fbfbfc;
    border: 1px solid #ecedee;
    padding: 20px;
    margin-bottom: 25px;
    color: #999;
  }
  .form-bottom-prod-details {
    margin-top: 15px;
    height: 30px;
    border-top: 1px solid #747373;
    text-align: right;
    width: 100%;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .bottom-div {
    height: 70px;
    font-size: 12px;
    border: 1px solid #ecedee;
    margin: 0px;
  }
  .one-div {
    width: 15%;
    float: left;
    border-right: 1px solid #ecedee;
    height: 30px;
    line-height: 30px;
    /* padding-left: 10px; */
    text-align: center;
    font-size: 18px;

    height: 70px;
    line-height: 76px;
    text-align: center;
    font-size: 18px;
  }
  .two-div {
    width: calc(100% - 36%);
    float: left;
    padding: 22px 10px 10px 10px;
    font-size: 12px;
  }
  .there-div {
    width: 10%;
    float: left;
    padding-top: 28px;
  }
  .four-div {
    width: 5%;
    float: left;
    padding-top: 28px;
  }
}
.product-detail-info {
  .el-textarea {
    width: 92%;
  }
  .el-input {
    width: 92%;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .form-buttons-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
  }
  .question-button.el-button--text {
    padding-bottom: 0px;
    color: rgb(204, 204, 204);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
    margin-left: 60px;
  }
  .el-form--label-top .el-form-item__label {
    padding: 0 0 9px;
    margin-top: 10px;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    line-height: 17px;
  }
  .avue-input-number,
  .el-cascader,
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner,
  .el-select {
    width: 100%;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .form-buttons-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
  }
}
.product-topic-dialog {
  .top-tips {
    height: 150px;
    margin: 20px;
    margin-top: 30px;
    margin-right: 0px;
    border: 1px solid #00c1df;
    padding: 10px 10px 0;
    background: #e6f9fc;
    display: flex;
    border-radius: 3px;
    padding-left: 20px;
    padding-top: 20px;
    margin-bottom: 0px;
  }
  .el-form-item__error {
    left: 80px;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .el-form--label-top .el-form-item__label {
    padding-top: 23px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: -17px;
    width: 90%;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    padding-left: 40px;
  }
  .el-select {
    width: 100%;
  }
  .form-buttonx-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .funType-div {
    // margin-left: 40px;
  }
}
.product-fun-dialog {
  .insert-div {
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-left: 30px;
  }
  .el-transfer-panel {
    // margin-left: 10px;
    width: 225px;
  }
  .el-transfer__buttons {
    padding: 0px 10px;
  }
  .el-textarea {
    width: 92%;
  }
  .el-input {
    width: 92%;
  }
  .question-button.el-button--text {
    padding-bottom: 0px;
    color: rgb(204, 204, 204);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .fw {
    .el-input--mini {
      width: 155px;
    }
  }
  .el-form-item__error {
    left: 120px;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .el-form--label-top .el-form-item__label {
    padding-top: 23px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: -17px;
    width: 92%;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    padding-left: 40px;
  }
  .form-buttonb-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .funType-div {
    // margin-left: 40px;
  }
}
.product-custom-fun {
  .el-textarea {
    width: 92%;
  }
  .el-input {
    width: 92%;
  }
  .question-button.el-button--text {
    padding-bottom: 0px;
    color: rgb(204, 204, 204);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .fw {
    .el-input--mini {
      width: 155px;
    }
  }
  .el-form-item__error {
    left: 120px;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .el-form--label-top .el-form-item__label {
    padding-top: 23px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: -17px;
    width: 92%;
  }
  .el-select {
    width: 100%;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    padding-left: 40px;
  }
  .form-buttona-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .funType-div {
    // margin-left: 40px;
  }
}
.product-prop-standard-dialog {
  .insert-div {
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-left: 30px;
  }
  .el-transfer-panel {
    // margin-left: 10px;
    width: 225px;
  }
  .el-transfer__buttons {
    padding: 0px 10px;
  }
  .el-textarea {
    width: 92%;
  }
  .el-input {
    width: 92%;
  }
  .question-button.el-button--text {
    padding-bottom: 0px;
    color: rgb(204, 204, 204);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .fw {
    .el-input--mini {
      width: 155px;
    }
  }
  .el-form-item__error {
    left: 120px;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .el-form--label-top .el-form-item__label {
    padding-top: 23px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: -17px;
    width: 92%;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    padding-left: 40px;
  }
  .form-buttonb-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .funType-div {
    // margin-left: 40px;
  }
}
.product-prop-custom-dialog {
  .el-textarea {
    width: 92%;
  }
  .el-input {
    width: 92%;
  }
  .question-button.el-button--text {
    padding-bottom: 0px;
    color: rgb(204, 204, 204);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .fw {
    .el-input--mini {
      width: 155px;
    }
  }
  .el-form-item__error {
    left: 120px;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .el-form--label-top .el-form-item__label {
    padding-top: 23px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: -17px;
    width: 92%;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    padding-left: 40px;
  }
  .form-buttona-div {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    width: 100%;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .funType-div {
    // margin-left: 40px;
  }
}

.model-function-dialog {
  .el-textarea {
    width: 92%;
  }
  .el-input {
    width: 92%;
  }
  .question-button.el-button--text {
    padding-bottom: 0px;
    color: rgb(204, 204, 204);
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
    padding-top: 0px;
    margin-top: 0px;
  }
  .fw {
    .el-input--mini {
      width: 155px;
    }
  }
  .el-form-item__error {
    left: 120px;
  }
  .el-dialog__body {
    padding: 0px;
    padding-right: 20px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(116, 115, 115);
  }
  .el-form--label-top .el-form-item__label {
    padding-top: 23px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: -17px;
    width: 92%;
  }
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    padding-left: 40px;
  }
  .el-select {
    width: 100%;
  }
  .form-bottom-prod-details {
    margin-top: 30px;
    height: 50px;
    border-top: 1px solid rgb(116, 115, 115);
    text-align: right;
    padding-top: 15px;
    width: calc(100% + 20px);
    .el-button {
      margin-right: 10px;
      margin-left: 0px;
    }
  }
  .funType-div {
    // margin-left: 40px;
  }
}
.sr {
  .el-form-item {
    margin-bottom: -17px;
    width: 100%;
  }
}
.iot-circuit-breaker-details-warp
  .info-tabs-circuit
  .el-tabs__content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}
.iot-circuit-breaker-details-warp
  .info-tabs-circuit
  .el-tabs__content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #9e9d9d;
  background: #ffffff;
}
.iot-circuit-breaker-details-warp
  .info-tabs-circuit
  .el-tabs__content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>
