<template>
  <div class="monitor-list-container">
      <el-row :gutter="20">
          <el-col :span="6" style="background:#072e69;padding:30px;position:absolute;top:15px;left:30px;z-index:99;" v-if="monitorShow">
              <div class="video-play-container">
                  <monitor v-if="monitorShow" :monitorInfo="currentMonitor" :key="monitorKey"></monitor>
              </div>
               <p class="monitor-desc-item">监控名称：{{currentMonitor.cameraname}}</p>
               <p class="monitor-desc-item">设备编号：{{currentMonitor.cameraindexcode}}</p>
               <p class="monitor-desc-item">设备类型：{{currentMonitor.cameratypename}}</p>
               <p class="monitor-desc-item">设备通道：{{currentMonitor.channelno}}</p>
               <p class="monitor-desc-item">设备位置：{{currentMonitor.longitude}},{{currentMonitor.latitude}}</p>
               <p class="monitor-desc-item">更新时间：{{currentMonitor.updatetime}}</p>
               <p style="text-align:center;margin-top:280px;margin-bottom:20px;">
                   <el-button type="primary" style="width:160px;border-radius:25px;" size="small" icon="el-icon-location-information" round @click="flyToPosition(currentMonitor)">位置</el-button>
                   <el-button type="warning" style="width:160px;border-radius:25px;" size="small" icon="el-icon-close" round @click="monitorShow = false">关闭</el-button>
               </p>
          </el-col>
           <el-col :span="18">
              <div class="map-container" id="mapContainer">

              </div>
          </el-col>
          <el-col :span="6" style="background:#072e69;padding:15px;">
                <div class="search-container">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                        <el-form-item label="">
                        <el-input v-model="listQuery.querystr" placeholder="请输入设备名称" style="width:220px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                        <el-button type="primary" icon="el-icon-search"  @click="getList()">查询</el-button>
                        
                        <el-button type="" icon="el-icon-refresh-left"   @click="listQuery.querystr = null;getList()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="monitor-box">
                    <div class="monitor-item" v-for="(item,index) in tableData" :key="index" @click="getDetail(item);" >
                        <div class="monitor-image">
                            <div class="play-button"></div>
                            <p class="monitor-desc" style="position:absolute;bottom:6px;left:5px;">{{item.updatetime}}</p>
                        </div>
                        <div class="monitor-info">
                            <p class="monitor-name">{{item.cameraname}}</p>
                            <p class="monitor-desc">编码：{{item.cameraindexcode}}</p>
                            <p class="monitor-desc">类型：{{item.cameratypename}}</p>
                            
                            <p class="monitor-position"> <i class="el-icon el-icon-location-information"></i> {{(item.longitude ? parseFloat(item.longitude).toFixed(6) : '暂无') +","+ (item.latitude ? parseFloat(item.latitude).toFixed(6):'暂无')}}</p>
                        </div>
                    </div>
                </div>

                <div class="pageer-container">
                    <el-pagination
                        :page-size="20"
                        :pager-count="5"
                        layout="prev, pager, next"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :total="totle">
                    </el-pagination>
                </div>
                <el-table
                    v-if="false"
                    :data="tableData"
                    stripe
                    style="width: 100%"
                    max-height="800">
                    <el-table-column
                    prop="cameraindexcode"
                    label="设备ID"
                    width="">
                    </el-table-column>
                    <el-table-column
                    prop="cameraname"
                    label="设备名称"
                    width="">
                    </el-table-column>
                    <el-table-column
                    prop="cameratypename"
                    label="设备类型"
                    width="">
                    </el-table-column>
                    <el-table-column
                    prop="channelno"
                    label="设备通道"
                    width="">
                    </el-table-column>
                    <el-table-column
                    prop="updatetime"
                    label="更新时间"
                    width="">
                    </el-table-column>
                    <el-table-column
                    prop="updatetime"
                    label="位置"
                    width="">
                        <template slot-scope="scope">
                            {{scope.row.longitude!=NaN ? scope.row.longitude :'无'}}&nbsp;{{scope.row.latitude!=NaN ? scope.row.latitude : '无'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="zip"
                    label="是否推送消息"
                    width="">
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                    </el-table-column>
                </el-table>
          </el-col>
           
          
      </el-row>
  </div>
</template>

<script>
import PingYiXianJieGeoJson from "../../assets/pingyixianjie.json";
import { getMethodCommon } from '../../api/Api'
import {getMonitorList} from "@/api/monitor.js";
import monitor from './monitor'
  export default {
    name: 'index',
    components:{
        monitor
    },
    data(){
        return {
            monitorKey:1000,
            monitorShow:false,
            formInline:{},
            listQuery:{
                areaname: localStorage.getItem("areaENName"),
                querystr:null,
                pageIndex:1,
                pageSize:20,
            },
            tableData: [],
            globalMap:null,
            totle:0,
            currentMonitor:{},
            serviceName:"",
            serviceId:"",
        }
    },
    created(){
        

    },
    mounted(){
        this.initMap();
    },
    methods:{
        getList(){
            getMonitorList(this.listQuery).then(res=>{
                if(res.data.code == 200){
                    this.tableData = res.data.data;
                    this.totle = res.data.count;
                    this.handleGeoJson();
                }
            })
        },
        initMap(){
            this.$mapboxgl.accessToken = "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
            this.globalMap = new this.$mapboxgl.Map({
                container:"mapContainer",
                center:[118.0075,35.42222222],
                zoom:12,
                maxZoom:20,
                minZoom:5,
                pitch:0,
                // style:"mapbox://styles/mapbox/satellite-v9"
                // style:"mapbox://styles/mapbox/streets-v11"
                style:"mapbox://styles/xujingliang/cli9pwr6x00y601q1a2w47kwg"
            });
            let _this = this;
            _this.globalMap.on("load",function(){
                _this.globalMap.loadImage('/images/monitor-icon.png', function(error, image) {
                    if (error) throw error;
                    _this.globalMap.addImage('my-image', image);
                });
                _this.loadGaoQingLayer();
                _this.loadDianZiLayer();
                _this.loadXianJieLayer();
                _this.getList();
            })
        },
        handleGeoJson(){

            let geojson = {
                "type": "FeatureCollection",
                "features": []
            }

            this.tableData.forEach((item,index)=>{
                let obj = {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [parseFloat(item.longitude),parseFloat(item.latitude)]
                    },
                    "properties": item
                }
                geojson.features.push(obj);
            })

            this.addMonitorLayer(geojson);

        },
        addMonitorLayer(geojson){
            let _this = this;
            if(this.globalMap.getLayer('editorLayer')){
                this.globalMap.getSource('myData').setData(geojson);
            }else{
                this.globalMap.addSource('myData', {
                    type: 'geojson',
                    data: geojson
                });

                this.globalMap.addLayer({
                    id: 'editorLayer',
                    type: 'symbol',
                    source: 'myData',

                    layout: {
                        'icon-image': 'my-image', // 图标名称
                        'icon-size': 0.6, // 图标大小
                        'text-field': '{cameraname}',
                        'text-size': 14,
                        'text-offset':[0,2],
                    },
                    paint: {
                        'text-halo-color': '#fff',
                        'text-halo-width': 2,

                    }
                });

                this.globalMap.on("click","editorLayer",function(e){
                    console.log("eee",e.features[0]);
                    _this.getDetail(e.features[0].properties);
                })
            }
        
            
        },
        getDetail(item){
            this.currentMonitor = item;
            if(item.longitude && item.latitude){
                this.globalMap.flyTo({
                    center:[parseFloat(item.longitude),parseFloat(item.latitude)],
                    zoom:18
                })
            }
            this.monitorKey = Math.random()*1000;
            if(!this.monitorShow){
                this.monitorShow = true;
            }

        },
        flyToPosition(item){
            if(item.longitude && item.latitude){
                this.globalMap.flyTo({
                    center:[parseFloat(item.longitude),parseFloat(item.latitude)],
                    zoom:18
                })
            }
        },
        handleSizeChange(e){
            this.listQuery.pageSize = e;
            this.getList();
        },
        handleCurrentChange(e){ 
            this.listQuery.pageIndex = e;
            this.getList();

        },
        loadDianZiLayer(){
                this.globalMap.addLayer({
                'id': 'tiandituzhuji',
                'type': 'raster',
                'source':{
                    "type": "raster",
                    "tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
                    "tileSize": 256,
                },
                'layout':{
                    'visibility':'visible'
                },
            })
        },
        loadGaoQingLayer(){
        this.globalMap.addLayer({
            'id': 'gaoqingyingxiang',
            'type': 'raster',
            'source': {
            'type': 'raster',
            'tiles': ["http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
            'tileSize': 256
            },
            'layout':{
            'visibility':'visible'
            },
            'paint': {

            }
            });
        },
        loadXianJieLayer(){
            let sourceData = "http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson"
            if(localStorage.getItem("areaENName") == 'pingyi'){
                sourceData = PingYiXianJieGeoJson
            }
        this.globalMap.addLayer({
            id: 'xianjie',
            type: 'line',
            layout:{
                "visibility":"visible"
            },
            source: {
                type: 'geojson',
                data: sourceData
            },
            paint: {
                'line-width': 2,
                'line-color': 'orange'
            }
        });
        },
        
    }
  }
</script>

<style scoped>
::v-deep .el-table{
  background:none;
}
.monitor-list-container{
    width: calc( 100% - 0px);
    padding:30px;
}

.map-container{
    width:100%;
    height: calc( 100% - 80px);
}
.video-play-container{
    width:100%;
    height:300px;
    background:rgba(255,255,255,0.4);
    position:relative;
}

.monitor-desc-item{
    margin-top:16px;
}

.monitor-box{
    height: calc( 100% - 190px);
    overflow: auto;
}
.monitor-item{
    width:100%;
    height:135px;
    background:#062553;
    padding:15px;
    margin-bottom:15px;
    cursor:pointer;
}
.monitor-item .monitor-image{
    width:160px;
    height:105px;
    background:rgba(0,0,0,0.2);
    float:left;
    background-image:url(/images/monitor-icon-2.png);
    background-size:60% auto;
    background-repeat: no-repeat;
    background-position:50% 0;
    position:relative;
    transition-delay: all 0.35s;
}
.monitor-item .monitor-image:hover .play-button{
    display:block;
}
.monitor-item .monitor-image .play-button{
    width:160px;
    height:105px;
    position:absolute;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.6);
    background-image:url(/images/play-button.png);
    background-repeat:no-repeat;
    background-position:50% 26%;
    display:none;
    transition-delay: all 0.35s;
}
.monitor-item .monitor-info{
    float:left;
    width: calc( 100% - 175px);
    margin-left:15px;
}
.monitor-item .monitor-info .monitor-name{
    font-size:15px;
    font-weight: bold;
    margin-bottom:10px;
}
.monitor-item .monitor-info .monitor-desc{
    margin-top:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    color:#ccc;
    font-size:13px;
    width:100%;
}
.monitor-item .monitor-info .monitor-position{
    font-size:16px;
    font-weight: bold;
    color:yellow;
    margin-top:12px;
    width:100%;
    text-align:right;
}
.pageer-container{
    width:100%;
    height:50px;
    padding-top:15px;
    text-align:center;
}
::v-deep .el-pager li{
    background:none;
    color:#fff;
}

::v-deep .el-pagination button:disabled{
    background:none;
    color:#fff;
}

::v-deep .el-pagination .btn-next{
    background:none;
    color:#fff;
}
::v-deep .el-pagination .btn-prev{
    background:none;
    color:#fff;
}
::v-deep .el-pager li.active{
    color:#00b2ff;
}
::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
  height:0px;
}
::v-deep .el-table::before{
  height:0px;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
/* “表格内背景颜色“ */
 ::v-deep.el-table th,
 ::v-deep.el-table tr,
 ::v-deep.el-table td {
  background-color: transparent !important;
}

/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
 ::v-deep.el-table tbody tr:hover > td {
  background-color: black !important;
}

::v-deep .el-table__cell{
  background:none;
  padding:0px;
  font-size:14px;
  color:#ccc;
}

::v-deep .cell{
  padding:0px;
  height:40px;
  line-height:40px;
  background:#162258;
  text-align:center;
  font-size:12px;
}

::v-deep  .el-table--scrollable-y .el-table__body-wrapper{
  overflow-x:auto;
  overflow-y:auto;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper{
  
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
  display: block !important;
  z-index:99999999999999;
}
/* 滑道样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
  width:0px;
  height:10px;
  background:#304156;
  border-radius: 6px;
  z-index:99999999999999;
}
/* 定义滑块的样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
  border-radius: 0px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.3);
  z-index:99999999999999;
}
/* 定义滑块鼠标移入时的样式 */
::v-deep .el-table--scrollable-x .el-table__body-wrapper .el-table__body-wrapper .is-scrolling-left::-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.4);
  z-index:99999999999999;
}


 ::v-deep .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
  border-radius:0px;
}

::v-deep .el-button{
  border-radius:0px;
}

::v-deep .el-table__row .el-table__row--striped{
    background:rgba(0,0,0,0.8)!important;
}
</style>