<template>
    <view style="width: 100%; height: 100%">
        <view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap"></view>
    </view>
</template>

<script>
import tools from '../../tools.js';
import iconPath from '../../static/point2.png';
import iconRangePath from '../../static/range.png';
export default {
    name: 'TianDiTu-Map',
    data() {
        return {
            Tmap: null,
            option: {
                type: '',
                apikey: '',
                cover: null,
                lng: '',
                lat: '',
                png: iconPath,
                rangePng: iconRangePath,
                showLabel: true,
                showCirle: false,
                range: 0,
            },
        };
    },
    props: {
        apiKey: {
            type: String,
            require: true,
            default: '',
        },
        customIcon: {
            type: String,
            default: '',
        },
        showLabel: {
            type: Boolean,
            default: true,
        },
        showCirle: {
            type: Boolean,
            default: true,
        },
    },
    methods: {
        compliteonLoadTianDiTu() {
            this.$emit('onLoadTianDiTu');
        },
        initCharts(lng, lat) {
            this.option = {
                ...this.option,
                apikey: this.apiKey,
                showLabel: this.showLabel,
                showCirle: this.showCirle,
                lng,
                lat,
                png: this.customIcon || this.option.png,
                type: 'open',
            };
        },
        upDataCharts(lng, lat) {
            this.option = {
                ...this.option,
                type: 'Icon',
                lng,
                lat,
                png: this.customIcon || this.option.png,
                type: 'update',
                showLabel: this.showLabel,
            };
        },
        addFeature(cover) {
            this.option = {
                ...this.option,
                type: 'Icon',
                cover,
                png: this.customIcon || this.option.png,
                type: 'addFeature',
                showLabel: this.showLabel,
            };
        },
        changeRange(range) {
            this.option = {
                ...this.option,
                type: 'Icon',
                png: this.customIcon || this.option.png,
                type: 'changeRange',
                showLabel: this.showLabel,
                showCirle: this.showCirle,
                range: range,
            };
        },
        selectItem(info) {
            this.$emit('onSelect', info);
        },
    },
};
</script>

<script module="Trenderjs" lang="renderjs">
var Tmap = null;
export default {
    data() {
        return {
            options: {},
            circle: [],
        }
    },
    mounted() {
    },
    methods: {
        initTMap(newValue, oldValue, ownerInstance, instance) {
            this.options = newValue
            if (newValue.type === 'open' && newValue.apikey) {
                if (!window.T) {
                    const script = document.createElement('script')
                    script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.options.apikey
                    script.onload = this.initChartsRender.bind(this)
                    document.head.appendChild(script)
                    console.log('open')
                } else {
                    const {
                        lng,
                        lat
                    } = this.options
                    Tmap = null;
                    Tmap = new T.Map('mapDiv', {
                        projection: 'EPSG:4326',
                    });
                    const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
                    const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
                    Tmap.addControl(scale);
                    Tmap.addControl(control);
                    this.upDataChartsRender(lng, lat)
                    this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
                }
            } else {
                const {
                    lng,
                    lat,
                    cover,
                    showLabel,
                    showCirle,
                    range
                } = newValue

                switch (newValue.type) {
                    case 'update':
                        this.upDataChartsRender(lng, lat)
                        break;
                    case 'addFeature':
                        Tmap.clearOverLays()
                        this.circle = []
                        cover.map((item, index) => {
                            this.setIcon(item.lon, item.lat, false, showLabel, false, showCirle, item)
                        })
                        break;
                    case 'changeRange':
                        this.setRange(range)
                    default:
                        break;
                }
            }
        },
        initChartsRender() {
            this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
            const {
                lng,
                lat
            } = this.options
            var that = this;
            Tmap = new T.Map('mapDiv', {
                projection: 'EPSG:4326',
            });
            this.upDataChartsRender(lng, lat)
            const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
            const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
            Tmap.addControl(scale);
            Tmap.addControl(control);
            console.log('初始化1')
        },
        upDataChartsRender(lng, lat, zoom = 15) {
            if (!Tmap) return
            Tmap.centerAndZoom(new T.LngLat(lng, lat), zoom);
        },
        setRange(range) {
            for (let item in this.circle) {
                this.circle[item].setRadius(range * 1000)
            }
            // this.circle.setRadius(range * 1000)
        },
        setIcon(lng, lat, isClear, isClick = false, isLabel = false, isCirle = false, item) {
            if (isClear) {
                Tmap.clearOverLays()
            }
            const latlng = new T.LngLat(lng, lat)
            const icon = new T.Icon({
                iconUrl: this.options.png,
                iconSize: new T.Point(30, 30),
                iconAnchor: new T.Point(15, 30)
            });
            if (isLabel) {
                const label = new T.Label({
                    text: `<div style="max-width: 50px; overflow: hidden">${item.label}</div>`,
                    position: latlng,
                    offset: new T.Point(-50, 0)
                });
                Tmap.addOverLay(label);
            }
            if(isCirle) {
                const circleObj = new T.Circle(latlng , parseFloat(50), {
                  color:"#13C57C",weight:2,opacity:1,fillColor:"#13C57C",fillOpacity:0.24
                })
                this.circle.push(circleObj)
                Tmap.addOverLay(circleObj);
            }
            const marker = new T.Marker(latlng, {
                icon
            });

            if (isClick) {
                this.removeMarkerClick(marker);
                //注册标注的点击事件
                marker.addEventListener("click", this.MarkerClick.bind(null, item));
            }
            Tmap.addOverLay(marker);
        },
        removeMarkerClick(marker) {
            //移除标注的点击事件
            marker.removeEventListener("click", this.MarkerClick);
        },
        MarkerClick(item, e) {
            this.openInfo(item.label, e)
            this.$ownerInstance.callMethod('selectItem', item)
        },
        openInfo(content, e) {
            const point = e.lnglat;
            const marker = new T.Marker(point); // 创建标注
            const markerInfoWin = new T.InfoWindow(content, {
                offset: new T.Point(0, -30)
            }); // 创建信息窗口对象
            Tmap.openInfoWindow(markerInfoWin, point); //开启信息窗口
        }
    },
}
</script>

<style scoped>
#mapDiv {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/deep/ .tdt-control-copyright {
    display: none;
}

/deep/ .tdt-label {
    /*        background: transparent;
        box-shadow: none;
        border: 0; */
}
</style>
