<template>
  <div>
    <div id="map" class="leaflet_container">
      <div style="padding-left: 20px;padding-top: 20px">
        <el-row class="title">
          <el-col :span="6">
            <div class="titlenumtext" @click="getlamp('1','','')">{{ status.openCount }}</div>
          </el-col>
          <el-col :span="6">
            <div class="titlenumtext" @click="getlamp('2','','')">{{ status.closeCount }}</div>
          </el-col>
          <el-col :span="6">
            <div class="titlenumtext" @click="getlamp('4','','')">{{ status.offlineCount }}</div>
          </el-col>
          <el-col :span="6">
            <div class="titlenumtext" @click="getlamp('3','','')">{{ status.alarmCount }}</div>
          </el-col>
        </el-row>
        <el-row class="title" style="padding-top: 5px">
          <el-col :span="1">
            <div class="icon-green"/>
          </el-col>
          <el-col :span="5">
            <div class="titletext">开灯</div>
          </el-col>
          <el-col :span="1">
            <div class="icon-gray"/>
          </el-col>
          <el-col :span="5">
            <div class="titletext">灭灯</div>
          </el-col>
          <el-col :span="1">
            <div class="icon-blue"/>
          </el-col>
          <el-col :span="5">
            <div class="titletext">离线</div>
          </el-col>
          <el-col :span="1">
            <div class="icon-red"/>
          </el-col>
          <el-col :span="5">
            <div class="titletext">报警</div>
          </el-col>
        </el-row>
      </div>
      <div class="btn_bottom" style="margin-bottom: 10px">
        <div style="width: 300px;position: relative;margin: 0px auto;text-align: center">
          <el-radio-group v-model="bottombtn">
            <el-radio-button label="lamp">
              <el-image :src="require('../../assets/global_images/lamp-black.png')" fit="contain" class="image" style="width: 35px;height: 35px" @click="getlamp('','','')"/>
              <div>路灯</div>
            </el-radio-button>
            <el-radio-button label="lampbox">
              <el-image :src="require('../../assets/global_images/lampbox-black.png')" fit="contain" class="image" style="width: 35px;height: 35px;" @click="getlampbox"/>
              <div>灯箱</div>
            </el-radio-button>
            <el-radio-button label="alarm">
              <el-image :src="require('../../assets/global_images/alarm-black.png')" fit="contain" class="image" style="width: 35px;height: 35px;" @click="getalarm"/>
              <div>报警</div>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="list">
      <div style="text-align: right;margin-right: 10px">
        <el-button v-show="showtable" type="primary" size="mini" icon="el-icon-minus" circle @click="tableclick"/>
        <el-button v-show="!showtable" type="primary" size="mini" icon="el-icon-plus" circle @click="tableclick"/>
      </div>
      <div v-show="showtable">
        <el-tabs v-model="tab" type="border-card" @tab-click="tabClick">
          <el-tab-pane label="路灯列表" name="lamp">
            <div class="tab-block">
              <el-row v-if="tab === 'lamp'" class="table-title" style="margin-top: -10px">
                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
                  <el-input v-model.trim="lampQuery.lampCode" size="small" placeholder="路灯编号" clearable />
                </el-col>
                <el-col :span="7" style="margin-top:3px;">
                  <el-select v-model="lampQuery.status" size="small" placeholder="路灯状态" clearable>
                    <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value"/>
                  </el-select>
                </el-col>
                <el-col :span="3" style="margin-top:6px;">
                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
                </el-col>
                <el-col :span="6" class="edit_btns" style="margin-top:6px;text-align: right;margin-left: 8px">
                  <el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','1')">开灯</el-button>
                  <el-button class="edit_btn" size="mini" type="primary" @click="controlLamp('','0')">关灯</el-button>
                </el-col>
              </el-row>
              <el-table
                v-loading="listLoading"
                :row-style="{height: '33px'}"
                :cell-style="{padding: '0px'}"
                :data="list"
                class="infinite-list"
                border
                infinite-scroll-disabled="disabled"
                height="300px"
                style="margin-top: -10px;"
                @row-click="rowClick"
                @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" type="index" label="序号" width="50"/>
                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="column.class">{{ scope.row[column.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="回路列表" name="circuit">
            <div class="tab-block">
              <el-row v-if="tab === 'circuit'" class="table-title" style="margin-top: -10px">
                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
                  <el-input v-model.trim="circuitQuery.circuitCode" size="small" placeholder="回路编号" clearable />
                </el-col>
                <el-col :span="3" style="margin-top:6px;">
                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
                </el-col>
              </el-row>
              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
                <el-table-column align="center" type="index" label="序号" width="50"/>
                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="column.class">{{ scope.row[column.value] }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="灯箱列表" name="lampbox">
            <div class="tab-block">
              <el-row v-if="tab === 'lampbox'" class="table-title" style="margin-top: -10px">
                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
                  <el-input v-model.trim="lampboxQuery.lampboxCode" size="small" placeholder="灯箱编号" clearable />
                </el-col>
                <el-col :span="7" style="margin-top:3px;">
                  <el-select v-model="lampboxQuery.streetId" size="small" placeholder="道路" filterable clearable>
                    <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
                  </el-select>
                </el-col>
                <el-col :span="3" style="margin-top:6px;">
                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
                </el-col>
              </el-row>
              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
                <el-table-column align="center" type="index" label="序号" width="50"/>
                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="column.class">{{ scope.row[column.value] }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'1')">开灯</el-button>
                    <el-button type="text" size="mini" style="padding: 0px;margin: 0px" @click.native.stop="controlLamp(scope.row,'0')">关灯</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="报警列表" name="alarm">
            <div class="tab-block">
              <el-row v-if="tab === 'alarm'" class="table-title" style="margin-top: -10px">
                <el-col :span="7" style="margin-top:3px;margin-left: 5px">
                  <el-select v-model="alarmQuery.deviceType" size="small" placeholder="设备类型" filterable clearable>
                    <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.name" :value="item.value"/>
                  </el-select>
                </el-col>
                <el-col :span="7" style="margin-top:3px;">
                  <el-select v-model="alarmQuery.alarmType" size="small" placeholder="报警类型" filterable clearable>
                    <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
                  </el-select>
                </el-col>
                <el-col :span="3" style="margin-top:6px;">
                  <el-button class="edit_btn" size="mini" type="primary" @click="search">搜索</el-button>
                </el-col>
              </el-row>
              <el-table v-loading="listLoading" :row-style="{height: '33px'}" :cell-style="{padding: '0px'}" :data="list" class="infinite-list" border infinite-scroll-disabled="disabled" height="300px" style="margin-top: -10px;" @row-click="rowClick">
                <el-table-column align="center" type="index" label="序号" width="50"/>
                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :class="column.class">{{ scope.row[column.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { getAllStreet } from '@/api/system/area'
import { getLampStatus, getLampList, getlampDetail, getCircuitList, getLampBoxList, getLampBoxDetail, getAlarmList, getAlarmDetail, lampControl } from '@/api/system/overview'
export default {
  name: 'Overview',
  data() {
    return {
      bottombtn: 'lamp',
      listLoading: false, // 加载动画
      TianDiTu: {
        Normal: {
          Map: 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Satellite: {
          Map: 'https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Terrain: {
          Map: 'https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
          Annotion: 'https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
      },
      map: null,
      tab: 'lamp',
      showtable: true,
      controlQuery: {
        lampIds: [],
        circuitId: '',
        lampBoxId: '',
        controlType: ''
      },
      columns: [
        {
          text: '路灯编号',
          value: 'lampCode',
          align: 'center'
        },
        {
          text: '路灯名称',
          value: 'lampName',
          align: 'center'
        },
        {
          text: '路灯状态',
          value: 'statusName',
          align: 'center',
          width: 80
        }
      ],
      list: [],
      multipleSelection: [], // 多选选中项
      iconlist: [],
      baselayer: [],
      lamplist: [], // 路灯（map）
      lampboxlist: [], // 灯箱（map）
      alarmlist: [], // 报警 （map）
      circuitlist: [], // 回路
      statusList: [
        { value: '1', name: '开灯' }, { value: '2', name: '灭灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }
      ],
      deviceTypeList: [
        { value: '1', name: '路灯控制器' },
        { value: '2', name: '灯杆' },
        { value: '3', name: '路灯' },
        { value: '4', name: '灯箱' },
        { value: '5', name: '回路' }
      ],
      alarmTypeList: [
        { value: '1', name: '开灯异常' },
        { value: '2', name: '关灯异常' },
        { value: '3', name: '低电流告警' },
        { value: '4', name: '高电流告警' },
        { value: '5', name: '低电压告警' },
        { value: '6', name: '高电压告警' },
        { value: '7', name: '掉电告警' },
        { value: '8', name: '漏电告警' }
      ],
      streetList: [],
      status: {
        alarmCount: 0,
        offlineCount: 0,
        closeCount: 0,
        openCount: 0
      },
      lampQuery: {
        lampCode: '',
        status: '',
        circuitId: '',
        lampBoxId: ''
      },
      circuitQuery: {
        circuitCode: ''
      },
      lampboxQuery: {
        lampboxCode: '',
        streetId: ''
      },
      alarmQuery: {
        deviceType: '',
        alarmType: ''
      }
    }
  },
  mounted() {
    this.init()
    this.initData()
  },
  methods: {
    tableclick() {
      this.showtable = !this.showtable
    },
    rowClick(row) {
      if (this.tab === 'lamp') {
        for (var i = 0; i < this.iconlist.length; i++) {
          if (this.iconlist[i].options.id === row.lampId) {
            console.log(this.iconlist[i])
            this.map.setView(this.iconlist[i]._latlng, 17)
            // this.map.setView({ lat: cenLat, lng: cenLng }, 18)
          }
        }
      } else if (this.tab === 'circuit') {
        this.getlamp('', row.id, '')
      } else if (this.tab === 'lampbox') {
        this.getlamp('', '', row.id)
      } else if (this.tab === 'alarm') {
        for (i = 0; i < this.iconlist.length; i++) {
          if (this.iconlist[i].options.id === row.id) {
            console.log(this.iconlist[i])
            this.map.setView(this.iconlist[i]._latlng, 17)
            // this.map.setView({ lat: cenLat, lng: cenLng }, 18)
          }
        }
      }
    },
    async search() {
      this.listLoading = true
      if (this.tab === 'lamp') {
        const detail = await getLampList(this.lampQuery)
        this.lamplist = detail.data
        this.list = this.lamplist
      } else if (this.tab === 'circuit') {
        const detail = await getCircuitList(this.circuitQuery)
        this.ciulistlist = detail.data
        this.list = this.ciulistlist
      } else if (this.tab === 'lampbox') {
        const detail = await getLampBoxList(this.lampboxQuery)
        this.lampboxlist = detail.data
        this.list = this.lampboxlist
      } else if (this.tab === 'alarm') {
        const detail = await getAlarmList(this.alarmQuery)
        this.alarmlist = detail.data
        this.list = this.alarmlist
      }
      this.listLoading = false
    },
    async tabClick(tab, event) {
      this.listLoading = true
      if (tab.name === 'lamp') {
        this.bottombtn = 'lamp'
        this.getlamp('', '', '')
        this.lampQuery.status = ''
        this.lampQuery.circuitId = ''
        this.lampQuery.lampBoxId = ''
        const resDetail = await getLampList(this.lampQuery)
        this.lamplist = resDetail.data
        this.list = this.lamplist
        this.columns = [
          {
            text: '路灯编号',
            value: 'lampCode',
            align: 'center'
          },
          {
            text: '路灯名称',
            value: 'lampName',
            align: 'center'
          },
          {
            text: '路灯状态',
            value: 'statusName',
            align: 'center',
            width: 80
          }
        ]
      } else if (tab.name === 'circuit') {
        const circuitDetail = await getCircuitList()
        this.circuitlist = circuitDetail.data
        this.list = this.circuitlist
        this.columns = [
          {
            text: '回路编号',
            value: 'circuitCode',
            align: 'center'
          },
          {
            text: '回路名称',
            value: 'circuitName',
            align: 'center'
          },
          {
            text: '关联灯箱名称',
            value: 'lampboxName',
            align: 'center'
          }
        ]
      } else if (tab.name === 'lampbox') {
        this.bottombtn = 'lampbox'
        this.getlampbox()
        const lampboxDetail = await getLampBoxList()
        this.lampboxlist = lampboxDetail.data
        this.list = this.lampboxlist
        this.columns = [
          {
            text: '灯箱编号',
            value: 'lampboxCode',
            align: 'center'
          },
          {
            text: '灯箱名称',
            value: 'lampboxName',
            align: 'center'
          },
          {
            text: '道路',
            value: 'streetName',
            align: 'center'
          }, {
            text: '地址',
            value: 'address',
            align: 'center'
          }
        ]
      } else if (tab.name === 'alarm') {
        this.bottombtn = 'alarm'
        this.getalarm()
        const alarmDetail = await getAlarmList()
        this.alarmlist = alarmDetail.data
        this.list = this.alarmlist
        this.columns = [
          {
            text: '报警设备',
            value: 'deviceCode',
            align: 'center',
            width: 130
          },
          {
            text: '设备类型',
            value: 'deviceTypeName',
            align: 'center'
          },
          {
            text: '报警类型',
            value: 'alarmTypeName',
            align: 'center'
          },
          {
            text: '报警值',
            value: 'alarmValue',
            align: 'center',
            width: 70
          }
        ]
      }
      this.listLoading = false
    },
    async initData() {
      const resDetail = await getLampStatus()
      this.status = resDetail.data
      const lampDetail = await getLampList(this.lampQuery)
      this.lamplist = lampDetail.data
      this.list = this.lamplist
      const circuitDetail = await getCircuitList()
      this.circuitlist = circuitDetail.data
      const lampboxDetail = await getLampBoxList()
      this.lampboxlist = lampboxDetail.data
      const alarmDetail = await getAlarmList()
      this.alarmlist = alarmDetail.data
      this.getlamp('', '', '')

      // 获取道路列表
      const streetList = await getAllStreet(null)
      this.streetList = streetList.data
    },
    removemarkers() {
      for (var i = 0; i < this.iconlist.length; i++) {
        this.map.removeLayer(this.iconlist[i])
      }
      var base = this.baselayer
      this.map.eachLayer(function(layer) {
        if (layer !== base[0] && layer !== base[1]) {
          layer.remove()
        }
      })
    },
    controlLamp(row, status) {
      if (this.tab === 'circuit') {
        this.control([], row.id, '', status)
      } else if (this.tab === 'lampbox') {
        this.control('', '', row.id, status)
      } else if (this.tab === 'lamp') {
        if (this.multipleSelection.length === 0) {
          this.$message.warning('请选择路灯')
        } else {
          var selectlist = []
          for (var i = 0; i < this.multipleSelection.length; i++) {
            selectlist.push(this.multipleSelection[i].lampId)
          }
          this.control(selectlist, '', '', status)
        }
        // this.control(row, '', '', status)
      }
    },
    async control(lampIds, circuitId, lampBoxId, controlType) {
      this.controlQuery.lampIds = lampIds
      this.controlQuery.circuitId = circuitId
      this.controlQuery.lampBoxId = lampBoxId
      this.controlQuery.controlType = controlType
      const resDetail = await lampControl(this.controlQuery)
      if (resDetail.code === 200) {
        this.$message.success(resDetail.message)
      } else {
        this.$message.error(resDetail.message)
      }
    },
    async getlamp(status, circuitId, lampBoxId) {
      this.removemarkers()
      this.lampQuery.status = status
      this.lampQuery.circuitId = circuitId
      this.lampQuery.lampBoxId = lampBoxId
      const resDetail = await getLampList(this.lampQuery)
      this.lamplist = resDetail.data
      if (this.lamplist.length === 0) {
        return
      }
      var Icon
      var poslist = []
      this.iconlist = []
      for (var i = 0; i < this.lamplist.length; i++) {
        if (this.lamplist[i].status === '1') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/lamp-green.png'),
            iconSize: [15, 15]
          })
        } else if (this.lamplist[i].status === '2') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/lamp-gray.png'),
            iconSize: [15, 15]
          })
        } else if (this.lamplist[i].status === '4') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/lamp-blue.png'),
            iconSize: [15, 15]
          })
        } else if (this.lamplist[i].status === '3') {
          Icon = L.icon({
            iconUrl: require('../../assets/global_images/lamp-red.png'),
            iconSize: [15, 15]
          })
        }
        var item = L.marker([this.lamplist[i].latitude, this.lamplist[i].longitude], {
          icon: Icon,
          id: this.lamplist[i].lampId
        }).addTo(this.map)
        item.on('click', function(e) {
          if (e.target.dragging._marker._popup) {
            e.target.dragging._marker.unbindPopup()
          }
          getlampDetail(e.target.options.id).then(response => {
            var data = response.data
            var str = '<div style="font-size: 14px;padding: 6px"> ' +
                '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">路灯详情信息</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯编号：</label>' + data.lampCode	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯类型：</label>' + data.lampTypeName	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯状态：</label>' + data.statusName + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯分组：</label>' + data.groupName	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">路灯功率(W)：</label>' + data.power	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器编号：</label>' + data.controllerCode	 + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器类型：</label>' + data.controllerTypeName		 + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">控制器分组：</label>' + data.controllerGroupName	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆编号：</label>' + data.lamppostCode + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆名称：</label>' + data.lamppostName + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆类型：</label>' + data.lamppostTypeName + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯杆分组：</label>' + data.postGroupName + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路编号：</label>' + data.circuitCode + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路名称：</label>' + data.circuitName + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">回路分组：</label>' + data.circuitGroupName	 + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位/高度(m)：</label>' + data.latitude + ';' + data.longitude + ' / ' + data.height + '</div>' +
                // '<div style="padding-bottom: 2px"><label style="padding-right: 5px">高度：</label>' + data.height + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新电压(V)/电流值(A)：</label>' + data.latestVol + ' / ' + data.latestElec + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">最新功率(W)：</label>' + data.latestPower + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">上报时间：</label>' + data.latestTime + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
                '<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
                '</div>'
            var popup = L.popup().setContent(str)
            e.target.dragging._marker.bindPopup(popup).openPopup()
            e.target.dragging._marker.openPopup()
          })
        })
        this.iconlist.push(item)
        var pos = [Number(this.lamplist[i].latitude), Number(this.lamplist[i].longitude)]
        poslist.push(pos)
      }
      if (this.lamplist.length !== 0) {
        this.setZoom(poslist)
      }
    },
    async getcircuit() {
      const circuitDetail = await getCircuitList()
      this.circuitlist = circuitDetail.data
    },
    async getlampbox() {
      this.removemarkers()
      const lampboxDetail = await getLampBoxList()
      this.lampboxlist = lampboxDetail.data
      var poslist = []
      this.iconlist = []
      for (var i = 0; i < this.lampboxlist.length; i++) {
        var Icon = L.icon({
          iconUrl: require('../../assets/global_images/lampbox-black.png'),
          iconSize: [15, 15]
        })
        var item = L.marker([this.lampboxlist[i].latitude, this.lampboxlist[i].longitude], {
          icon: Icon,
          id: this.lampboxlist[i].id
        }).addTo(this.map)
        item.on('click', function(e) {
          if (e.target.dragging._marker._popup) {
            e.target.dragging._marker.unbindPopup()
          }
          getLampBoxDetail(e.target.options.id).then(response => {
            var data = response.data
            console.log(response.data)
            var str = '<div style="font-size: 14px;padding: 6px"> ' +
              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">灯箱详情信息</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱编号：</label>' + data.lampboxCode	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">灯箱名称：</label>' + data.lampboxName	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">所属单位：</label>' + data.deptName	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电流(A)：</label>' + data.elecA + ' / ' + data.elecB + ' / ' + data.elecC + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相电压(V)：</label>' + data.volA + ' / ' + data.volB + ' / ' + data.volC + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">A/B/C相功率(W)：</label>' + data.powerA + ' / ' + data.powerB + ' / ' + data.powerC + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">上传时间：</label>' + data.upTime + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">道路：</label>' + data.streetName + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>' + data.address + '</div>' +
              '</div>'
            var popup = L.popup().setContent(str)
            e.target.dragging._marker.bindPopup(popup).openPopup()
            e.target.dragging._marker.openPopup()
          })
        })
        this.iconlist.push(item)
        var pos = [Number(this.lampboxlist[i].latitude), Number(this.lampboxlist[i].longitude)]
        poslist.push(pos)
      }
      if (poslist.length !== 0) {
        this.setZoom(poslist)
      }
    },
    async getalarm() {
      this.removemarkers()
      const alarmDetail = await getAlarmList()
      this.alarmlist = alarmDetail.data
      var poslist = []
      this.iconlist = []
      for (var i = 0; i < this.alarmlist.length; i++) {
        var Icon = L.icon({
          iconUrl: require('../../assets/global_images/alarm-red.png'),
          iconSize: [15, 15]
        })
        var item = L.marker([this.alarmlist[i].latitude, this.alarmlist[i].longitude], {
          icon: Icon,
          id: this.alarmlist[i].id
        }).addTo(this.map)
        item.on('click', function(e) {
          if (e.target.dragging._marker._popup) {
            e.target.dragging._marker.unbindPopup()
          }
          getAlarmDetail(e.target.options.id).then(response => {
            var data = response.data
            var str = '<div style="font-size: 14px;padding: 6px"> ' +
              '<div style="font-size: 16px;font-weight: bold;padding-bottom: 10px">报警详情信息</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备编号：</label>' + data.deviceCode	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备名称：</label>' + data.deviceName	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">设备类型：</label>' + data.deviceTypeName	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警类型：</label>' + data.alarmTypeName	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警原因：</label>' + data.alarmReason	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警数值：</label>' + data.alarmValue	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">报警时间：</label>' + data.alarmTime	 + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">电流(A)：</label>' + data.electricity + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">电压(V)：</label>' + data.voltage + '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">功率(W)：</label>' + data.power	+ '</div>' +
              '<div style="padding-bottom: 2px"><label style="padding-right: 5px">定位：</label>' + data.latitude + ';' + data.longitude + '</div>' +
              '</div>'
            var popup = L.popup().setContent(str)
            e.target.dragging._marker.bindPopup(popup).openPopup()
            e.target.dragging._marker.openPopup()
          })
        })
        this.iconlist.push(item)
        var pos = [Number(this.alarmlist[i].latitude), Number(this.alarmlist[i].longitude)]
        poslist.push(pos)
      }
      if (poslist.length !== 0) {
        this.setZoom(poslist)
      }
    },
    setZoom(points) {
      if (points.length > 0) {
        var maxLng = points[0][1]
        var minLng = points[0][1]
        var maxLat = points[0][0]
        var minLat = points[0][0]
        var res
        for (var i = points.length - 1; i >= 0; i--) {
          res = points[i]
          if (res[1] > maxLng) maxLng = res[1]
          if (res[1] < minLng) minLng = res[1]
          if (res[0] > maxLat) maxLat = res[0]
          if (res[0] < minLat) minLat = res[0]
        }
        var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2
        var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2
        var zoom = this.getZoom(maxLng, minLng, maxLat, minLat)
        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
      } else {
        // 没有坐标，显示全中国
        this.map.setView({ lat: 103.388611, lng: 35.563611 }, 5)
      }
    },
    getZoom(maxLng, minLng, maxLat, minLat) {
      var zoom = ['50', '100', '200', '500', '1000', '2000', '5000', '10000', '20000', '25000', '50000', '100000', '200000', '500000', '1000000', '2000000', '5000000']// 级别18到3。
      var latlng = L.latLng(maxLat, maxLng)
      var distance = latlng.distanceTo(L.latLng(minLat, minLng))
      // var distance = pointA.distanceTo(pointB)// 获取两点距离,保留小数点后两位
      for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
        if (zoom[i] - distance > 0) {
          return 18 - i + 2 // 之所以会多2，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
        }
      }
      return 5
    },
    init() {
      const map = L.map('map', {
        minZoom: 2,
        maxZoom: 18,
        center: [27.75962, 116.06021],
        zoom: 15,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
    },
    // 多选触发方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:48px;
  .leaflet_container{
    width: 100%;
    height: 90vh;
  }
  .title{
    height: 40px;
    width: 280px;
    padding-top: 10px;
    padding-left: 5px;
    z-index: 100000;
    background-color: rgba(255, 255, 255, 0.91);
  }
  .titletext{
    text-align: center;
    font-size: 15px;
  }
  .titlenumtext{
    text-align: center;
    font-size: 19px;
  }
  .icon-red {
    width: 10px;
    height: 10px;
    background-color: #d0021b;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 50%;
  }
  .icon-green {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-left: 10px;
    background-color: #00b238;
    border-radius: 50%;
  }
  .icon-gray {
    width: 10px;
    height: 10px;
    margin-left: 10px;
    background-color: #8e8e93;
    margin-top: 5px;
    border-radius: 50%;
  }
  .icon-blue {
    width: 10px;
    height: 10px;
    background-color: #8eb4f6;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 50%;
  }
  .list{
    text-align:center;
    width: 500px;
    height: 40px;
    z-index: 10000;
    position: absolute;
    right:20px;
    top:20px;
  }
  .btn_bottom{
    text-align:center;
    width: 100%;
    height:70px;
    z-index: 1000;
    position: fixed; bottom: 0; left: 0;right:0;
  }
  .table-name{
    position:relative;
    width: 100px;
    top:20px;
    margin:-10px auto; //外面的div高度的一半
    z-index: 100001;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
  .title-header{
    line-height:$tableTitleHeight;
    color: #606266;
    font-size: 15px;
  i{
    margin-left: 5px;
    margin-right: 5px;
  }
  }
  }
</style>
