<template>
    <div style="height:100%;">
        <div id="container"></div>

    </div>
</template>
<script>
    import AMap from 'AMap'

    export default {
        components: {

        },
        props: {
            center: {
                type: Array,
                default: () => {
                    return [120.125137, 30.23895]
                }
            },
            zoom: {
                type: Number,
                default: 14
            },

        },
        data() {
            return {}
        },
        methods: {
            init() {
                this.$emit('initMap')
                return
                // let that = this
                // let map = new AMap.Map('container', {
                //     center: that.center,
                //     resizeEnable: false,
                //     zoom: this.zoom,

                //     // mapStyle: 'amap://styles/254703fa2269c226d9f37801064cce8c'
                // })
                // // map.setMapStyle('amap://styles/2f2e7cfaba6d7423d1d0820fdc13308a');
                // map.setMapStyle('amap://styles/6ad3e69211689b17c091c88ab9214a67')

                // this.drawLine(map)
                // this.drawContentPoint(map)
                // this.drawCircleMark(map, 120.145409, 30.238695)
                // this.drawCircleMark(map, 120.096985, 30.226195)
                // this.drawInfoWindow(map, 120.145409, 30.238695, true)
                // this.drawInfoWindow(map, 120.096985, 30.226195)

            },
            // 绘制折线
            drawLine(map) {
                // 绘制折线
                // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
                var path = [
                    new AMap.LngLat(120.145409, 30.238695),
                    new AMap.LngLat(120.134922, 30.247403),
                    new AMap.LngLat(120.148311, 30.253334),
                    new AMap.LngLat(120.158611, 30.244437),
                    new AMap.LngLat(120.1502, 30.228865),
                    new AMap.LngLat(120.131145, 30.219224),
                    new AMap.LngLat(120.101105, 30.237467),
                    new AMap.LngLat(120.096985, 30.226195)
                ];

                // 创建折线实例
                var polyline = new AMap.Polyline({
                    path: path,
                    borderWeight: 3, // 线条宽度，默认为 1
                    strokeColor: '#1764EF', // 线条颜色
                    lineJoin: 'round' // 折线拐点连接处样式
                });

                // 将折线添加至地图实例
                map.add(polyline);
            },
            // 自定义内容点
            drawContentPoint(map) {
                var content =
                    '<div class="custom-content-marker" style="width: 32px;height: 32px;background: #1764EF; border-radius: 50%;display:flex;align-items:center;justify-content: center">' +
                    "<img style='width:24px;height:24px;border-radius: 50%;' src='http://jhyl.hzjhlxw.com/File/icon/wupeng.png' /></div>";

                var marker = new AMap.Marker({
                    content: content, // 自定义点标记覆盖物内容
                    position: [120.141273, 30.243251], // 基点位置
                    offset: new AMap.Pixel(0, 0) // 相对于基点的偏移位置
                });

                map.add(marker);
            },
            // 画圆形标记点
            drawCircleMark(map, lng, lat) {

                var circle = new AMap.Circle({
                    center: new AMap.LngLat(lng, lat), // 圆心位置
                    radius: 40, // 圆半径
                    fillColor: '#1764EF', // 圆形填充颜色
                    strokeColor: '#1764EF', // 描边颜色
                    strokeWeight: 2, // 描边宽度
                });

                map.add(circle);
            },
            // 画信息窗体
            drawInfoWindow(map, lng, lat, shipData) {
                var content = ``
                if (shipData) {
                    // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
                    content = `<div  class='gd-info-body'>
                                    <img src="http://jhyl.hzjhlxw.com/File/icon/ship-bg-line.png" alt=""  class='gd-line-bg' >
                                    <div class='gd-map-bg'>
                                        <span> 西胡文体中心</span>
                                        <!--以下内容 没有 可去除-->
                                        <div style=' display: flex;align-items: center;justify-content: space-between;'>
                                            <div style='display: flex;align-items: center;justify-content: flex-start;'>
                                                <img style=' width: 26px;height: 16px;margin-right: 8px;' src="http://jhyl.hzjhlxw.com/File/icon/cruise-ship.png" alt="">
                                                <span>12</span>
                                            </div>
                                            <div class="data-item">
                                                <img style=' width: 20px;height: 11px;margin-right: 8px;' src="http://jhyl.hzjhlxw.com/File/icon/original.png" alt="">
                                                <span>12</span>
                                            </div>
                                            <div class="data-item">
                                                <img style=' width: 20px;height: 11px;margin-right: 8px;' src="http://jhyl.hzjhlxw.com/File/icon/wupeng.png" alt="">
                                                <span>12</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>`
                } else {
                    // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
                    content = `<div  class='gd-info-body'>
                                    <img src="http://jhyl.hzjhlxw.com/File/icon/ship-bg-line.png" alt=""  class='gd-line-bg' >
                                    <div class='gd-map-bg'>
                                        <span>西胡文体中心</span>     
                                    </div>
                                </div>`
                }



                // 实现自定义窗体内容，返回拼接后的字符串
                function createInfoWindow(content) {
                    // 内容拼接 ...
                    return content;
                }
                var position = new AMap.LngLat(lng, lat);
                var marker = new AMap.Marker({
                    position: position,
                    // icon: 'none'
                });

                marker.setMap(map);
                marker.setLabel({
                    offset: new AMap.Pixel(-220, -8),
                    content: createInfoWindow(content), //设置文本标注内容
                    direction: '' //设置文本标注方位
                });
                // // 创建 infoWindow 实例 
                // var infoWindow = new AMap.InfoWindow({
                //     isCustom: true, //使用自定义窗体
                //     content: createInfoWindow(content), //传入 dom 对象，或者 html 字符串
                //     offset: new AMap.Pixel(-120, -8),
                //     // anchor: 'top-right',
                // });
                // var position = new AMap.LngLat(lng, lat);
                // infoWindow.open(map, position);

            }

        },
        mounted() {
            this.init()
        },

    }
</script>
<style lang="scss" scoped>
    #container {
        height: 100%;



    }
</style>