<template>
    <el-dialog title="查看定位" v-model="data.dialogVisible" :before-close="handleClose" style="width: 700px; padding-bottom: 20px">
        <div
            v-loading="data.loactionLoading"
            element-loading-text="正在加载中..."
            element-loading-background="rgba(255, 255, 255,1)"
            style="height: 500px"
        >
            <div class="empty-box" v-if="data.loactionStatus">
                <img style="width: 50%" src="../../assets/images/wudingwei.png" />
            </div>
            <baidu-map style="height: 500px" class="map" :zoom="15" :center="data.center" :scroll-wheel-zoom="true" v-if="data.mapShow">
                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
                <bm-marker :position="data.center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                    <bm-label
                        :content="data.time"
                        :labelStyle="{
                            color: '#67c23a',
                            fontSize: '12px',
                            borderColor: '#fff',
                            borderRadius: 10,
                        }"
                        :offset="{ width: -96, height: 10 }"
                    />
                </bm-marker>
            </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 { collarLocation } from '~/api/hardware.js';

const data = reactive({
    dialogVisible: false,
    loactionLoading: false,
    loactionStatus: false,
    mapShow: false,
    center: { lng: 0, lat: 0 },
    time: '',
    deliveryId: '',
    xqDeviceId: '',
});
// 查询定位
const getLocation = () => {
    data.loactionLoading = true;
    collarLocation({
        deliveryId: data.deliveryId,
        xqDeviceId: data.xqDeviceId,
    })
        .then((res) => {
            data.loactionLoading = false;
            if (res.code === 200) {
                data.mapShow = true;
                data.center.lng = res.data.longitude;
                data.center.lat = res.data.latitude;
                data.time = `最后定位时间：${res.data.updateTime}`;
            } else {
                ElMessage.error(res.msg);
                data.loactionStatus = true;
            }
        })
        .catch(() => {
            data.loactionLoading = false;
            data.loactionStatus = true;
        });
};
const handleClose = () => {
    data.dialogVisible = false;
};
const onShowLocationDialog = (row) => {
    data.dialogVisible = true;
    if (row) {
        data.deliveryId = row.deliveryId;
        data.xqDeviceId = row.deviceId;
        data.mapShow = false;
        data.loactionStatus = false;
        getLocation();
    }
};
defineExpose({
    onShowLocationDialog,
});
</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>
