<template>
    <div class="container">
        <!-- 内容区域 -->
        <div class="main-content">
            <!-- 地图容器 -->
            <div class="map-thumbnail">
                <div id="mars2dContainerLuotu" class="mars2d-container"></div>
            </div>
            <!-- 悬浮的点位信息 div -->
            <div class="floating-panel" v-if="floatingPanelVisible">
                <div class="panel-header">
                    <span>{{ pointDialogTitle }}</span>
                    <el-button type="text" @click="hideFloatingPanel" class="close-button">关闭</el-button>
                </div>
                <div class="panel-body">
                    <el-form :model="pointForm" label-width="100px">
                        <el-form-item label="项目名称">
                            <el-input v-model="pointForm.name" ref="pointNameInput"></el-input>
                        </el-form-item>
                        <el-form-item label="纬度">
                            <el-input v-model="pointForm.lat" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="经度">
                            <el-input v-model="pointForm.lng" readonly></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="panel-footer">
                    <el-button @click="hideFloatingPanel">取消</el-button>
                    <el-button v-if="!isEditing" type="primary" @click="addPoint">确认</el-button>
                    <el-button v-else type="danger" @click="deletePoint">删除点位</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'mars2d/mars2d.css';
import * as mars2d from 'mars2d';

export default {
    components: {},
    dicts: ['tplx'],
    data() {
        const basePathUrl = window.basePathUrl || "";
        return {
            configUrl: basePathUrl + "config/config.json",
            mapOptions: {
                // 配置文档：http://mars2d.cn/apidoc.html#Map
                copyright: false, // 不显示厂商logo
                basemaps: [
                    {
                        "id": 2021,
                        "pid": 10,
                        "name": "高德电子",
                        "icon": "img/basemaps/gaode_vec.png",
                        "type": "gaode",
                        "layer": "vec",
                        "show": true
                    },
                ],
                center: { lat: 31.2304, lng: 120.6184 }, // 中心点
                zoom: 10, // 设置地图缩放级别
            },
            // 对话框相关
            dialogVisible: false,
            dialogTitle: '编辑项目',
            form: {
                type: '外部', // 默认类型
            },
            map: null, // 地图实例
            floatingPanelVisible: false, // 控制悬浮面板显示
            pointDialogTitle: '新增点位', // 新增点位弹窗标题
            pointForm: {
                name: '',
                lat: '',
                lng: '',
            },
            selectedLatLng: null, // 选中的经纬度
            existingMarker: null, // 存储已存在的点位标记
            isEditing: false, // 标志变量，用于区分当前按钮状态
            markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 使用 require 引入图片
        };
    },
    methods: {
        onload(map) {
            // 地图组件构造完成
        },
        // 编辑操作
        handleEdit() {
            this.dialogTitle = '编辑项目';
            this.dialogVisible = true;
            // 填充表单数据
            this.form = {
                type: '外部', // 默认类型
            };
        },
        // 提交表单
        handleSubmit() {
            this.dialogVisible = false;
            // 调用 API 提交数据
        },
        // 初始化地图
        initMap() {
            if (!this.map) {
                this.map = new mars2d.Map('mars2dContainerLuotu', this.mapOptions);
                this.map.on('click', this.onMapClick);
            }
        },
        // 地图点击事件
        onMapClick(event) {
            if (this.existingMarker) {
                this.$message.warning('地图上已经存在一个点位，请先删除该点位后再添加新的点位。');
                return;
            }
            const { latlng } = event;
            this.selectedLatLng = latlng;
            this.pointForm.lat = latlng.lat.toString();
            this.pointForm.lng = latlng.lng.toString();
            this.showFloatingPanel();
        },
        // 显示悬浮面板
        showFloatingPanel() {
            this.floatingPanelVisible = true;
            this.$nextTick(() => {
                this.$refs.pointNameInput.focus();
            });
        },
        // 隐藏悬浮面板
        hideFloatingPanel() {
            this.floatingPanelVisible = false;
            this.selectedLatLng = null;
            this.pointForm.name = '';
            this.pointForm.latlng = '';
        },
        // 新增点位
        addPoint() {
            if (this.selectedLatLng) {
                if (this.existingMarker) {
                    this.map.graphicLayer.removeGraphic(this.existingMarker);
                }
                const marker = new mars2d.graphic.Marker({
                    latlng: this.selectedLatLng,
                    style: {
                        image: this.markerIcon, // 使用引入的图片路径
                        width: 32,
                        height: 32,
                    },
                });
                this.map.graphicLayer.addGraphic(marker);
                this.existingMarker = marker;
                this.isEditing = true; // 切换按钮状态
                this.hideFloatingPanel();
                this.$message.success('落图成功');

                // 为点位添加点击事件监听器
                marker.on('click', this.onMarkerClick);
            }
        },
        // 删除点位
        deletePoint() {
            if (this.existingMarker) {
                this.existingMarker.off('click', this.onMarkerClick); // 移除点击事件监听器
                this.map.graphicLayer.removeGraphic(this.existingMarker);
                this.existingMarker = null;
                this.isEditing = false; // 切换按钮状态
                this.hideFloatingPanel();
                this.$message.success('点位已删除');
            }
        },
        // 点击点位图标时显示悬浮面板
        onMarkerClick(event) {
            this.pointForm.name = this.existingMarker.name || '';
            this.pointForm.latlng = `${this.existingMarker.latlng.lat}, ${this.existingMarker.latlng.lng}`;
            this.showFloatingPanel();
        },
    },
    mounted() {
        this.initMap(); // 直接初始化地图
    },
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    gap: 1rem;
    overflow: auto;
    position: relative;
}

.containertop {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: .5rem;
    border-bottom: 1px solid #E5E5E5;
}

.action-bar {
    margin-bottom: 20px;
}

.carousel-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carousel {
    width: 21rem;
    height: 12rem;
    overflow: hidden;
}

.carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-item.active {
    opacity: 1;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.5rem;
    color: white;
    padding: 0.5rem;
    z-index: 10;
}

.carousel-control.left {
    left: 0;
}

.carousel-control.right {
    right: 0;
}

.topleft {
    width: 8rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.topleft img {
    width: 0.81rem;
    height: 0.81rem;
}

.topleft span {
    width: auto;
    height: 0.88rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 0.88rem;
    color: #3D424C;
    line-height: 0.88rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.map-thumbnail {
    width: 60rem;
    height: 34rem;
    position: relative;
}

.mars2d-container {
    width: 60rem;
    height: 34rem;
}

/* 悬浮面板样式 */
.floating-panel {
    position: fixed;
    top: 30%;
    right: 25%;
    width: 300px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #F5F7FA;
    border-bottom: 1px solid #E4E7ED;
}

.panel-header span {
    font-size: 16px;
    font-weight: 500;
}

.close-button {
    font-size: 14px;
    color: #909399;
}

.panel-body {
    padding: 20px;
}

.panel-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 15px;
    background-color: #F5F7FA;
    border-top: 1px solid #E4E7ED;
}

.panel-footer .el-button {
    margin-left: 10px;
}
</style>