<template>
  <basic-container>
    <el-dialog :modal-append-to-body="false" :visible.sync="detailVisible" title="智能垃圾桶" width="80%">
      <el-tabs @tab-click="handleClick" v-model="activeName">
        <el-tab-pane label="设备详情" name="first">
          <device-detail pic="/img/device/smoke.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 1"></device-detail>
          <device-detail pic="/img/device/gas.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 2"></device-detail>
          <device-detail pic="/img/device/cover.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 3"></device-detail>
          <device-detail pic="/img/device/alarm.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 4"></device-detail>
          <device-detail pic="/img/device/lamp.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 5"></device-detail>
          <device-detail pic="/img/device/fire_hydrant.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 6"></device-detail>
          <device-detail pic="/img/device/trashbin.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 7"></device-detail>
          <device-detail pic="/img/device/parkingmonitor.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 8"></device-detail>
          <device-detail pic="/img/device/gate.png" :device="deviceDetail" v-if="deviceDetail.deviceType == 9"></device-detail>
        </el-tab-pane>
        <el-tab-pane label="告警设置" name="second">
          <alarm :alarmData="alarmData" :alarmSetData="alarmSetData"></alarm>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-container>
      <el-aside width="500px">
        <el-row>
          <el-col span="8"><i class="el-icon-circle-plus">
              <font size="3"><i>
                  智能烟感：{{deviceStaticVo.smokeCount}}</i></font>
            </i></el-col>
          <el-col span="8">
            <font size="3" color="crimson"> <i class="el-icon-warning"><i>燃气监控：{{deviceStaticVo.gasCount}}</i></i></font>
          </el-col>
          <el-col span="8">
            <font size="3" color="green"> <i class="el-icon-circle-check"><i>井盖监控：{{deviceStaticVo.coverCount}}</i></i></font>
          </el-col>

        </el-row>

        <el-row>
          <el-col span="8">
            <font size="3" color="#0000EE"> <i class="el-icon-message-solid"><i>一键告警：{{deviceStaticVo.alarmDeviceCount}}</i></i></font>
          </el-col>
          <el-col span="8">
            <font size="3" color="#005500"> <i class="el-icon-magic-stick"><i>智慧路灯：{{deviceStaticVo.lampCount}}</i></i></font>
          </el-col>
          <el-col span="8">
            <font size="3" color="#009688"> <i class="el-icon-coffee"><i>智慧消防：{{deviceStaticVo.xfCount}}</i></i></font>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="8">
            <font size="3" color="#144212"> <i class="el-icon-milk-tea"><i>智慧垃圾桶：{{deviceStaticVo.trashbinCount}}</i></i></font>
          </el-col>
          <el-col span="8">
            <font size="3" color="#3182BD"> <i class="el-icon-truck"><i>智能地磁：{{deviceStaticVo.parkCount}}</i></i></font>
          </el-col>
          <el-col span="8">
            <font size="3" color="#629755"> <i class="el-icon-mobile-phone"><i>智能门磁：{{deviceStaticVo.gateCount}}</i></i></font>
          </el-col>
        </el-row>
      </el-aside>
      <el-main style="border-left: 1px solid #000000;margin-left: 20px;padding-left: 20px;">
        <el-row v-if="allVisible"><el-col span="24"><div align="center">全部设备状态</div></el-col></el-row>
        <el-divider></el-divider>
        <el-row v-if="smokeVisible">烟感设备状态</el-row>
        <el-row>
          <el-col span="12" push="4"><i class="el-icon-circle-plus">
              <font size="3"><i>正常：{{deviceStaticVo.normalCount}}</i></font>
            </i></el-col>
          <el-col span="12" push="4">
            <font size="3" color="crimson"> <i class="el-icon-warning"><i>失联：{{deviceStaticVo.outlineCount}}</i></i></font>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="12" push="4">
            <font size="3" color="green"> <i class="el-icon-circle-check"><i>告警：{{deviceStaticVo.alarmCount}}</i></i></font>
          </el-col>
          <el-col span="12" push="4">
            <font size="3" color="#0000EE"> <i class="el-icon-star-on"><i>停用：{{deviceStaticVo.pauseCount}}</i></i></font>
          </el-col>
        </el-row>
        </el-header>
      </el-main>
    </el-container>
    <!-- <el-container>
      <el-header>
        <el-row>
          <el-col span="6"><i class="el-icon-circle-plus">
              <font size="3"><i>正常：{{deviceStaticVo.normalCount}}</i></font>
            </i></el-col>
          <el-col span="6">
            <font size="3" color="crimson"> <i class="el-icon-warning"><i>失联：{{deviceStaticVo.outlineCount}}</i></i></font>
          </el-col>
          <el-col span="6">
            <font size="3" color="green"> <i class="el-icon-circle-check"><i>告警：{{deviceStaticVo.alarmCount}}</i></i></font>
          </el-col>
          <el-col span="6">
            <font size="3" color="#0000EE"> <i class="el-icon-star-on"><i>停用：{{deviceStaticVo.pauseCount}}</i></i></font>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="border-bottom: 1px solid #000000;margin-bottom: 20px;">

      </el-main>
    </el-container> -->
    <el-divider ></el-divider>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
      :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
      @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">

      <template slot="menu" slot-scope="scope">
        <el-button icon="el-icon-view" type="text" @click="viewDetail(scope.row)">查看</el-button>
      </template>

      <template slot="battery" slot-scope="scope">
        <!-- <battery style=" width: 90px;height: 30px;" :proIsCharge="proIsCharge" :proQuantity="scope.row.battery"></battery> -->
        <el-progress v-if="scope.row.battery>20" color="green" :text-inside="true" :stroke-width="18" :percentage="scope.row.battery"></el-progress>
        <el-progress v-if="scope.row.battery<20 ||scope.row.battery == 20" color="red" :text-inside="true"
          :stroke-width="18" :percentage="scope.row.battery"></el-progress>
      </template>

      <template slot="signalIntensity" slot-scope="scope">
        <img src="../../../public/img/device/signal0.png" :alt="scope.row.signalIntensity" :title="scope.row.signalIntensity"
          style="width: 30px;height: 30px;text-align: center;" v-if="scope.row.signalIntensity<-100 || scope.row.signalIntensity==-100">
        <img src="../../../public/img/device/signal1.png" :alt="scope.row.signalIntensity" :title="scope.row.signalIntensity"
          style="width: 30px;height: 30px;text-align: center;" v-if="scope.row.signalIntensity>-100 && (scope.row.signalIntensity<-88 || scope.row.signalIntensity == -88)">
        <img src="../../../public/img/device/signal2.png" :alt="scope.row.signalIntensity" :title="scope.row.signalIntensity"
          style="width: 30px;height: 30px;text-align: center;" v-if="scope.row.signalIntensity>-88 && (scope.row.signalIntensity<-77 || scope.row.signalIntensity == -77)">
        <img src="../../../public/img/device/signal3.png" :alt="scope.row.signalIntensity" :title="scope.row.signalIntensity"
          style="width: 30px;height: 30px;text-align: center;" v-if="scope.row.signalIntensity>-66 && (scope.row.signalIntensity<-55 || scope.row.signalIntensity == -55)">
        <img src="../../../public/img/device/signal4.png" :alt="scope.row.signalIntensity" :title="scope.row.signalIntensity"
          style="width: 30px;height: 30px;text-align: center;" v-if="scope.row.signalIntensity>-55 || scope.row.signalIntensity==-55">
      </template>

    </avue-crud>
  </basic-container>
</template>

<script>
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    getSmartDeviceStaticVo
  } from "@/api/smartapplication/smartdevice";
  import {
    mapGetters
  } from "vuex";

  export default {
    props: {
      buildingId: {
        type: String
      }
    },
    mounted() {
      console.log(this.buildingId)
    },
    data() {
      return {
        deviceStaticVo: {},
        allVisible: true,
        activeName: "first",
        detailVisible: false,
        form: {},
        deviceDetail: {},

        alarmData: [],
        alarmSetData: [],

        homeUserData: [],
        bindedHomeUserData: [],
        query: {},
        loading: true,

        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },

        selectionList: [],
        transhbinRecordOption: {
          height: 'auto',
          menuWidth: 200,
          // calcHeight: 200,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,

          addBtn: false,

          menu: false,

          selection: true,
          dialogClickModal: false,
          column: [{
              label: "时间",
              prop: "time",
              rules: [{
                required: true,
                message: "请输入设备唯一标识",
                trigger: "blur"
              }]
            },
            {
              label: "设备号",
              prop: "deviceNumber",
              rules: [{
                required: true,
                message: "请输入设备唯一标识",
                trigger: "blur"
              }]
            },
            {
              label: "设备名称",
              prop: "deviceName",
              search: true,
              rules: [{
                required: true,
                message: "请输入设备名称",
                trigger: "blur"
              }]
            },
            {
              label: "描述",
              prop: "introduce",

              rules: [{
                required: true,
                message: "请输入设备注册平台标识,1:aep,2:华为,3:厂商",
                trigger: "blur"
              }]
            },
            {
              label: "卡号",
              prop: "cardNo",

              rules: [{
                required: true,
                message: "请输入产品,对应 aep 产品的 apikey",
                trigger: "blur"
              }]
            },
            {
              label: "重量",
              prop: "heavy",

              rules: [{
                required: true,
                message: "请输入操作者",
                trigger: "blur"
              }]
            }
          ]
        },

        option: {
          height: 'auto',
          menuWidth: 200,
          calcHeight: 40,
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          border: true,
          index: true,
          viewBtn: false,
          // addBtn: false,
          delBtn: false,
          editBtn: false,
          selection: true,
          dialogClickModal: false,
          column: [{
              label: "设备唯一标识",
              prop: "deviceId",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入设备唯一标识",
                trigger: "blur"
              }]
            },
            {
              label: "设备名称",
              prop: "deviceName",
              search: true,
              rules: [{
                required: true,
                message: "请输入设备名称",
                trigger: "blur"
              }]
            },
            {
              label: "设备注册平台标识",
              prop: "isAep",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_registry_label",
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              dataType: "number",
              // search: true,
              searchLabelWidth: 140,
              searchSpan: 8,

              rules: [{
                required: true,
                message: "请输入设备注册平台标识,1:aep,2:华为,3:厂商",
                trigger: "blur"
              }]
            },
            {
              label: "apikey",
              prop: "masterKey",
              hide: true,
              rules: [{
                required: false,
                message: "请输入产品,对应 aep 产品的 apikey",
                trigger: "blur"
              }]
            },
            {
              label: "操作者",
              prop: "operator",
              hide: true,
              rules: [{
                required: false,
                message: "请输入操作者",
                trigger: "blur"
              }]
            },
            {
              label: "产品ID",
              prop: "productId",
              hide: true,
              rules: [{
                required: false,
                message: "请输入产品ID",
                trigger: "blur"
              }]
            },
            {
              label: "订阅事件",
              prop: "autoObserver",
              type: "select",
              hide: true,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=auto_subscribe",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              rules: [{
                required: true,
                message: "请输入0 自动订阅（默认），1 取消自动订阅 (LWM2M 协议选填，其他协议不填）",
                trigger: "blur"
              }]
            },
            {
              label: "设备类型",
              prop: "deviceType",
              type: "select",
              search: true,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              // display: false,
              rules: [{
                required: true,
                message: "请输入设备类型",
                trigger: "blur"
              }]
            },
            {
              label: "安装位置",
              prop: "deviceInstallAddress",
              rules: [{
                required: true,
                message: "请输入安装位置",
                trigger: "blur"
              }]
            },
            {
              label: "设备状态",
              prop: "deviceStatus",
              type: "select",
              search: true,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=device_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              rules: [{
                required: true,
                message: "请输入设备状态",
                trigger: "blur"
              }]
            },
            {
              label: "电池电量",
              prop: "battery",
              slot: true,
              rules: [{
                required: true,
                message: "请输入电池电量",
                trigger: "blur"
              }]
            },
            {
              label: "信号强度",
              prop: "signalIntensity",
              slot: true,
              rules: [{
                required: true,
                message: "请输入信号强度",
                trigger: "blur"
              }]
            },
            {
              label: "厂家名称",
              prop: "manufacturers",
              hide: true,
              rules: [{
                required: true,
                message: "请输入厂家名称",
                trigger: "blur"
              }]
            },
            {
              label: "厂商编号(附录)",
              prop: "manufacturersNo",
              hide: true,
              rules: [{
                required: false,
                message: "请输入厂商编号(附录)",
                trigger: "blur"
              }]
            },
            {
              label: "设备型号",
              prop: "deviceSpecld",
              hide: true,
              rules: [{
                required: true,
                message: "请输入设备型号",
                trigger: "blur"
              }]
            },
            {
              label: "IMEI号",
              prop: "imei",
              hide: true,
              rules: [{
                required: true,
                message: "请输入IMEI号",
                trigger: "blur"
              }]
            },
            {
              label: "iccid",
              prop: "iccid",
              hide: true,
              rules: [{
                required: true,
                message: "请输入iccid",
                trigger: "blur"
              }]
            },
            {
              label: "Mcu软件版本",
              prop: "mcuEdition",
              hide: true,
              rules: [{
                required: true,
                message: "请输入Mcu软件版本",
                trigger: "blur"
              }]
            },
            {
              label: "NB模组型号",
              prop: "nbModuleModel",
              hide: true,
              rules: [{
                required: true,
                message: "请输入NB模组型号",
                trigger: "blur"
              }]
            },
            {
              label: "NB模组版本信息",
              prop: "nbModuleEdition",
              hide: true,
              rules: [{
                required: true,
                message: "请输入NB模组版本信息",
                trigger: "blur"
              }]
            },
            {
              label: "最后更新时间",
              prop: "lastUpdateTime",
              hide: true,
              type: "datetime",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              rules: [{
                required: true,
                message: "请输入最后更新时间",
                trigger: "blur"
              }]
            },
            {
              label: "心跳保护时间",
              prop: "heartbeatTime",
              type: "datetime",
              hide: true,
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              rules: [{
                required: true,
                message: "请输入心跳保护时间",
                trigger: "blur"
              }]
            },
            {
              label: "无线信号覆盖等级",
              prop: "wirelessLevel",
              hide: true,
              rules: [{
                required: true,
                message: "请输入无线信号覆盖等级",
                trigger: "blur"
              }]
            },
            {
              label: "当前磁场值",
              prop: "magneticField",
              hide: true,
              rules: [{
                required: true,
                message: "请输入当前磁场值",
                trigger: "blur"
              }]
            },
            {
              label: "终端发射功率",
              prop: "transmittingPower",
              hide: true,
              rules: [{
                required: true,
                message: "请输入终端发射功率",
                trigger: "blur"
              }]
            },
            {
              label: "终端接收功率",
              prop: "receivingPower",
              hide: true,
              rules: [{
                required: true,
                message: "请输入终端接收功率",
                trigger: "blur"
              }]
            },
            {
              label: "信噪比",
              prop: "signalNoiseRatio",
              hide: true,
              rules: [{
                required: true,
                message: "请输入信噪比",
                trigger: "blur"
              }]
            },
            {
              label: "IMSI",
              prop: "imsi",
              hide: true,
              rules: [{
                required: true,
                message: "请输入IMSI",
                trigger: "blur"
              }]
            },
            // {
            //   label: "检测介质",
            //   prop: "testMedium",
            //   hide: true,
            //   type: "select",
            //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=gas_medium",
            //   props: {
            //     label: "dictValue",
            //     value: "dictKey"
            //   },
            //   // dataType: "number",
            //   rules: [{
            //     required: true,
            //     message: "请输入检测介质",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "浓度值",
            //   prop: "concentration",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入浓度值",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "门状态",
            //   prop: "doorStatus",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入门状态",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "设备通信协议",
            //   prop: "protocolType",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入设备通信协议",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "设备分组 tag",
            //   prop: "tag",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入设备分组 tag， 设备创建时指定 tag 后可以分 tag 获取对应的汇总信息，不传默认为0-全部",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "经纬度（仅记录）",
            //   prop: "latitudeLongitude",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入经纬度（仅记录）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "区域 id（仅记录）",
            //   prop: "area",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入区域 id（仅记录）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "组织 id（仅记录）",
            //   prop: "organization",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入组织 id（仅记录）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "图片 id（仅记录）",
            //   prop: "deviceImage",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入图片 id（仅记录）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "人员 id（仅记录）",
            //   prop: "person",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入人员 id（仅记录）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "电表表号（指令下发使用,电表必填）",
            //   prop: "ammeterId",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入电表表号（指令下发使用,电表必填）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "区域位置（仅记录）",
            //   prop: "distLocate",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入区域位置（仅记录）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "人像库类型",
            //   prop: "manufactureType",
            //   type: "select",
            //   hide: true,
            //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=person_image_type",
            //   props: {
            //     label: "dictValue",
            //     value: "dictKey"
            //   },
            //   dataType: "number",
            //   rules: [{
            //     required: true,
            //     message: "请输入人像库类型 （1:视频云 2:VEP） (视频监控人脸门禁、车牌识别组件必填其他组件不填)",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "门禁设备标注进出属性",
            //   prop: "monitorType",
            //   hide: true,
            //   type: "select",
            //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=out_or_in",
            //   props: {
            //     label: "dictValue",
            //     value: "dictKey"
            //   },
            //   dataType: "number",
            //   rules: [{
            //     required: true,
            //     message: "请输入门禁设备标注进出属性 1 进，2出（人脸门禁组件必填，其他不填）",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "(LWM2M 协议选填，其他协议不填）",
            //   prop: "pskValue",
            //   hide: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入(LWM2M 协议选填，其他协议不填）",
            //     trigger: "blur"
            //   }]
            // },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.smartdevice_add, false),
          viewBtn: this.vaildData(this.permission.smartdevice_view, false),
          delBtn: this.vaildData(this.permission.smartdevice_delete, false),
          editBtn: this.vaildData(this.permission.smartdevice_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {

      handleClick(tab, event) {
        console.log(tab + " " + event)
      },
      viewDetail(row) {
        console.log("row" + JSON.stringify(row))
        this.deviceDetail = row;
        this.alarmData = [{
          name: "李德",
          tel: "15089107336",
          area: "阅海万家D区"
        }, {
          name: "黄俊豪",
          tel: "15145867336",
          area: "阅海万家D区"
        }, {
          name: "林旭光",
          tel: "17899572954",
          area: "阅海万家D区"
        }, {
          name: "蔡志彬",
          tel: "17899584512",
          area: "阅海万家D区"
        }, {
          name: "黄坚伟",
          tel: "17899571256",
          area: "阅海万家D区"
        } ];
        this.alarmSetData = [{
          name: "黄坚伟",
          tel: "17899571256",
          area: "阅海万家D区"
        }];
        this.homeUserData = [{
          name: "李德",
          tel: "15089107336",
          area: "阅海万家D区"
        }, {
          name: "黄俊豪",
          tel: "15145867336",
          area: "阅海万家D区"
        }, {
          name: "林旭光",
          tel: "17899572954",
          area: "阅海万家D区"
        }, {
          name: "蔡志彬",
          tel: "17899584512",
          area: "阅海万家D区"
        }, {
          name: "黄坚伟",
          tel: "17899571256",
          area: "阅海万家D区"
        }];
        this.bindedHomeUserData = [];
        this.detailVisible = true;
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },

      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },

      homeUserOnLoad(page, params = {}) {
        this.homeUserLoading = true;
        this.homeUserData = [{
          name: "蔡志彬",
          tel: "17899584512",
          area: "阅海万家D区"
        }, {
          name: "黄坚伟",
          tel: "17899571256",
          area: "阅海万家D区"
        }];
        this.homeUserLoading = false;
      },
      onLoad(page, params = {}) {
        this.loading = true;
        params.buildingId = this.buildingId;
        getSmartDeviceStaticVo(params).then(res =>{
          this.deviceStaticVo = res.data.data
        })
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });


      }
    }
  };
</script>

<style scoped>
  .el-divider--vertical {
    /* height: 100%; */
  }
</style>
