<template>
    <div class="container">
        <!-- 顶部操作栏 -->
        <div class="containertop">
            <div class="topleft">
                <img src="../../../assets/images/detailsicon/1.png" alt="">
                <span>项目图例</span>
            </div>
            <div class="topright">
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleEdit">
                    <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                    编辑
                </el-button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="main-content">
            <!-- 左侧两个轮播图 -->
            <div class="carousel-container">
                <!-- 上侧轮播图 -->
                <div class="carousel">
                    <div class="carousel-control left" @click="prevImage(1)">
                        <img src="../../../assets/images/icon-left@2x.png" alt="">
                    </div>
                    <div v-for="(item, index) in carousel1Items" :key="index" class="carousel-item"
                        :class="{ active: index === currentIndex1 }">
                        <img :src="item" :alt="'Image ' + (index + 1)" />
                    </div>
                    <div class="carousel-control right" @click="nextImage(1)">
                        <img src="../../../assets/images/icon-right@2x.png" alt="">
                    </div>
                    <div class="classify">
                        外部
                    </div>
                </div>

                <!-- 下侧轮播图 -->
                <div class="carousel">
                    <div class="carousel-control left" @click="prevImage(2)">
                        <img src="../../../assets/images/icon-left@2x.png" alt="">
                    </div>
                    <div v-for="(item, index) in carousel2Items" :key="index" class="carousel-item"
                        :class="{ active: index === currentIndex2 }">
                        <img :src="item" :alt="'Image ' + (index + 1)" />
                    </div>
                    <div class="carousel-control right" @click="nextImage(2)">
                        <img src="../../../assets/images/icon-right@2x.png" alt="">
                    </div>
                    <div class="classify">
                        内部
                    </div>
                </div>
            </div>

            <!-- 右侧地图缩略图 -->
            <div class="map-thumbnail">
                <div id="mars2dContainerSSS" class="mars2d-container"></div>
                <div class="classify">
                    位置
                </div>
            </div>
        </div>

        <!-- 编辑/新增对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
            <el-form :model="form" label-width="120px">
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片上传">
                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess"
                        :on-remove="handleUploadRemove" :file-list="fileList" list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
        </el-dialog>
    </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.3256, lng: 120.7457 }, 
                zoom: 16, // 设置地图缩放级别
                minZoom: 15, // 最小缩放级别
                maxZoom: 20, // 最大缩放级别
                zoomControl: true,
            },
            // 轮播图假数据（使用网络图片）
            carousel1Items: [
                'https://picsum.photos/300/200?random=1',
                'https://picsum.photos/300/200?random=2',
                'https://picsum.photos/300/200?random=3',
            ],
            carousel2Items: [
                'https://picsum.photos/300/200?random=4',
                'https://picsum.photos/300/200?random=5',
                'https://picsum.photos/300/200?random=6',
            ],
            currentIndex1: 0, // 上侧轮播图当前索引
            currentIndex2: 0, // 下侧轮播图当前索引
            // 对话框相关
            dialogVisible: false,
            dialogTitle: '编辑项目',
            form: {
                type: '外部', // 默认类型
                images: [], // 上传的图片列表
            },
            fileList: [], // 上传的文件列表
            map: null, // 地图实例
            markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 使用 require 引入图片
        };
    },
    methods: {
        onload(map) {
            // 地图组件构造完成
        },
        // 切换到上一张图片
        prevImage(carouselIndex) {
            if (carouselIndex === 1) {
                this.currentIndex1 =
                    (this.currentIndex1 - 1 + this.carousel1Items.length) % this.carousel1Items.length;
            } else if (carouselIndex === 2) {
                this.currentIndex2 =
                    (this.currentIndex2 - 1 + this.carousel2Items.length) % this.carousel2Items.length;
            }
        },
        // 切换到下一张图片
        nextImage(carouselIndex) {
            if (carouselIndex === 1) {
                this.currentIndex1 = (this.currentIndex1 + 1) % this.carousel1Items.length;
            } else if (carouselIndex === 2) {
                this.currentIndex2 = (this.currentIndex2 + 1) % this.carousel2Items.length;
            }
        },
        // 编辑操作
        handleEdit() {
            this.dialogTitle = '编辑项目';
            this.dialogVisible = true;
            // 填充表单数据
            this.form = {
                type: '外部', // 默认类型
                images: [], // 上传的图片列表
            };
        },
        // 提交表单
        handleSubmit() {
            this.dialogVisible = false;
            // 调用 API 提交数据
        },
        // 上传成功
        handleUploadSuccess(response, file) {
            this.fileList.push(file);
            this.form.images.push(file.url);
        },
        // 移除文件
        handleUploadRemove(file) {
            const index = this.fileList.indexOf(file);
            if (index !== -1) {
                this.fileList.splice(index, 1);
                this.form.images.splice(index, 1);
            }
        },
        // 初始化地图
        initMap() {
            this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
            this.map.on('load', this.onload);
        },
        // 地图加载完成后的回调
        onload() {
            this.addTestMarker();
        },
        addTestMarker() {
            const graphic = new mars2d.graphic.Marker({
                latlng: [31.3256, 120.7457], //xxxx的坐标
                style: {
                    image: this.markerIcon, // 使用引入的图片路径
                    width: 46,
                    height: 60,
                    horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
                    verticalOrigin: mars2d.VerticalOrigin.BOTTOM
                },
                // attr: { remark: "xxxx的坐标" }
            });
            this.map.graphicLayer.addGraphic(graphic);
        }
    },
    mounted() {
        this.initMap();
    },
    beforeDestroy() {
        if (this.map) {
            this.map.destroy();
        }
    }
};
</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;
}

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

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

.main-content {
    display: flex;
    gap: 2rem;
    padding: 1rem;
}

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

.carousel {
    width: 21rem;
    height: 12rem;
    position: relative;
    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;
}

.classify {
    width: 2.81rem;
    height: 1.38rem;
    background-color: rgba(43, 98, 241, 0.8);
    border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
    color: white;
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    z-index: 98;
}

.map-thumbnail {
    width: 76rem;
    height: 25rem;
    position: relative;
}

.mars2d-container {
    width: 100%;
    height: 100%;
}
</style>