<template>
    <div class='select-address-container'>
        <div class="operate-container">
            <el-link type="default" @click="$emit('cancle')">取消</el-link>
            <el-link type="primary" style="float:right;" @click="$emit('confirm',currentPosition)">确定</el-link>
        </div>
        <div class="map-container" id="map-container">

        </div>
        <div class="search-container">
            <el-input placeholder="请输入搜索关键字……" @change="getAddressList" v-model="searchkey" style="width: calc( 100% - 66px);margin-right:10px;" size="middle"></el-input>
            <el-button icon="el-icon-search" size="middle"></el-button>
        </div>   
        <div class="address-list-container" >
            <div class="list-item" v-for="(item,index) in addressList" :key="index" @click="selectAddress(item,index)">
                <p class="item-name">{{item.name}}</p>
                <p class="item-address">{{item.address}}</p>
                <span style="float:right;position:relative;top:-40px;font-size:20px;right:20px;color:#108eff;" :key="checkRandom" v-show="item.check"> <i class="el-icon el-icon-check"></i> </span>
            </div>
        </div>     
    </div>
</template>

<script>
import axios from 'axios';
import appConfig from '../../../../../public/config/app.json'
export default {
   components: {},
   props:["currentLngLat"],
   data() {
        return {
            mapboxMap:null,
            marker:null,
            searchkey:null,
            
            checkRandom:1,
            currentPosition:{
                    name:"当前点击处位置",
                    address:"使用当前点击处所选位置 ( 坐标：117.980976,35.27914 )",
                    check:true,
                    location:"117.980976,35.27914",
                },
                addressList:[
                {
                    name:"当前点击处位置",
                    address:"使用当前点击处所选位置 ( 坐标：117.980976,35.27914 )",
                    check:true,
                    location: "117.980976,35.27914",
                }
            ],
        };
   },
   computed: {

   },
   watch: {

   },
   methods: {
        // 创建地图
        initMap(){
            let _this = this;
            this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
            this.mapboxMap = new this.$mapboxgl.Map({
                container: 'map-container',
                zoom: 15.1,
                pitch:15,
                style: {
                    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
                    "version": 8,
                    "sources": {
                        "raster-tiles": {
                        "type": "raster",
                        "tiles": ['http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
                        "tileSize": 256,
                        },
                        "raster-tiles-l": {
                        "type": "raster",
                        "tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
                        "tileSize": 256,
                        }
                    },
                    "layers": [
                        {
                        "id": "tdt-img-tiles",
                        "type": "raster",
                        "source": "raster-tiles",
                        "minzoom": 0,
                        "maxzoom": 22
                        },
                        {
                            "id": "tdt-img-tiles-l",
                            "type": "raster",
                            "source": "raster-tiles-l",
                            "minzoom": 0,
                            "maxzoom": 22
                        }
                    ]
                },
                maxZoom: 22,
                minZoom: 5,
                center:_this.currentLngLat,
            })

            this.mapboxMap.on("load",()=>{
               _this.addMark(_this.currentLngLat[0],_this.currentLngLat[1]);
               _this.mapboxMap.on("click",(e)=>{
                    _this.addMark(e.lngLat.lng,e.lngLat.lat);
                    _this.addressList[0].location = e.lngLat.lng.toFixed(6)+","+e.lngLat.lat.toFixed(6);
                    _this.addressList[0].address = "使用用户点击位置 ( 坐标："+e.lngLat.lng.toFixed(6)+","+e.lngLat.lat.toFixed(6)+" )"
                    _this.selectAddress( _this.addressList[0],0);
               })
            })
        },
        addMark(lng,lat){
            if(this.marker){
                this.marker.setLngLat([lng, lat]);
            }else{
                this.marker = new this.$mapboxgl.Marker().setLngLat([lng, lat]).addTo(this.mapboxMap); 
            }
        },
        getAddressList(){
            axios({
                method:"get",
                url:"https://restapi.amap.com/v3/place/text?keywords="+this.searchkey+"&city=beijing&offset=20&page=1&key=583375a3c88c211967c1e924a91a97ef&extensions=all",
            }).then(res=>{
                let current = this.addressList[0];
                this.addressList = res.data.pois;
                this.addressList.forEach((item,index)=>{
                    this.addressList[index].check = false;
                })
                this.addressList.unshift(current)
                
            })
        },
        selectAddress(item,index){

            let coor = item.location.split(",");
            // 跳转到选中点
            this.mapboxMap.flyTo({center: coor});

            // this.addressList.forEach((it,idx)=>{
            //     this.addressList[idx].check = false;
            // })

            // // 
            // this.addressList[index].check = true;

            // this.checkRandom = Math.random();
            
            this.addMark(coor[0],coor[1]);

            this.currentPosition = item;

            console.log("item",item);
        }

   },
   created() {
    if(!this.currentLngLat){

        this.currentLngLat = [117.980976,35.27914]
    }else{
        this.currentPosition.location = this.currentLngLat[0]+","+this.currentLngLat[1];
        this.currentPosition.address = `使用当前点击处所选位置 ( 坐标：${this.currentPosition.location} )`

        this.addressList[0].location = this.currentLngLat[0]+","+this.currentLngLat[1];
        this.addressList[0].address = `使用当前点击处所选位置 ( 坐标：${this.addressList[0].location} )`
    }
   },
   mounted() {
        this.initMap();
   },
   destroyed() {
   
   },
}
</script>

<style scoped>
.select-address-container{
    width:100%;
    height:100%;
    background:#fff;
    padding:20px;
}

.select-address-container .search-container{
    width:100%;
    height:50px;
}

.select-address-container .map-container{
    width:100%;
    height:50%;
    margin:12px 0px;
}

.address-list-container{
    width:100%;
    height: calc( 50% - 100px);
    overflow: auto;
}

.address-list-container .list-item{
    border-bottom:1px solid #efefef;
    width:100%;
    line-height:28px;
    padding:8px 0px;
    cursor:pointer;
}

.address-list-container .list-item p{
    margin:0px;
}

.address-list-container .list-item .item-name{
    font-size:16px;
    color:#333;
}

.address-list-container .list-item .item-address{
    font-size:13px;
    color:#999;
}


::v-deep .el-input__inner{
    background:#fff !important;
    color:#333 !important;
}


::v-deep .mapboxgl-ctrl-bottom-left{
    display:none;
}
</style>