<template>
  <div id="container">
    <div class="alarmrecord">
      <el-card class="box-card" v-if="!openlog">
        <el-row class="">
          <div class="search">
            <div class="inputInline">
              <!-- <el-select v-model="selectoptionValue" v-if="userInfo.type==0" size="mini" class="w150" placeholder="请选择数据中心" @change="selectTenantId"
                style="width: 1.5rem;" >
                <el-option v-for="item in selectoption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
              <selectoption></selectoption>
              <el-input v-model="searchForm.deviceNum" :clearable="true" class="w150" placeholder="设备名称" size="mini"
                @input="InputFun($event,'deviceNum')"></el-input>
              <el-input v-model="searchForm.imei" :clearable="true" class="w150" placeholder="IMEI" size="mini"
                @input="InputFun($event,'imei')"></el-input>
              <el-input v-model="searchForm.roomName" :clearable="true" class="w150" placeholder="房间名称" size="mini"
                @input="InputFun($event,'roomName')"></el-input>
              <el-cascader :options="roomData" @change="checkNode" class="w150" v-model="searchForm.roomName1"
                popper-class="cascadername" :props="{ checkStrictly: true }" clearable placeholder="安装位置" size="mini">
              </el-cascader>
              <div class="quantity">
                <el-select v-model="searchForm.lockStatus" class="w150" @input="InputFun($event,'lockStatus')"
                  placeholder="开门状态" size="mini">
                  <el-option v-for="item in openDoor" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="quantity">
                <el-select v-model="searchForm.isOnline" class="w150" @input="InputFun($event,'isOnline')"
                  placeholder="是否在线" size="mini">
                  <el-option v-for="item in onLine" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="quantity">
                <el-select v-model="searchForm.accessPlatform" @input="InputFun($event,'accessPlatform')" class="w150"
                  placeholder="信号类别" size="mini">
                  <el-option v-for="item in signal" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="quantity">
                电量： <el-input placeholder="" v-model="searchForm.startBattery" @input="InputFun($event,'startBattery')"
                  class="w50" size="mini">
                  <template slot="append">%</template>
                </el-input> - <el-input placeholder="" v-model="searchForm.endBattery"
                  @input="InputFun($event,'endBattery')" class="w50" size="mini">
                  <template slot="append">%</template>
                </el-input>
              </div>
            </div>
            <el-button size="mini" @click="reset">重置</el-button>
            <div class="margin20">
              <el-button type="primary" size="mini" @click="getlistDevicesearch">查询</el-button>
            </div>
          </div>
        </el-row>
        <el-row class="marginTop">
          <div class="switchiconfont">
            <i class="iconfont icon-liebiao" :class="activeiconfont ? 'active' : ''" @click="activeiconfun(true)"
              title="切换方块展示"></i>
            <i class="iconfont icon-liebiao1" :class="activeiconfont ? '' : 'active'" @click="activeiconfun(false)"
              title="切换表格展示"></i>
          </div>
          <div class="tablecell">
            <el-row class="floatLeft">
              <el-button type="primary" size="mini" @click="addDevice">添加</el-button>
              <el-button type="primary" size="mini" @click="uploadDrawLog1">导入</el-button>
              <!-- <el-button type="primary" size="mini">批量添加</el-button> -->
              <el-button type="danger" size="mini" :disabled="batch" @click="deleteDevice">删除设备
              </el-button>
            </el-row>
            <el-table ref="multipleTable" v-if="!activeiconfont" :data="tableData" :border="true" tooltip-effect="dark"
              style="width: 100%" :header-cell-style="rowClass" :cell-style="{fontSize:'12px'}"
              @selection-change="handleSelectionChange" stripe height="590">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="id" label="序列号" width="80">
              </el-table-column>
              <el-table-column prop="imei" label="IMEI" width="150">
              </el-table-column>
              <el-table-column prop="deviceNum" label="设备名称" width="150">
              </el-table-column>
              <el-table-column prop="isOnline" label="设备状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.isOnline==0">离线</span>
                  <span v-if="scope.row.isOnline==1">在线</span>
                </template>
              </el-table-column>
              <el-table-column prop="roomName" label="安装点位" show-overflow-tooltip> </el-table-column>
             <el-table-column prop="accessPlatformText" label="锁平台"></el-table-column>
              <el-table-column prop="lastReportAt" label="最近事件时间" label-width="200px" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="enterpriseName" label="所属单位" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="快捷操作" width="400" fixed="right">
                <template slot-scope="scope">
                  <div class="curpoiner">
                    <el-button type="primary" size="mini" @click="openlogFun(1,scope.row)">
                      报警记录
                    </el-button>
                    <el-button type="primary" size="mini" @click="openlogFun(2,scope.row)">
                      心跳记录
                    </el-button>
                    <el-button type="primary" size="mini" @click="bindRoom(scope.$index,scope.row)">
                      绑定
                    </el-button>
                    <el-button type="primary" size="mini" @click="unbindRoom(scope.$index,scope.row)">解绑
                    </el-button>
                    <el-button type="primary" size="mini" @click="deleteDevice1(scope.$index,scope.row)">删除
                    </el-button>
                    <!-- <span class="operation">更多操作</span><i class="iconfont icon-xiangxia2"></i> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="roomcontent" v-else>
              <div class="roomconli" v-for="(item, index) in tableData" :key="index">
                <deviceLi :data="item"></deviceLi>
                <div class="button-list">
                  <div @click="openlogFun(1, item)">报警记录</div>
                  <div @click="openlogFun(2, item)">心跳记录</div>
                  <div @click="bindRoom(index, item)">绑定</div>
                  <div @click="unbindRoom(index, item)">解绑</div>
                  <div @click="deleteDevice1(index, item)">删除</div>
                </div>
              </div>
            </div>
          </div>
          <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 100, 200, 300]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
            </el-pagination>
          </div>
        </el-row>
      </el-card>
      <el-row v-if="openlog">
        <el-card class="box-card">
          <el-row class="floatLeft">
            <el-button type="primary" size="mini" @click="backFun">返回</el-button>
            </el-button>
          </el-row>
          <div v-if="openIndex==1">
            <el-table ref="multipleTable" :data="opendata" :border="true" tooltip-effect="dark" style="width: 100%"
              :header-cell-style="rowClass" :cell-style="{fontSize:'12px'}" stripe height="590">
              <el-table-column prop="deviceNum" label="设备名称" width="200"></el-table-column>
              <el-table-column prop="name" label="房间名称" width="200"></el-table-column>
              <el-table-column prop="imei" label="IMEI" width="200"></el-table-column>
              <el-table-column prop="imsi" label="IMSI" width="200"></el-table-column>
              <el-table-column prop="battery" label="电池电量">
              </el-table-column>
              <el-table-column prop="voltage" label="电池电压">
              </el-table-column>
              <el-table-column prop="rssi" label="信号强度">
              </el-table-column>
              <el-table-column prop="deviceType" label="报警类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.operateCode==0">心跳</span>
                  <span v-if="scope.row.operateCode==1">开门报警</span>
                  <span v-if="scope.row.operateCode==2">低电报警</span>
                  <span v-if="scope.row.operateCode==4">防拆报警</span>
                  <span v-if="scope.row.operateCode==5">设备故障报警</span>
                  <span v-if="scope.row.operateCode==13">设备测试</span>
                  <span v-if="scope.row.operateCode==17">关门报警</span>
                  <span v-if="scope.row.operateCode==18">低电压恢复与上电开机</span>
                  <span v-if="scope.row.operateCode==20">防拆恢复</span>
                  <span v-if="scope.row.operateCode==21">故障恢复</span>
                  <span v-if="scope.row.operateCode==170">设备ACK</span>
                  <span v-if="scope.row.operateCode==30">添加子设备</span>
                  <span v-if="scope.row.operateCode==31">删除子设备</span>
                </template>
              </el-table-column>
              <el-table-column prop="createAt" label="最近报警时间" width="200">
              </el-table-column>
            </el-table>
          </div>
          <div v-if="openIndex==2">
            <el-table ref="multipleTable" :data="opendata" :border="true" tooltip-effect="dark" style="width: 100%"
              :header-cell-style="rowClass" :cell-style="{fontSize:'12px'}" stripe height="590">
              <el-table-column prop="deviceNum" label="设备名称" width="200"></el-table-column>
              <el-table-column prop="name" label="房间名称" width="200"></el-table-column>
              <el-table-column prop="imei" label="IMEI" width="200"></el-table-column>
              <el-table-column prop="imsi" label="IMSI" width="200"></el-table-column>
              <el-table-column prop="battery" label="电池电量">
              </el-table-column>
              <el-table-column prop="voltage" label="电池电压">
              </el-table-column>
              <el-table-column prop="rssi" label="信号强度">
              </el-table-column>
              <el-table-column prop="deviceType" label="报警类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.operateCode==0">心跳</span>
                  <span v-if="scope.row.operateCode==1">开门报警</span>
                  <span v-if="scope.row.operateCode==2">低电报警</span>
                  <span v-if="scope.row.operateCode==4">防拆报警</span>
                  <span v-if="scope.row.operateCode==5">设备故障报警</span>
                  <span v-if="scope.row.operateCode==13">设备测试</span>
                  <span v-if="scope.row.operateCode==17">关门报警</span>
                  <span v-if="scope.row.operateCode==18">低电压恢复与上电开机</span>
                  <span v-if="scope.row.operateCode==20">防拆恢复</span>
                  <span v-if="scope.row.operateCode==21">故障恢复</span>
                  <span v-if="scope.row.operateCode==170">设备ACK</span>
                  <span v-if="scope.row.operateCode==30">添加子设备</span>
                  <span v-if="scope.row.operateCode==31">删除子设备</span>
                </template>
              </el-table-column>
              <el-table-column prop="createAt" label="最近报警时间" width="200">
              </el-table-column>
            </el-table>
          </div>
          <div class="page">
            <el-pagination @size-change="openhandleSizeChange" @current-change="openhandleCurrentChange"
              :current-page="opencurrentPage" :page-sizes="[20, 100, 200, 400]" :page-size="openpageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="openTotal">
            </el-pagination>
          </div>
        </el-card>
      </el-row>
      <el-dialog title="添加设备" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form :inline="true" :model="subForm" class="demo-form-inline" label-width="80px">
          <el-form-item label="型号:">
            <el-select v-model="subForm.manufactureId" placeholder="型号" size="middle">
              <el-option v-for="item in manufacturerList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            </el-input>
          </el-form-item>
          <div v-if="subForm.manufactureId==702">
            <el-form-item label="设备号:">
              <el-input v-model="subForm.deviceNum" placeholder="请输入内容" size="middle">
              </el-input>
            </el-form-item>
            <el-form-item label="网关:">
              <el-select v-model="subForm.gatewayDevice" placeholder="请选择网关设备" size="middle">
                <el-option v-for="item in gatewayDeviceList" :key="item.value" :label="item.deviceNum"
                  :value="item.deviceNum"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div
            v-else-if="subForm.manufactureId==302||subForm.manufactureId==402||subForm.manufactureId==502||subForm.manufactureId==602">
            <el-form-item label="IMEI:">
              <el-input v-model="subForm.imei" placeholder="请输入内容" size="middle">
              </el-input>
            </el-form-item>
            <el-form-item label="IMSI:">
              <el-input v-model="subForm.imsi" placeholder="请输入内容" size="middle">
              </el-input>
            </el-form-item>
            <el-form-item label="平台类型:">
              <el-select v-model="subForm.platformId" placeholder="平台类型" size="middle">
                <el-option v-for="item in accessPlatform.select" :key="item.code" :label="item.desc" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFun">添 加</el-button>
        </span>
      </el-dialog>
      <el-dialog :title="titleText" :visible.sync="dialogVisible1" width="60%" class="dialogcontent"
        :before-close="handleClose1">
        <div class="tablecell">
          <el-row class="floatRight">
            <el-button type="danger" size="mini">一键处理处理全部报警</el-button>
            <el-button type="primary" size="mini">导出</el-button>
          </el-row>
          <el-table ref="multipleTable" :data="tableData" :border="true" tooltip-effect="dark" style="width: 100%"
            :header-cell-style="rowClass" :cell-style="{fontSize:'12px'}" @selection-change="handleSelectionChange"
            stripe height="400">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button type="primary" size="mini">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible1 = false">处 理</el-button>
          </span> -->
      </el-dialog>
      <!-- 绑定房间 -->
      <el-dialog title="绑定房间" :visible.sync="roomVisible" width="30%">
        <div class="ztree">
          <el-tree :data="roomData" show-checkbox node-key="id" ref="tree" @check-change="handleCheckChange"
            :props="defaultProps"></el-tree>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="roomVisible = false">取 消</el-button>
            <el-button type="primary" @click="bindsave">确 定</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog title="设备批量导入" :visible.sync="deviceMore" width="50%">
        <el-upload class="upload-draw-log" ref="upload" action="" accept=".xlsx, .xls" :show-file-list="false"
          :http-request="uploadDrawLog" :on-change="onChange" :limit="1">
          <el-button class="btn" size="mini" type="primary"> 导入文件 </el-button>
        </el-upload>
        <el-button class="btn" size="mini" type="primary" @click="importDevice"> 导入设备 </el-button>
        <el-select v-model="ptplatformId" size="mini" placeholder="平台类型">
          <el-option v-for="item in accessPlatform.select" :key="item.code" :label="item.desc" :value="item.code">
          </el-option>
        </el-select>
        <el-select v-model="ptmanufactureId" placeholder="型号" size="mini">
          <el-option label="FULI" value="302"></el-option>
          <el-option label="JINGHUA" value="402"></el-option>
          <el-option label="JIANSHU" value="502"></el-option>
        </el-select>
        <el-table ref="multipleTable1" @selection-change="handleSelectionChange1" :data="importData" border stripe
          style="width: 100%" height="350">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="id" label="房源ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="建筑物名称" width="180">
          </el-table-column>
          <el-table-column prop="enterpriseId" label="所属单位ID">
          </el-table-column>
          <el-table-column prop="enterpriseName" label="所属单位名称">
          </el-table-column>
          <el-table-column prop="address" label="详细地址">
          </el-table-column>
          <el-table-column prop="imei" label="设备IMEI">
          </el-table-column>
          <el-table-column prop="imsi" label="设备IMSI">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import deviceLi from "./common/deviceLi.vue";
  import {
    httpGet,
    httpPost,
    httpPostno
  } from "../../api/index";
  import {
    ztreeToElementTree,
    ztreeToElementTree3,
    recursion,
    uniqueArray,
    paramsValidate
  } from "../../utils/index"
  import QRCode from 'qrcodejs2'
  import moment from "moment"
  import {
    formatJson,
    readExcel
  } from "../../vendor/index.js"
  import RequestSet from "../../api/allFun.js"
  export default {
    // inject: ['reload'],
    name: "alarmRecord",
    data() {
      return {
        // selectoption:[],
        // selectoptionValue:'',
        deviceMore: false,
        openlog: false,
        openIndex: 0,
        openTotal: 0,
        openpageSize: 20,
        opencurrentPage: 1,
        opendata: [],
        searchForm: {
          roomName: '',
          roomName1: '',
          deviceNum: '',
          roomId: '',
          roomIds: '',
          startBattery: '0',
          endBattery: '100',
          imei: '',
          accessPlatform: '',
          isOnline: '',
          lockStatus: '',
          lockType: 2
        },
        openDoor: [{
          value: '1',
          label: '门已开'
        }, {
          value: '0',
          label: '门已关'
        }],
        onLine: [{
          value: '1',
          label: '在线'
        }, {
          value: '0',
          label: '离线'
        }],
        signal: [{
          value: '1',
          label: '电信'
        }, {
          value: '2',
          label: '移动'
        }, {
          value: '3',
          label: '联通'
        }],
        activeiconfont: true,
        roomVisible: false,
        manufacturerList: [],
        subForm: {
          imei: '',
          imsi: '',
          device: '',
          platformId: '',
          manufactureId: '',
          gatewayDevice: ''
        },
        titleText: '设备未处理报警记录(IMEI:860709056256857)',
        textarea: '', //批量处理备注
        dialogVisible: false,
        dialogVisible1: false,
        input: '',
        content: '切换单个/多个查询模式',
        selected: true,
        advancedQueryStatus: false,
        advancedQueryText: '高级查询',
        formInline: {
          region: ''
        },
        tableData: [],
        rowStyle: {
          background: '#f8f9fa',
          fontSize: '12px'
        },
        multipleSelection: [],
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        batch: true,
        bromm: '',
        defaultProps: {
          children: "children",
          label: "name",
        },
        zNodes: [],
        roomData: [],
        treedata: [],
        settime: 0,
        imei: '',
        importData: [],
        multipleSelection1: [],
        ptplatformId: '',
        ptmanufactureId: '',
        allRoom: [],
        userInfo: {
          type: ''
        },
        gatewayDeviceList: [],
        deviceNumSearch: '',
				accessPlatform:{}
      }
    },
    computed: {

    },
    components: {
      deviceLi
    },
    created() {
      this.manufacturerList = this.$MANUFACTURER.MANUFACTURER.doorMagnetism
			this.accessPlatform = this.$MANUFACTURER.accessPlatform
      this.userInfo = JSON.parse(localStorage.getItem('info'))
      // this.selectoption=JSON.parse(localStorage.getItem('selectoption'))
      // this.selectoptionValue=localStorage.getItem('tenantId')
      this.getlistDevice()
      this.getlist()
      this.getGatewayDeviceList()
    },
    mounted() {},
    activated() {
      this.getlistDevice()
      this.getlist()
    },
    methods: {
      // 获取网关设备
      getGatewayDeviceList() {
        var data = {
          q: JSON.stringify({
            lockType: 99,
          }),
          pageNum: 0,
          pageSize: 0,
        };
        httpPost(data, this.$api.getDeviceItems).then((res) => {
          if (res.success) {
						res.data.list.map(li=>{							
							var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
							if(accessPlatform){
								li['accessPlatformText']=accessPlatform.desc
							}else{
								li['accessPlatformText']=''
							}
						})
            this.gatewayDeviceList = res.data.list
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 导入设备
      importDevice() {
        var _this = this
        console.log(this.multipleSelection1, this.ptplatformId)
        if (this.ptplatformId == '') {
          this.$message.error('请选择平台类型')
          return false
        }
        if (this.ptmanufactureId == '') {
          this.$message.error('请选择厂商')
          return false
        }
        if (this.multipleSelection1.length == 0) {
          this.$message.error('请选择导入设备')
        } else {
          this.multipleSelection1.map(li => {
            if (li.imei) {
              this.sendData(li, function(data) {
                console.log(data)
                var data1 = [{
                  siteId: li.id,
                  deviceId: data.id,
                }, ];
                httpPost(data1, _this.$api.bindDeviceSite)
                  .then((res) => {
                    if (res.success) {
                      _this.$message.success("绑定成功");
                      _this.getlistDevice();
                    } else {
                      _this.$message.error(`绑定失败`);
                    }
                  })
              })
            }
          })
        }
      },
      sendData(li, callback) {
        var data = {
          imei: li.imei,
          deviceNum: 'flhs' + li.imei,
          imsi: li.imsi,
          platformId: this.ptplatformId,
          manufactureId: this.ptmanufactureId
        }
        httpPost(data, this.$api.registerDevice).then(res => {
          if (res.success) {
            callback(res)
          } else {
            this.$message.error('添加失败')
          }
        })
      },
      uploadDrawLog1() {
        this.deviceMore = true
      },
      async uploadDrawLog(e) {
        try {
          this.isLoading = true;
          const data = await readExcel(e.file);
          const header = [
            "房源ID",
            "建筑物名称",
            "所属单位ID",
            "所属单位名称",
            "详细地址",
            "设备IMEI",
            "设备IMSI",
          ];
          const filterVal = [
            "id",
            "name",
            "enterpriseId",
            "enterpriseName",
            "address",
            "imei",
            "imsi"
          ];
          const _data = formatJson(header, filterVal, data);
          console.log(_data)
          this.importData = _data
        } catch (error) {
          this.$message.error(error.message || error);
        }
        this.$refs.upload.clearFiles();
      },
      onChange(file, fileList) {
        console.log({
          file,
          fileList
        });
      },
      // 选择房源
      checkNode(e) {
        // this.checkNodeId = e
        // this.searchForm.roomId = e[e.length - 1]
        var selectRow = []
        selectRow = this.getChild(this.roomData, e[e.length - 1], [])
        this.searchForm.roomIds = selectRow
      },
      getChild(nodes, item, arr) {
        for (let el of nodes) {
          if (el.id === item) {
            arr.push(el.id);
            if (el.children) {
              this.childNodesDeep(el.children, arr);
            }
          } else if (el.children) {
            this.getChild(el.children, item, arr);
          }
        }
        return arr;
      },
      childNodesDeep(nodes, arr) {
        if (nodes)
          nodes.forEach((ele) => {
            arr.push(ele.id);
            if (ele.children) {
              this.childNodesDeep(ele.children, arr);
            }
          });
      },
      getCascaderObj(val, opt) {
        return val.map(function(value, index, array) {
          for (var itm of opt) {
            if (itm.value == value) {
              opt = itm.children;
              return itm;
            }
          }
          return null;
        });
      },
      backFun() {
        this.openlog = false
        this.opencurrentPage = 1
        this.openpageSize = 20
      },
      openlogFun(index, item) {
        console.log()
        this.openIndex = index
        this.openlog = true
        this.imei = item.imei
        this.deviceNumSearch = item.deviceNum
        if (index == 1) {
          this.getalert()
        } else if (index == 2) {
          this.getalert1()
        }
      },
      getalert1() {
        var q = {}
        if (this.imei == '') {
          q = {
            imei: this.imei,
            operateCode: 0
          }
        } else {
          q = {
            deviceNum: this.deviceNumSearch,
            operateCode: 0
          }
        }
        var data = {
          pageNum: this.opencurrentPage,
          pageSize: this.openpageSize,
          orderType: 'desc',
          orderBy: "createAt",
          q: JSON.stringify(q)
        }
        httpPostno(data, this.$api.getReportList).then(res => {
          if (res.success) {
            res.data.list.map(li => {
              li.createAt = moment(li.createAt).format('YYYY/MM/DD HH:mm:ss')
            })
            this.opendata = res.data.list
            this.openTotal = res.data.total
          } else {
            this.$message.console.error("查询失败");
          }
        })
      },
      getalert() {
        var q = {}
        if (this.imei == '') {
          q = {
            imei: this.imei,
          }
        } else {
          q = {
            deviceNum: this.deviceNumSearch,
          }
        }
        var data = {
          pageNum: this.opencurrentPage,
          pageSize: this.openpageSize,
          orderType: 'desc',
          orderBy: "createAt",
          q: JSON.stringify(q)
        }
        httpPost(data, this.$api.getReportList).then(res => {
          if (res.success) {
            res.data.list.map(li => {
              li.createAt = moment(li.createAt).format('YYYY/MM/DD HH:mm:ss')
            })
            this.opendata = res.data.list
            this.openTotal = res.data.total
          } else {
            this.$message.console.error("查询失败");
          }
        })
      },
      reset() {
        this.searchForm = {
          deviceNum: '',
          roomName: '',
          roomName1: '',
          roomId: '',
          roomIds: "",
          startBattery: '',
          endBattery: '',
          imei: '',
          accessPlatform: '',
          isOnline: '',
          lockStatus: ''
        }
      },
      activeiconfun(t) {
        this.activeiconfont = t;
      },
      // 获取列表
      getlist() {
        var data = {};
        httpGet(data, this.$api.getPlaceList).then((res) => {
          if (res.data.list.length > 0) {
            this.allRoom = res.data.list
            var arrdata = uniqueArray(res.data.list, "id")
            this.roomData = ztreeToElementTree(arrdata, {});
          }
        });
      },
      // 绑定房间
      bindRoom(index, row) {
        this.bromm = row;
        this.roomVisible = true;
        console.log(row, this.bromm)
        this.$refs.tree.setCheckedKeys([]);
      },
      // 解绑
      unbindRoom(index, row) {
        this.$confirm("确定要解绑吗？", "提示", {
            type: "warning",
          })
          .then(() => {
            var data = [{
              deviceId: row.id,
              siteId: row.roomId,
            }]
            httpPost(data, this.$api.unbindSite)
              .then((res) => {
                if (res.success) {
                  this.$message.success("解绑成功");
                  this.getlistDevice();
                } else {
                  this.$message.error(`解绑失败`);
                }
              })

          })
      },
      // 确定绑定
      bindsave() {
        var treedata = this.treedata;
        this.roomVisible = false;
        var data = [{
          siteId: treedata.id,
          deviceId: this.bromm.id,
        }, ];
        httpPost(data, this.$api.bindDeviceSite)
          .then((res) => {
            if (res.success) {
              this.$message.success("绑定成功");
              this.getlistDevice();
            } else {
              this.$message.error(`绑定失败`);
            }
          })
      },
      handleCheckChange(data, checked, node) {
        if (checked) {
          this.treedata = data
        } else {
          if (this.checkedId == data.id) {
            console.log(data)
            this.$refs.tree.setCheckedKeys([data.id]);
          }
        }
      },
      qrcodeScan(index, row) { //生成二维码
        console.log(row.imei)
        let qrcode = new QRCode('qrcode', {
          width: 40, // 二维码宽度
          height: 40, // 二维码高度
          text: row.imei
        })
        console.log(qrcode)
      },
      // 删除设备
      deleteDevice() {
        if (this.multipleSelection.length > 0) {
          this.multipleSelection.map(li => {
            var data = {
              code: "isp/deleteDevice",
              data: {
                deviceNum: li.deviceNum
              }
            }
            httpPost(data, this.$api.sendCommand).then(res => {
              if (res.success) {
                this.$message.success("删除成功")
                this.getlistDevice()
              } else {
                this.$message.error("删除失败")
              }
            })
          })
        } else {
          this.$message.error("请选择设备")
        }
      },
      deleteDevice1(index, row) {
        var data = {
          code: "isp/deleteDevice",
          data: {
            deviceNum: row.deviceNum
          }
        }
        httpPost(data, this.$api.sendCommand).then(res => {
          if (res.success) {
            this.$message.success("删除成功")
            this.getlistDevice()
          } else {
            this.$message.error("删除失败")
          }
        })
      },
      // 添加设备
      addFun() {
        if (this.subForm.manufactureId == 702) {
          if (this.subForm.deviceNum === '' || this.subForm.gatewayDevice === '' || this.subForm.manufactureId === '') {
            this.$message.error("请填写完整信息")
          } else {
            var data = {
              deviceNum: this.subForm.deviceNum,
              gatewayDevice: this.subForm.gatewayDevice,
              manufactureId: this.subForm.manufactureId,
              enterpriseId: this.userInfo.enterpriseId,
            }
            RequestSet.gatewayBindsChildDevic(data, (callback) => {
              if (callback.success) {
                this.dialogVisible = false
                this.getlistDevice()
              } else {
                this.$message.error(callback.message)
              }
            }).catch((error) => {
              this.$message.error(`绑定失败`);
            });
          }
        } else {
          if (this.subForm.imsi == '') {
            this.subForm.imsi = this.subForm.imei
          }
          var deviceNum = 'flhs' + this.subForm.imei
          var data = {
            imei: this.subForm.imei,
            deviceNum: deviceNum,
            imsi: this.subForm.imsi,
            platformId: this.subForm.platformId,
            manufactureId: this.subForm.manufactureId
          }
          httpPost(data, this.$api.registerDevice).then(res => {
            if (res.success) {
              this.dialogVisible = false
              this.getlistDevice()
              this.$message.success("添加成功")
            } else {
              this.$message.error('添加失败')
            }
          })
        }
      },
      yz(obj) {
        var str = {}
        Object.keys(obj).forEach(function(key) {
          if (obj[key] != '' && key != 'roomName1' && key != 'roomName') {
            str[key] = obj[key]
          }
        })
        return str
      },
      getlistDevicesearch() {
        var q = this.yz(this.searchForm)
        var data = {
          q: JSON.stringify(q),
          pageSize: this.pageSize,
          pageNum: 1
        }
        httpPostno(data, this.$api.getDeviceItems).then(res => {
          if (res.success) {
            res.data.list.map(li => {							
				var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
				if(accessPlatform){
					li['accessPlatformText']=accessPlatform.desc
				}else{
					li['accessPlatformText']=''
				}
              if (li.lastReportAt) {
                li.lastReportAt = moment(li.lastReportAt).format(
                  'YYYY/MM/DD HH:mm:ss')
              }
            })
            this.tableData = res.data.list
            this.pageTotal = res.data.total
          } else {
            this.$message.console.error("查询失败");
          }
        })
      },
      getlistDevice() {
        var q = this.yz(this.searchForm)
        var data = {
          q: JSON.stringify(q),
          pageSize: this.pageSize,
          pageNum: this.currentPage
        }
        httpPostno(data, this.$api.getDeviceItems).then(res => {
          if (res.success) {
            res.data.list.map(li => {							
				var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
				if(accessPlatform){
					li['accessPlatformText']=accessPlatform.desc
				}else{
					li['accessPlatformText']=''
				}
              if (li.lastReportAt) {
                li.lastReportAt = moment(li.lastReportAt).format(
                  'YYYY/MM/DD HH:mm:ss')
              }
            })
            this.tableData = res.data.list
            this.pageTotal = res.data.total
          } else {
            this.$message.console.error("查询失败");
          }
        })
      },
      // 选择导入设备
      handleSelectionChange1(val) {
        this.multipleSelection1 = val;
      },
      // 未处理记录打开
      recordFun() {
        this.dialogVisible1 = true
      },
      // 未处理记录处理关闭
      handleClose1(done) {
        done();
      },
      // 批量处理关闭
      handleClose(done) {
        done();
      },
      // 批量处理
      addDevice() {
        this.dialogVisible = true
      },
      // 分页
      handleSizeChange(val) {
        this.pageSize = val
        this.getlistDevice()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getlistDevice()
        console.log(`当前页: ${val}`);
      },
      openhandleSizeChange(val) {
        this.openpageSize = val
        if (this.openIndex == 1) {
          this.getalert()
        } else if (this.openIndex == 2) {
          this.getalert1()
        }
      },
      openhandleCurrentChange(val) {
        this.opencurrentPage = val
        if (this.openIndex == 1) {
          this.getalert()
        } else if (this.openIndex == 2) {
          this.getalert1()
        }
      },
      // 表头样式
      rowClass({
        row,
        rowIndex
      }) {
        return "background:#f8f9fa;color:#333;font-blod:none;font-size:12px;"
      },
      // 表格勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (val.length > 0) {
          this.batch = false
        } else {
          this.batch = true
        }
      },
      // 高级查询显示
      advancedQueryFun() {
        if (this.advancedQueryStatus) {
          this.advancedQueryText = "高级查询"
          this.advancedQueryStatus = false
        } else {
          this.advancedQueryText = "同用查询"
          this.advancedQueryStatus = true
        }
      },
      // 批量处理备注监控
      textareaFun(e) {
        this.textarea = e
      },
      // 输入监控
      InputFun(e, name) {
        if (name == 'startBattery' || name == 'endBattery') {
          if (Number(e) < 0) {
            e = 0
          }
          if (Number(e) > 100) {
            e = 100
          }
        }
        var roomIds = []
        if (name == "roomName") {
          this.allRoom.map(li => {
            if (li.name.indexOf(e) != -1) {
              roomIds.push(li.id)
            }
          })
          this.searchForm.roomIds = roomIds
        }
        this.searchForm[name] = e
      },
      // 单个/多个查询切换
      switchFun() {
        this.selected = !this.selected
      }
    },
  }
</script>

<style scoped>
  .search {
    display: flex;
    align-items: center;
  }

  .search .inputInline {
    margin-right: 0.625rem;
  }

  .search .inputInline .el-input {
    width: 8vw;
  }

  .topBottom {
    margin: 0 10px;
    cursor: pointer;
  }

  .topBottom .iconfont {
    display: block;
    font-size: 12px;
  }

  .topBottom .icon-xiangxia1 {
    margin-top: -3px;
  }

  .topBottom .selected {
    color: #409eff;
  }

  .textBlue {
    color: #409eff;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
  }

  .marginTop {
    margin-top: 20px;
  }

  .tablecell {
    border: 1px solid #eee;
  }

  .floatLeft {
    float: left;
    margin: 10px;
  }

  .page {
    margin-top: 20px;
  }

  .page .el-pagination {
    margin-bottom: 0;
    float: none;
  }

  .tablecell>>>.BtnOrange {
    border: 1px solid #ffb6b6;
    color: #ff4949;
    background: #ffeded;
  }

  .tablecell>>>.BtnOrange:hover {
    background: #ff4949;
    border-color: #ff4949;
    color: #fff;
  }

  .tablecell>>>.BtnBlue {
    border: 1px solid #a3d3ff;
    color: #1890ff;
    background: #e8f4ff;
  }

  .tablecell>>>.BtnBlue:hover {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }

  .dialogcontent {
    padding-bottom: 20px;
  }

  .curpoiner {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #508dfe;
  }

  .curpoiner .icon-erweima {
    font-size: 28px;
  }

  .curpoiner .operation {
    margin-left: 6px;
  }

  .qrcodediv {
    position: relative;
  }

  #qrcode {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .ztree {
    height: 300px;
    overflow-y: auto;
  }

  .margin20 {
    margin: 0 10px;
  }

  .roomcontent {
    margin: 50px 10px 0;
    min-height: 590px;
    overflow-y: auto;
  }

  .roomcontent .roomconli {
    display: inline-block;
    cursor: pointer;
    position: relative;
  }

  .taball {
    width: 100%;
    margin-top: 50px;
  }

  .button-list {
    position: absolute;
    width: 300px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    border-radius: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: none;
  }

  .button-list div {
    /* width: 55px; */
    padding: 0 20px;
    height: 25px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 13px;
    margin: 0 5px 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #dedede;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
  }

  .roomcontent .roomconli:hover .button-list {
    display: flex;
  }

  .switchiconfont {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    color: #333;
    display: flex;
  }

  .switchiconfont .iconfont {
    font-size: 16px;
    padding: 4px 6px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
  }

  .switchiconfont .active {
    color: #fff;
    cursor: pointer;
    background: #459f75;
    border: 1px solid #459f75;
  }

  .quantity {
    display: inline-block;
  }

  .search .inputInline .w50 {
    width: 1.5rem;
  }

  .w150 {
    margin-bottom: 10px;
  }

  .upload-draw-log {
    display: inline-block;
  }

  .upload-draw-log>>>.el-upload--text {
    width: auto;
    height: auto;
    margin-bottom: -10px;
    border: none;
    border-radius: 0;
  }
</style>
