<template>
    <a-modal width="100%" :title="null" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false"
        wrapClassName="createTask-modal" :visible="visible">
        <div class="content">
            <div class="content-panel">
                <TaskPanel ref="taskPanelRef" :type="type" :drawTrajectory="drawTrajectory"
                    :onClickConfirm="onClickConfirm" :onClickCancel="onClickCancel" />
            </div>
            <div class="content-map">
                <div id="taskMap" :style="{ width: '100%', height: '100%' }"></div>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import TaskPanel from './TaskPanel.vue';
import sPointSrc from '/@/assets/icons/sPoint.svg';
import { useGMapManage } from '/@/hooks/use-g-map';

interface Props {
    jobId: string,
    type: 'COPY' | 'DETAIL' | 'CREATE',
    visible: boolean,
    onClickConfirm: (data: any) => Promise<any>,
    onClickCancel: () => void,
};

const props = withDefaults(defineProps<Props>(), {

});

const taskPanelRef = ref();

const state = reactive({
    loading: false,
    AMap: null, // Map类
    map: null, // 地图对象
    mapCoverList: [] as any[],
})

// 高德地图Hook
const AmapHook = useGMapManage();

const init = async () => {
    const AMap = await AmapHook.asyncInitMap();
    state.AMap = AMap;
    const map = new AMap.Map('taskMap', {
        center: [121.48, 31.22],
        zoom: 12
    })
    state.map = map;
    if (props.jobId) {
        taskPanelRef.value.init(props.jobId);
    }
}

onMounted(() => {
    init();
})

// 绘制轨迹
const drawTrajectory = (list: {
    paths: number[],
    isSPoint: boolean,
}[]) => {
    const AMap: any = state.AMap;
    const map: any = state.map;
    state.mapCoverList.forEach(cover => map.remove(cover));
    const paths = list.map(item => item.paths);
    if (!paths.length) {
        return;
    }
    // 绘制轨迹折线
    const polyline = new AMap.Polyline({
        path: paths,
        strokeColor: '#3feb78',
        showDir: true,// 显示路线白色方向箭头
        strokeOpacity: 1,// 轮廓线透明度
        strokeWeight: 6,//线宽
        strokeStyle: 'solid',
    })
    const serialList = list.slice();
    // 序号
    const text = serialList.map((item, index) => {
        return new AMap.Text({
            position: new AMap.LngLat(item.paths[0], item.paths[1]),
            offset: new AMap.Pixel(-8, -30),
            text: index + 1,
            style: {
                backgroundColor: 'transparent',
                borderColor: 'transparent',
            }
        })
    })
    // 序号下方圆形标记
    const circles = serialList.map((item) => {
        return new AMap.Circle({
            center: new AMap.LngLat(item.paths[0], item.paths[1]),
            radius: 0.5, // 半径
            fillColor: '#FFFFFF',
            fillOpacity: 1,
            strokeWeight: 2,
        });
    })
    // 计算并显示每段线的距离
    const distances = [];
    const serialPaths = serialList.map(item => item.paths)
    for (let i = 0; i < serialPaths.length - 1; i++) {
        const distance = AMap.GeometryUtil.distance(new AMap.LngLat(serialPaths[i][0], serialPaths[i][1]), new AMap.LngLat(serialPaths[i + 1][0], serialPaths[i + 1][1]));
        // 计算两个点之间的中点坐标
        const midLng = (serialPaths[i][0] + serialPaths[i + 1][0]) / 2;
        const midLat = (serialPaths[i][1] + serialPaths[i + 1][1]) / 2;
        const midPoint = new AMap.LngLat(midLng, midLat);
        // 在中点位置放置文本以显示距离
        const distanceText = new AMap.Text({
            position: midPoint,
            offset: new AMap.Pixel(-16, 10),
            text: `${distance.toFixed(1)} m`,// 距离
            style: {
                fontSize: '10px',
                color: '#FFFFFF',
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
                borderColor: 'transparent',
            },
        });
        distances.push(distanceText);
    }
    const other = [polyline, ...text, ...circles, ...distances];
    const item = list.find(item => item.isSPoint);
    if (item) {
        // 绘制S点图标
        const position = item.paths;
        const icon = new AMap.Icon({
            size: new AMap.Size(30, 30),
            image: sPointSrc,
            imageSize: new AMap.Size(30, 30)
        })
        const marker = new AMap.Marker({
            position: new AMap.LngLat(position[0], position[position.length - 1]),
            icon: icon,
            offset: new AMap.Pixel(-20, -35),// 位置偏移
        })
        other.push(marker);
    }
    state.mapCoverList = other;
    map.add(other);
    // 自动缩放地图到合适的视野级别
    map.setFitView(other);
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;

    &-panel {
        width: auto;
        height: 100%;
        background-color: #232323;
    }

    &-map {
        flex: 1;
        height: 100%;
    }
}
</style>

<style lang="scss">
.createTask-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        height: 100vh;
        padding: 0;
    }
}

.amap-logo {
    display: none !important;
}

.amap-copyright {
    display: none !important;
}
</style>