<template>
    <div class="mapboxs" :style="{height: mapHeight + 'px'}">
        <el-form label-width="90px" inline class="form">
            <el-form-item label="所在城市：" size="small">
                <el-input v-model="city" style="width:120px;"></el-input>
            </el-form-item>
            <el-form-item label="关键词:" size="small">
                <el-autocomplete class="input" prefix-icon="el-icon-search" popper-class="map-autocomplete" v-model="state1"
                    :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect">
                    <template slot-scope="{ item }">
                        <div class="name">名称：<span>{{ item.value }}</span></div>
                        <span class="addr">地址：{{ item.address }}</span>
                    </template>
                </el-autocomplete>
            </el-form-item>
        </el-form>
        <div class="map" id="map" ref="map"></div>
    </div>
</template>

<script>

export default {
    name: 'QQmap',
    model: {
        prop: 'GPS',
        event: 'change'
    },
    props: {
        GPS: Object,
        mapHeight: {
            type: Number | String,
            default: '800'
        }
    },
    data() {
        return {
            map: null,
            state1: '',
            city: '',
            pois: [],
            marker: null,
            infoWin: null,
            qqMapMarker: '',
            qqMapGeocoder: '',
            infoWin:'',
            pointInfo:{
                province: '',
                city: '',
                name: '',
                address: '',
                location: {},
                district: '',
            }
        }
    },
    mounted() {
        this.initMap()
    },
    created() {
    },
    methods: {
        initMap() {
            let that = this
            let name = ""
            let address = ""
            let city = ""
            let province = ""
            let district = ""
            let pointInfo = {}
            that.map = new qq.maps.Map(this.$refs.map, {
                zoom: 16,
                draggable: true,
                scrollwheel: true,
                disableDoubleClickZoom: true
            })
            that.infoWin = new qq.maps.InfoWindow({
                map: that.map
            })

            that.qqMapGeocoder = new qq.maps.Geocoder({
                complete: function (res) {
                    console.log(res, 'res12', res.detail.nearPois[0].name)
                    name = res.detail.nearPois[0].name
                    address = res.detail.nearPois[0].address
                    city = res.detail.addressComponents.city
                    province = res.detail.addressComponents.province
                    district = res.detail.addressComponents.district
                    console.log(address, 'address2222')
                }
            })

            that.qqMapMarker = new qq.maps.Marker({ map: that.map })
            let citylocation = new qq.maps.CityService()
            citylocation.setComplete(results => {
                console.log(results, 'results12')
                that.city = results.detail.name
                that.map.setCenter(results.detail.latLng)
            })
            citylocation.searchLocalCity()
            qq.maps.event.addListener(that.map, "click", function (event) {
                console.log(event, 'event12344')
                that.state1 = ""
                that.longitude = event.latLng.lng
                that.latitude = event.latLng.lat
                that.myLatlng = new qq.maps.LatLng(that.latitude, that.longitude)
                that.qqMapGeocoder.getAddress(that.myLatlng)
                console.log(address, 'address111111', that.pointInfo)
                that.map.setCenter(that.myLatlng)
                that.qqMapMarker.setPosition(that.myLatlng)

                
                setTimeout(() => {
                    that.infoWin.open()
                    that.infoWin.setContent(
                        '<div class="address-box">' +
                        '<h4>' + name + '</h4>' +
                        '<p>坐标：' + that.myLatlng + '</p>' +
                        '<p>地址：' + address + '</p>' +
                        '</div>'
                    )
                    that.infoWin.setPosition(that.myLatlng)
                    that.pointInfo.name = name
                    that.pointInfo.address = address
                    that.pointInfo.location = that.myLatlng
                    that.pointInfo.city = city
                    that.pointInfo.province = province
                    that.pointInfo.district = district

                    that.$emit('change',that.myLatlng, that.pointInfo)
                }, 200);
                
            })
        },
        async querySearch(queryString, cb) {
            if (!queryString) return cb([])

            this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion/', {
                key: 'NGXBZ-NFYK3-M7U3Z-3E2G3-5KVIJ-4RB2H',
                keyword: queryString,
                region: this.city,
                output: 'jsonp'
            }).then(res => {
                if (res.status == 0) {
                    let pois = res.data
                    cb(
                        pois.map(item => {
                            item.value = item.title
                            return item
                        })
                    )
                }
            }).catch(err => {
                console.log(err, 'err')
            })
        },
        handleSelect(val) {

            console.log(val, 'val')
            let that = this
            const { location, city, province, district } = val
            const { lat, lng } = location
            this.city = city

            this.myLatlng = new qq.maps.LatLng(lat, lng)
            this.map.setCenter(this.myLatlng)
            this.qqMapMarker.setPosition(this.myLatlng)

            setTimeout(() => {
                
                that.infoWin.open()
                that.infoWin.setContent(
                    '<div class="address-box">' +
                    '<h4>' + val.title + '</h4>' +
                    '<p>坐标：' + that.myLatlng + '</p>' +
                    '<p>地址：' + val.address + '</p>' +
                    '</div>'
                )
                that.infoWin.setPosition(that.myLatlng)
                that.pointInfo.name = val.title
                that.pointInfo.address = val.address 
                that.pointInfo.location = that.myLatlng
                that.pointInfo.city = city
                that.pointInfo.province = province
                that.pointInfo.district = district

                that.$emit('change',that.myLatlng, that.pointInfo)
                
            }, 200);
        },
    }
};
</script>
<style lang="less">
.map-autocomplete.el-autocomplete-suggestion li {
    line-height: normal;
    padding: 10px;
    border-bottom: 1px solid #eaeaea !important;
    color: #b4b4b4;
    .name {
        text-overflow: ellipsis;
        overflow: hidden;
        span {
            font-weight: bold;
            color: #333;
        }
    }
    .addr {
        color: #b4b4b4;
    }

    .highlighted .addr {
        color: #ddd;
    }
}
.address-box {
    font-size: 14px;

    h4 {
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 24px;
    }

    p {
        line-height: 21px;
        margin: 0;
    }
}
</style>

<style lang="less" scoped>
.mapboxs {
    width: 100%;
    .form {
        z-index: 1;
        position: relative;
        background-color: #fff;
        height: 40px;
        margin-bottom: 20px;
    }

    .input {
        z-index: 1;
        width: 500px;
    }

    .map {
        width: 100%;
        height: calc(100% - 60px);
    }

    

}
</style>