<template>
    <view style="width: 100%; height: 100%">
        <view class="mask" style="width: 100%; height: 100%">
            <tiandituMap
                ref="tiandituMapRefs"
                @onLoadTianDiTu="initMaps"
                @onSelect="selectPoint"
                :apiKey="apiKey"
                :customIcon="icon"
                :showLabel="showLabel"
                :showCirle="showCirle"
            ></tiandituMap>
        </view>
    </view>
</template>
<script>
import tiandituMap from './tianditu-map.vue';
import tools from '../../tools.js';
export default {
    name: 'zhuozhuoTiandituPlugin',
    components: {
        tiandituMap,
    },
    props: {
        apiKey: {
            type: String,
            require: true,
            default: '',
        },
        icon: {
            type: String,
            default: '',
        },
        showLabel: {
            type: Boolean,
            default: true,
        },
        showCirle: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            winWidth: 0,
            winHeight: 0,
            winTop: 0,
            visible: false,
            datalist: [],
            selectItem: {},
            iStatusBarHeight: 0,
            option: {
                apikey: 123123,
            },
        };
    },
    created() {
        var that = this;
        // #ifdef APP
        // 44 + 10 44: search Input height
        const searchHeight = this.search ? 54 : 10;
        const { statusBarHeight, screenHeight, windowHeight } = uni.getSystemInfoSync();
        if (screenHeight === windowHeight) {
            that.iStatusBarHeight = statusBarHeight + searchHeight;
        } else {
            that.iStatusBarHeight = 0;
        }
        // #endif
        uni.getSystemInfo({
            success: function (res) {
                that.winWidth = res.windowWidth;
                that.winHeight = res.windowHeight;
                that.winTop = res.windowTop;
            },
        });
    },
    methods: {
        open(lon, lat) {
            if (lon && lat) {
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs.tiandituMapRefs.initCharts(lon, lat);
                });
            } else {
                console.error('请传入lon, lat');
            }
        },
        upDateLonLat(cover) {
            if (lon && lat) {
                this.$refs.tiandituMapRefs.upDataCharts(lon && lat);
            } else {
                console.error('请传入lon, lat');
            }
        },
        addFeature(cover) {
            if (cover && Array.isArray(cover) && cover.length) {
                this.$refs.tiandituMapRefs.addFeature(cover);
            } else {
                console.error('请传入 cover', cover);
            }
        },
        changeRange(range) {
            this.$refs.tiandituMapRefs.changeRange(range);
        },
        selectPoint(e) {
            this.$emit('onSelect', e);
        },
        initMaps() {
            console.warn('--------天地图加载完成--------');
            this.$emit('onLoad');
        },
    },
};
</script>

<style scope>
.mask {
    /* overflow: hidden; */
    /* position: fixed;
        left: 0;
        z-index: 399; */
    background-color: #ffffff;
}

/* footer */
.list-boxd {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 401;
    right: 0;
    border-radius: 14px 14px 0 0;
    background: #ffffff;
    transition: all 1s;
}

.list-header {
    height: 20px;
    position: relative;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.list-header::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: '';
    height: 6px;
    width: 60px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.list-content {
    max-height: 50vh;
    overflow-y: scroll;
}

.card {
    min-height: 44px;
    padding: 12px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-right {
    padding-right: 10px;
}

.arrow {
    border-top: 2px solid #666666;
    border-right: 2px solid #666666;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

.card:active {
    background-color: #f3f4f6;
}

.card::after {
    position: absolute;
    content: '';
    bottom: 0;
    height: 1px;
    background-color: #e8e8e8;
    width: 90%;
}

.card:last-child::after {
    height: 0;
    background-color: #ffffff;
}

.card-title {
    font-size: 18px;
}

.card-text {
    color: #e8e8e8;
    font-size: 13px;
}
</style>
