<template>
    <el-dialog title="查看运动轨迹" v-model="data.dialogVisible" :before-close="handleClose" style="width: 700px; padding-bottom: 20px">
        <el-form ref="formDataRef" :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="日期">
                <!-- <el-date-picker
                    v-model="formData.time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择日期"
                    :disabled-date="disabledDate"
                ></el-date-picker> -->
                <el-date-picker
                    v-model="formData.time"
                    type="datetimerange"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期"
                    :disabled-date="disabledDate"
                    @change="dateChange"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getPath">查询</el-button>
                <el-button type="warning" @click="playPoints" :disabled="!data.mapShow">{{ data.play ? '暂停' : '播放' }}</el-button>
            </el-form-item>
        </el-form>
        <div
            v-loading="data.trackLoading"
            element-loading-text="正在加载中..."
            style="height: 500px"
            element-loading-background="rgba(255, 255, 255,1)"
        >
            <div class="empty-box" v-if="data.noTrack">
                <img style="width: 50%" src="../../assets/images/wuguiji.png" />
            </div>
            <baidu-map
                class="map"
                @ready="handler"
                :center="data.centerPoint"
                :zoom="data.zoom"
                :dragging="true"
                :auto-resize="true"
                :scroll-wheel-zoom="true"
                style="height: 500px"
                v-if="data.mapShow"
            >
                <!-- 运行轨迹的路线 stroke-weight边线的宽度stroke-opacity边线透明度-->
                <bm-polyline stroke-color="blue" :path="data.path" :stroke-opacity="0.5" :stroke-weight="3" :editing="false"></bm-polyline>
                <!-- marker 可以展示的图标 起点、终点 -->
                <bm-marker :icon="startMarkIcon" :position="{ lng: data.startMark.lng, lat: data.startMark.lat }"></bm-marker>
                <bm-marker :icon="endMarkIcon" :position="{ lng: data.endMark.lng, lat: data.endMark.lat }"></bm-marker>
                <bm-marker
                    v-for="(item, index) in data.path"
                    :key="index"
                    :icon="biaoMarkIcon"
                    :position="{ lng: item.lng, lat: item.lat }"
                ></bm-marker>
                <!-- 暂停是根据你提供的坐标，如果还没过第一个，就会返回，如果过了，在第一个到第二个之间暂停，他会跑掉第二个后面 -->
                <bml-lushu @stop="reset" :path="data.path" :icon="iconss" :play="data.play" :rotation="true" :speed="900"></bml-lushu>
            </baidu-map>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { BmlLushu } from 'vue-baidu-map-3x';
import { collarTrack, collarTrackOrder } from '~/api/hardware.js';
import startIcon from '../../assets/images/qi.png';
import endIcon from '../../assets/images/zhong.png';
import biaoIcon from '../../assets/images/biaozhu.png';
import goIcon from '../../assets/images/yuan.png';

const formDataRef = ref(null);
const data = reactive({
    dialogVisible: false,
    play: false, // 是否自动播放轨迹动画
    zoom: 15,
    path: [],
    centerPoint: { lng: 116.404, lat: 39.915 },
    startMark: { lng: 116.404, lat: 39.915 },
    endMark: { lng: 116.404, lat: 116.404 },
    trackLoading: false,
    noTrack: false,
    mapShow: false,
    type: '',
});
const formData = reactive({
    time: '',
});
const handleClose = () => {
    data.dialogVisible = false;
};
// 查询当前时间
const getNowDate = () => {
    const year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();
    let hours = new Date().getHours();
    let minutes = new Date().getMinutes();
    let seconds = new Date().getSeconds();
    month = month < 10 ? `0${month}` : month;
    day = day < 10 ? `0${day}` : day;
    hours = hours < 10 ? `0${hours}` : hours;
    minutes = minutes < 10 ? `0${minutes}` : minutes;
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    // formData.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    formData.time = [`${year}-${month}-${day} ` + `00` + `:` + `00` + `:` + `00`, `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`];
};
// 禁用今天之后的日期
const disabledDate = (time) => {
    return time.getTime() > Date.now();
};
const dateChange = () => {
    if (!formData.time) {
        formData.time = '';
    }
};
// 起点图标
const startMarkIcon = reactive({
    url: startIcon,
    size: { width: 32, height: 32 },
    opts: { anchor: { width: 16, height: 16 } },
});
// 终点图标
const endMarkIcon = reactive({
    url: endIcon,
    size: { width: 32, height: 32 },
    opts: { anchor: { width: 16, height: 16 } },
});
// 运动图标
const iconss = reactive({
    url: goIcon,
    size: { width: 18, height: 18 },
    opts: { anchor: { width: 9, height: 9 } },
});
const biaoMarkIcon = reactive({
    url: biaoIcon,
    size: { width: 32, height: 32 },
    opts: { anchor: { width: 15, height: 32 } },
});
const handler = ({ BMap, map }) => {
    // 自动获取展示的比例
    const view = map.getViewport(eval(data.path));
    data.zoom = view.zoom;
    data.centerPoint = view.center;
};
// 查询
const getPath = () => {
    data.mapShow = false;
    data.noTrack = false;
    getTrack();
};
// 播放/暂停 运行轨迹
const playPoints = () => {
    if (data.noTrack) {
        ElMessage.warning('暂无定位轨迹');
        return;
    }
    data.play = !data.play;
};
// 停止播放运行轨迹
const reset = () => {
    data.play = false;
};
// 查询定位
const getTrack = () => {
    data.trackLoading = true;
    if (data.type == 'order') {
        collarTrack({
            deliveryId: data.deliveryId,
            xqDeviceId: data.xqDeviceId,
            trackTime: formData.time[0] ? formData.time[0] : '',
            trackEndTime: formData.time[1] ? formData.time[1] : '',
        })
            .then((res) => {
                data.trackLoading = false;
                if (res.code === 200) {
                    data.mapShow = true;
                    if (res.data.length > 0) {
                        data.path = [];
                        res.data.forEach((item) => {
                            data.path.push({
                                lng: item.longitude,
                                lat: item.latitude,
                            });
                        });
                        data.startMark = data.path[0]; // 起点
                        data.endMark = data.path[data.path.length - 1]; // 终点
                    }
                } else {
                    ElMessage.error(res.msg);
                    data.noTrack = true;
                }
            })
            .catch(() => {
                data.trackLoading = false;
                data.noTrack = true;
            });
    } else {
        collarTrackOrder({
            deliveryId: data.deliveryId,
            xqDeviceId: data.xqDeviceId,
            trackTime: formData.time[0] ? formData.time[0] : '',
            trackEndTime: formData.time[1] ? formData.time[1] : '',
        })
            .then((res) => {
                data.trackLoading = false;
                if (res.code === 200) {
                    data.mapShow = true;
                    if (res.data.length > 0) {
                        data.path = [];
                        res.data.forEach((item) => {
                            data.path.push({
                                lng: item.longitude,
                                lat: item.latitude,
                            });
                        });
                        data.startMark = data.path[0]; // 起点
                        data.endMark = data.path[data.path.length - 1]; // 终点
                    }
                } else {
                    ElMessage.error(res.msg);
                    data.noTrack = true;
                }
            })
            .catch(() => {
                data.trackLoading = false;
                data.noTrack = true;
            });
    }
};
const onShowTrackDialog = (row) => {
    data.dialogVisible = true;
    getNowDate();
    if (row) {
        data.deliveryId = row.deliveryId;
        data.xqDeviceId = row.deviceId;
        data.type = row.type ? row.type : '';
        data.mapShow = false;
        data.noTrack = false;
        data.formData = '';
        getTrack();
    }
};
defineExpose({
    onShowTrackDialog,
});
</script>

<style lang="less" scoped>
::v-deep .anchorBL {
    display: none;
    visibility: hidden;
}
.empty-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
}
</style>
