<template>
    <div class="find-way-container">
        <div class="title">
            路线规划
        </div>
        <div class="start-point-list">
            <div class="start-point-item" v-for="(item,index) in startPointList" :key="index">
                <div class="item-label">起点：</div>
                <div class="item-input">
                    <el-input size="mini" type="text" v-model="item.lng" placeholder="经度"></el-input>
                </div>
                <div class="item-input">
                    <el-input size="mini" type="text" v-model="item.lat" placeholder="纬度"></el-input>
                </div>
                <div class="item-opreate">
                    <!-- <div class="operate-item" @click="deletePoint(index)">
                        <i class="el-icon el-icon-delete"></i>
                    </div> -->
                    <div class="operate-item" @click="clickPoint('start',index)">
                        <i class="el-icon el-icon-location-outline"></i>
                    </div>
                    <div class="operate-item" @click="getRoutePath(index)">
                        <i class="el-icon el-icon-s-promotion"></i>
                    </div>
                    <div class="operate-item" @click="handleRoam(index)">
                        <i class="el-icon el-icon-truck" ></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="start-point-item" style="border-top:1px solid #178a8c87;padding-top:5px;margin-bottom:20px;margin-top:5px;">
            <div class="item-label">终点：</div>
            <div class="item-input">
                <el-input size="mini" type="text" v-model="endPoint.lng" placeholder="经度"></el-input>
            </div>
            <div class="item-input">
                <el-input size="mini" type="text" v-model="endPoint.lat" placeholder="纬度"></el-input>
            </div>
            <div class="item-opreate">
                <div class="operate-item" @click="clickPoint('end')">
                    <i class="el-icon el-icon-location-outline"></i>
                </div>
            </div>
        </div>
        <div class="find-way-operate">
            <el-button type="warning" size="mini" icon="el-icon-delete" @click="cleaerAll">清除全部</el-button>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addPoint">添加起点</el-button>
            <el-button type="primary" size="mini" icon="el-icon-position" @click="designAllRouter">规划路线</el-button>
            <el-button type="primary" size="mini" icon="el-icon-truck" @click="stopRoam">停止漫游</el-button>
        </div> 
    </div>    
</template>

<script>    
import { getRouterFunc, drawRouterFunc, clearRouterFunc,handlerStartRoaming,handlerStopRoaming } from '../lib/routePath'
export default {
    props:["close"],
    data(){
        return {
            startPointList:[ // 起点
                {
                    name:null,
                    lng:null,
                    lat:null
                }
            ],  
            endPoint:{      // 终点
                name:'end',
                lng:null,
                lat:null
            },
            pathPointGraphicLayer:null,  // 起点终点图层
            carGraphicLayer:null,
            fixedRoute:null,  // 漫游图层
            tripFlyArray:[],
            startGraphicEntity:[],
            endGraphicEntity:null,
        }
    },
    watch:{
        close:function(e){
            if(e==false){
                this.cleaerAll();
            }
        }
    },
    methods:{
        // 删除单个起点
        deletePoint(index){
            this.startPointList.splice(index,1);
            this.pathPointGraphicLayer.removeGraphic(this.startGraphicEntity[index]);
            this.startGraphicEntity.splice(index,1);
        },
        // 清空所有数据
        cleaerAll(){
            this.startPointList = [
                {
                    name:null,
                    lng:null,
                    lat:null
                }
            ];

            this.endPoint = {
                name:null,
                lng:null,
                lat:null
            }

            // 删除图标
            this.pathPointGraphicLayer.clear();

            // 删除路线
            clearRouterFunc();

            // 删除漫游
            handlerStopRoaming();
        },
        // 添加一条点数据
        addPoint(){
            let point = {
                name:null,
                lng:null,
                lat:null
            }
            this.startPointList.push(point);
        },
        // 绘制点数据
        clickPoint(type,index=null){
            if(type=='start' && this.startPointList[index].lng && this.startPointList[index].lat){
                return;
            }
            if(this.pathPointGraphicLayer == null){
                this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
                window.globalmap.addLayer(this.pathPointGraphicLayer);
            }
            let _this = this;
            window.globalmap.setCursor(true);
            window.globalmap.once(mars3d.EventType.click, function (event) {
                window.globalmap.setCursor(false)
                const cartesian = event.cartesian
                const point = mars3d.LngLatPoint.fromCartesian(cartesian)
                point.format() 
                if(type == 'start'){
                    _this.startPointList[index].lng = point.lng;
                    _this.startPointList[index].lat = point.lat;
                }else if(type == 'end'){
                    _this.endPoint.lng = point.lng;
                    _this.endPoint.lat = point.lat;
                }
                _this.drawPoint(type, point.lng, point.lat, point.z);
            })
        },
        drawPoint(type, lng, lat, z) { // 绘制起点、终点
            let image = null;
            if(type == 'start'){
                image = "/img/route-start.png"
                var graphic = new mars3d.graphic.BillboardEntity({
                    position: [lng, lat, z],
                    style: {
                        image: image,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        clampToGround: true
                    },
                    attr: { remark: type == 'start'?'起点':'终点' }
                })
                this.startGraphicEntity.push(graphic);
                this.pathPointGraphicLayer.addGraphic(graphic);

            }else if(type == 'end'){
                image = "/img/route-end.png"
                if(this.endGraphicEntity){
                    this.pathPointGraphicLayer.removeGraphic(this.endGraphicEntity);
                    this.endGraphicEntity = null;
                }
                this.endGraphicEntity = new mars3d.graphic.BillboardEntity({
                    position: [lng, lat, z],
                    style: {
                        image: image,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        clampToGround: true
                    },
                    attr: { remark: type == 'start'?'起点':'终点' }
                })
                this.pathPointGraphicLayer.addGraphic(this.endGraphicEntity);
            }
        },
        // 规划路线
        getRoutePath(index) {
            // 获取路线数据
            let startCoor = [this.startPointList[index].lng,this.startPointList[index].lat] // 起点
            let endCoor = [this.endPoint.lng,this.endPoint.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,'all').then(res => {
                if(res){
                    this.tripFlyArray[index] = res.allCoordinates;
                    drawRouterFunc(res)
                }else{
                    this.$message({
                        type:"error",
                        message:"PostGIS未找到合适了路线"
                    })
                }
            }).catch(err => {
                clearRouterFunc()
            })
        },
        // 一键全部导航
        designAllRouter(){
            clearRouterFunc();
            this.startPointList.forEach((item,index)=>{
                this.getRoutePath(index);
            })
        },
        // 漫游
        handleRoam(index){
            handlerStartRoaming(this.tripFlyArray[index],false);
        },
        // 停止漫游
        stopRoam(){
            handlerStopRoaming();
        }
    }
}
</script>
<style scoped>
.find-way-container{
    width:100%;
    height:100%;
    background-image: url(/img/biaohui.png);
    background-size:100% 100%;
    padding:5px 15px;
}
.title{
    font-size:18px;
    color:#fff;
    text-indent:20px;
}
.add-start-point-item-button{
    padding:2px 8px;
    background:rgb(22, 93, 90);
    float:right;
    text-align: 0px;
    font-size:14px;
    text-indent:0px;
    border-radius: 4px;
    cursor:pointer;
    margin-top:3px;
}
.start-point-list{
    margin-top:30px;
    max-height:180px;
    overflow-y:auto;
}
.start-point-item{
    width:100%;
    display:flex;
    gap:8px;
    line-height:38px;

}
.item-label{
    width:auto;
    color:#fff;
}
.item-input{
    flex:auto;
    max-width:120px;
}
.item-opreate{
    flex:1;
    display: flex;
    flex-direction: row;
}
.operate-item{
    flex:1;
    color:#fff;
    text-align: center;
}

.operate-item:hover{
    color:#408eff;
    cursor:pointer;
}

::v-deep .el-input__inner{
    background:none;
    border: 1px solid #16e6ea;
    color:#fff;
}



::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb {
    padding-top: 100px;
    -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: #797979;
    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 1px rgba(0, 0, 0, 0.25);
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  ::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>