<template>
    <div class='find-source-container'>
        <div class="title">
            防火资源
            <div class="setButton" @click="selectAll" v-if="false">
                <div class="checkbox" >
                    <i class="el-icon el-icon-check"  v-show="checkAll"></i>
                </div>
                 &nbsp;&nbsp;&nbsp;设置
            </div>
        </div>

        <div class="distance-container">
            <div class="distance-item" v-for="(item,index) in distanceOptins" :key="index" @click="distanceChange(item,index)">
                <div class="checkbox" :style="{'background': item.checked ? '#108eff':'none'}"></div>
                {{ item.label }}
            </div>
        </div>

        <div class="operate-container">
            <div class="filter-button"  v-for="(item,index) in filterOptions" :key="index" :style="{'background':item.checked?'linear-gradient(180deg, #3C9C92 0%, #1C6359 100%)':'#0E2320','color':item.checked?'#ffffff':''}"
                @click="filterChange(index)"
            >{{ item.label }}</div>
        </div>

        <!--  -->
    
        <div class="content-container">
            <div class="content-item" v-for="(item,index) in list" :key="index">
                <p class="content-item-name">{{ item.name }}</p>
                <p class="info">
                    <span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">距离：<span style="color:#E8A700;">{{ item.distance }}Km</span></span>
                    <span style="padding:4px 6px;background:#14332F;color:#fff;margin-right:12px;">时间：<span style="color:#E8A700;">{{item.time}}</span></span>
                </p>
                <div class="icon-container">
                    <img src="/img/phone.png" v-show="currentTab['label'] == '护林员'"  @click="toPosition([item.lng,item.lat],item.name)" alt="">
                    <img src="/img/homeimg/video-call-icon.png" v-show="currentTab['label'] == '视频监控'" @click="lookMonitor(item.cameraindexcode)" alt="">
                    <img src="/img/homeimg/to-position-icon.png" @click="toPosition([item.lng,item.lat],item.name)" alt="">
                    <img src="/img/homeimg/route-icon.png" @click="toRouter([item.lng,item.lat])" alt="">
                    
                </div>
            </div>
        </div>
    </div>
    </template>
    <script>
import { getMethodCommon } from '../../../api/common';
import { parse } from '../lib/handleGeojson';
import * as turf from '@turf/turf'
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
    
    export default {
       components: {},
       props:["options","currentInfo","waterCenter"],
       data() {
        return {
            filterOptions:[],
            distanceOptins:[
                {
                    label:"全部",
                    value:0,
                    checked:false,
                },{
                    label:"1Km",
                    value:1000,
                    checked:true,
                },{
                    label:"5Km",
                    value:5000,
                    checked:false,
                },{
                    label:"10Km",
                    value:10000,
                    checked:false,
                }
            ],
            checkAll:false,
            checkedList:[],
            //   
            checkOptions:[
                {
                    label:"检查站",
                    checked:true
                },{
                    label:"防火驿站",
                    checked:false
                },{
                    label:"护林点",
                    checked:false
                },{
                    label:"检查点",
                    checked:false
                },{
                    label:"检查站",
                    checked:false
                },{
                    label:"瞭望台",
                    checked:false
                },{
                    label:"向导",
                    checked:false
                },{
                    label:"物资储备",
                    checked:false
                },{
                    label:"水库",
                    checked:false
                },{
                    label:"塘坝",
                    checked:false
                },{
                    label:"蓄水池",
                    checked:false
                }
            ],
            listQuery:{
                distance:1000,
                tablename:null,
                pageIndex:1,
                pageSize:9999,
            },
            list:[],
            markGraphicLayer:null,
            currentTab:null,
            waterGraphicLayer: null,
            startLngLat:null,

        };
       },
       computed: {},
       watch: {},
        methods: {
            lookMonitor(deviceId){
                this.$emit("lookMonitor",deviceId)
            },
            toPosition(lngLat,name){
                window.globalmap.flyToPoint(lngLat,{radius:2000,"pitch":-90});
                // 第一次添加时叠加图层
                // if (this.markGraphicLayer == null) {
                //     this.markGraphicLayer = new mars3d.layer.GraphicLayer();
                //     window.globalmap.addLayer(this.markGraphicLayer);
                // }else{
                //     this.markGraphicLayer.clear();
                // }

                // let graphic = new mars3d.graphic.BillboardEntity({
                //         position: lngLat,
                //         style: {
                //             image: "/img/xiangdao.png",
                //             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                //             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                //             clampToGround: true,
                //             scale: 0.4,
                //             label: {
                //                 text: name,
                //                 font_size: 12,
                //                 color: "#ffffff",
                //                 pixelOffsetY: -48,
                //             },
                //         },
                //         pointerEvents: true,
                //     });
                    
                //     this.markGraphicLayer.addGraphic(graphic);
            },
            toRouter(lngLat){
                this.startLngLat = lngLat;
                this.getRoutePath(); 
            },
            distanceChange(item,index){
                this.distanceOptins.forEach((it,idx)=>{
                    this.distanceOptins[idx].checked = false;
                })
                this.distanceOptins[index].checked = true;
                this.listQuery.distance = this.distanceOptins[index].value;
                this.getList();
            },
            filterChange(index){
                this.filterOptions.forEach((it,idx)=>{
                    this.filterOptions[idx].checked = false;
                })
                this.filterOptions[index].checked = true;
                this.listQuery.tablename = this.filterOptions[index].tableRef;
                this.getList();
                this.currentTab = this.filterOptions[index]
                console.log("currentTab",this.currentTab);
            },
            selectAll(){
                this.checkAll = !this.checkAll
                if(this.checkAll){
                    this.checkOptions.forEach((item,index)=>{
                        this.checkOptions[index].checked = true
                    })
                }else{
                    this.checkOptions.forEach((item,index)=>{
                        this.checkOptions[index].checked = false
                    })
                }
            },
            selectOne(index){
                this.checkOptions[index].checked = !this.checkOptions[index].checked
            },
            getAroundTime(a) {
                var m = parseInt(a/60);
                return m+"分钟"
            },
            getList(){
                getMethodCommon("/DataMaintenance/LoadDataInfo",this.listQuery).then(res=>{
                    if(res.code == 200){
                        this.list = res.data;
                        this.list.forEach((item,index)=>{
                            let coordinates = parse(item.geom).coordinates;
                            item.lng = coordinates[0]
                            item.lat = coordinates[1]
                            if(item.lng && item.lat){
                                let from = turf.point([item.lng,item.lat]);
                                let to = turf.point([this.currentInfo.lng,this.currentInfo.lat]);
                                let options = {units: 'kilometers'};
                                let distance = turf.distance(from, to, options);
                                item.distance = distance.toFixed(2)
                                item.time = this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60)
                                
                            }else{
                                item.distance = 0
                            }
                        })
                        this.drawPoint(this.list);
                    }
                })
            },  
            drawPoint(list){
                if (this.waterGraphicLayer == null) {
                    this.waterGraphicLayer = new mars3d.layer.GraphicLayer();
                    window.globalmap.addLayer(this.waterGraphicLayer);
                }

                this.waterGraphicLayer.clear();

                list.forEach((item,index)=>{
                    console.log("item:::",item);
                    let graphic = new mars3d.graphic.BillboardEntity({
                        position: [item.lng, item.lat],
                        style: {
                            image: "img/xiangdao.png",
                            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                            0,
                            200000
                            ), // 按视距距离显示
                            scaleByDistance: new Cesium.NearFarScalar(1000, 0.4, 200000, 0.2),
                            clampToGround: true,
                            label: {
                                text:item.name,
                                font_size: 12,
                                color: "#ffffff",
                                pixelOffsetY: -50,
                                pixelOffsetX:20,
                                distanceDisplayCondition: true,
                                distanceDisplayCondition_far: 6000,
                                distanceDisplayCondition_near: 0,
                            },
                        },
                        popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                                                <div class="marsTiltPanel-wrap">
                                                    <div class="area">
                                                        <div class="arrow-lt"></div>
                                                        <div class="b-t"></div>
                                                        <div class="b-r"></div>
                                                        <div class="b-b"></div>
                                                        <div class="b-l"></div>
                                                        <div class="arrow-rb"></div>
                                                        <div class="label-wrap">
                                                            <div class="title">${item.name}</div>
                                                            <div class="label-content">
                                                                <div class="data-li">
                                                                    <div class="data-label" >距离：</div>
                                                                    <div class="data-value">${item.distance}km</div>
                                                                </div>
                                                                <div class="data-li">
                                                                    <div class="data-label" >预计用时：</div>
                                                                    <div class="data-value">${item.time}</div>
                                                                </div>
                                                                <div class="data-li">
                                                                    <div class="data-label"></div>
                                                                    <div class="data-value"  title="导航" >
                                                                    <span id="lablSBZT1" onclick="toRouter([${item.lng}, ${item.lat}]);" class="label-tag data-value-status-1" >导航</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="b-t-l"></div>
                                                    <div class="b-b-r"></div>
                                                </div>
                                                <div class="arrow" ></div>
                                            </div>`,
                        popupOptions: {
                            offsetY: -20,
                            offsetX:15,
                            template: "{content}",
                            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
                            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
                        },
                        pointerEvents: true,
                    });
                    this.waterGraphicLayer.addGraphic(graphic);
                })
            },
            submit(){
                
            },
            getRoutePath() {
                // 获取路线数据
                let startCoor = this.startLngLat;
                let endCoor = [this.currentInfo.lng,this.currentInfo.lat];
                let params = {
                    startlng: parseFloat(startCoor[0]),
                    startlat: parseFloat(startCoor[1]),
                    endlng: parseFloat(endCoor[0]),
                    endlat: parseFloat(endCoor[1]),
                    areaname: localStorage.getItem("areaName"),
                };
                getRouterFunc(params,).then(res => {
                    drawRouterFunc(res)
                }).catch(err => {
                    clearRouterFunc()
                })
            },
        },
        created() {
            this.filterOptions = [...this.options]
            console.log("currentInfo",this.currentInfo);
            this.listQuery.lat = this.currentInfo.lat;
            this.listQuery.lng = this.currentInfo.lng;
            this.filterChange(0)

            window.toRouter = this.toRouter
        },
        mounted() {
            
        },
        destroyed() {
            clearRouterFunc();
            this.waterGraphicLayer.clear();
            window.globalmap.removeLayer(this.waterGraphicLayer);
        },
    }
    </script>
    
    <style scoped>
    .find-source-container{
        width:100%;
        height:100%;
        background-size:100% 80%;
        background:url(/img/find-source-item.png);
        background-repeat: no-repeat;
    }
    
    .title{
        height:60px;
        line-height:60px;
        font-size:20px;
        text-indent: 12px;
        color:#fff;
    }
    
    .title .all-checkbox{
        height:40px;
        padding:10px;
        line-height:36px;
        float:right;
        font-size:14px;
        margin-right:12px;
        text-indent:0px;
        cursor:pointer;
    }

    .distance-container{
        width:100%;
        height:40px;
        padding:20px 20px;
    }

    .distance-container .distance-item{
        float:left;
        margin:0px;
        margin-right:12px;
    }

    .distance-item .checkbox{
        width:12px;
        height:12px;
        border-radius: 50%;
        margin-top:5px;
        margin-right:5px;
        cursor:pointer;
    }
    .content-container{
        width:100%;
        height: calc( 100% - 100px);
        padding-right:15px;
    }
    
    .content-container .item{
        width:120px;
        height:42px;
        line-height:34px;
        padding:0px 8px;
        float:left;
        background:#0E2320;
        border:1px solid #1C4D49;
        border-radius:3px;
        margin:6px;
        cursor: pointer;
    }
     .checkbox{
        width:16px;
        height:16px;
        border:1px solid #07A0AD;
        background:#0F3D41;
        float:left;
        padding:0px;
        line-height:16px;
        text-align: center;
        color:#E8A700;
        font-weight: bold;
    }
    
    .content-container .item .label{
        font-size:14px;
        color:#E8A700;
    }
    .operate-container{
        width: calc( 100% - 15px);
        height:54px;
        text-align:left;
        line-height:30px;
        /* overflow-y:hidden; */
        padding:10px 0px;
        margin:0px 15px;
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
    }

    ::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.2);
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
  background-color: rgba(0, 0, 0, 0.3);
}
    .filter-button{
        width:70px;
        height:30px;
        border:1px solid #07A0AD;
        border-radius: 20px;
        background:#0E2320;
        border:10px;
        margin-right:12px;
        margin-bottom:12px;
        cursor:pointer;
        display: inline-block;
        text-align: center;
    }


    .content-container{
        width: calc( 100% - 24px);
        max-height:360px;
        padding:0px;
        overflow-y:auto;
        margin:15px;
        padding-right:6px;
        margin-right:6px;
    }
    .content-container .content-item{
        width:100%;
        height:90px;
        background: linear-gradient(179deg, #0E2320 0%, #122E2A 100%);
        box-shadow: inset 0px 4px 5px 0px rgba(0,0,0,0);
        border-radius: 1px;
        border: 1px dashed #666;
        margin-bottom:12px;
        padding:0px 12px;
        position:relative;
    }
    .content-container .content-item p{
        width: calc( 100% - 118px);
    }
    .content-container .content-item .content-item-name{
        font-size:15px;
        color:#fff;
        padding:8px 0px;
        border-bottom: 1px solid #224C47;
        width: calc( 100% - 118px);
    }

    .icon-container{
        float:right;
        width:128px;
        height:80px;
        line-height:80px;
        position:absolute;
        right:0px;
        top:4px;
        text-align:center;
    }

    .icon-container img{
        width:28px;
        height:28px;
        margin-top:6px;
        margin-left:8px;
        cursor:pointer;
    }
/* 

*/
    </style>