<template>
    <div>
        <el-row>
            <el-card  style="background-color: #F5F7FA">
                <el-row>
                    <el-form :model="queryInfo" :rules="rules" ref="ruleForm">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" prop="vclN">
                                    <el-input v-model="queryInfo.vclN"  size="small" style="width: 170px"
                                              placeholder="车牌号" clearable required>
                                        <template slot="prepend">车牌号</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" prop="vco">
                                    <div class="my-text-area">
                                        <div class="el-input-group__prepend prepand">车牌类型</div>
                                        <el-select v-model="queryInfo.vco" placeholder="车牌类型" style="width: 100px">
                                            <el-option label="蓝牌" value="1"></el-option>
                                            <el-option label="黄牌" value="2"></el-option>
                                            <el-option label="绿牌" value="3"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" prop="satellite">
                                    <div class="my-text-area">
                                        <div class="el-input-group__prepend prepand">卫星</div>
                                        <el-select required v-model="satellite" placeholder="卫星" style="width: 100px">
                                            <el-option label="北斗" value="1"></el-option>
                                            <el-option label="GPS" value="2"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="" prop="qryEtm">
                                    <div class="my-text-area">
                                        <div  class="el-input-group__prepend prepand">开始时间</div>
                                        <!--                            <span class="demonstration">带快捷选项</span>-->
                                        <el-date-picker
                                                v-model="queryInfo.qryEtm"
                                                type="datetime"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择日期时间"
                                                align="right"  style="width: 170px"
                                                :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="" prop="qryBtm">
                                    <div class="my-text-area">
                                        <div  class="el-input-group__prepend prepand">结束时间</div>
                                        <!--                            <span class="demonstration">带快捷选项</span>-->
                                        <el-date-picker
                                                v-model="queryInfo.qryBtm"
                                                type="datetime"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择日期时间"
                                                align="right" style="width: 170px"
                                                :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1">
                                <el-button type="primary" size="mini" @click="getList()">
                                    查询
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>
            </el-card>
        </el-row>
        <div id="mapContainer" ref="mapContainer" style="width: 100%; height: 500px;"></div>
    </div>
</template>
<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import { historyTrack,gpshistoryTrack } from '../../api/consigner/vehicle';


    export default {
        data() {
            return {
                mapInstance: null,
                queryInfo: {
                    vclN: '',
                    vco: '2',
                    //开始时间
                    qryEtm: '',
                    //结束时间
                    qryBtm: '',
                },
                satellite:'1',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                tableData:[],
                myArray: [{
                    "mlg": "24284.1",
                    "agl": "268",
                    "gtm": "20211110/000025",
                    "hgt": "302",
                    "lat": "17783673",
                    "lon": "63774741",
                    "spd": "0.0"
                },
                    {
                        "mlg": "24284.1",
                        "agl": "268",
                        "gtm": "20211110/000055",
                        "hgt": "302",
                        "lat": "17783673",
                        "lon": "63774741",
                        "spd": "0.0"
                    }],
                convertedCoords: [],
                rules: {
                    vclN: [
                        { required: true, message: '请输入车牌号', trigger: 'blur' },
                        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    vco: [
                        { required: true, message: '请选择车牌类型', trigger: 'change' }
                    ],
                    qryEtm: [
                        { required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    qryBtm: [
                        { required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                }
            };
        },
        computed:{
        },
        methods: {
            getList() {
                if(this.satellite=='1'){
                    this.$refs.ruleForm.validate(valid => {
                        if (!valid) return;
                        const _this = this;
                        historyTrack(this.queryInfo).then((response) => {
                            const res = response.data;
                            if (res.code !== '200') {
                                return _this.$message.error('获取车辆轨迹失败！');
                            }
                            // 调用initMap方法，并将轨迹数据传递过去
                            _this.initMap(res.data.data.trackArray);
                            _this.$message.success('获取车辆轨迹成功！');
                        }).catch(error => {
                            _this.$message.error('获取车辆轨迹失败：' + error.toString());
                        });
                    })
                }else{
                    this.$refs.ruleForm.validate(valid => {
                        if (!valid) return;
                        const _this = this;
                        gpshistoryTrack(this.queryInfo).then((response) => {
                            const res = response.data;
                            if (res.code !== '200') {
                                return _this.$message.error('获取车辆轨迹失败！');
                            }
                            // 调用initMap方法，并将轨迹数据传递过去
                            _this.initMapGPS(res.data.data);
                            _this.$message.success('获取车辆轨迹成功！');
                        }).catch(error => {
                            _this.$message.error('获取车辆轨迹失败：' + error.toString());
                        });
                    })
                }

            },
            initMap(trackArray) {
                const _this = this;
                AMapLoader.load({
                    key: 'fdb27c13681d084e85ff8457b5cbe540',
                    version: '2.0',
                    plugins: [], // 可以加载地图插件，比如定位、地图工具等
                }).then((AMap) => {
                    // 创建地图对象并存储在 _this.mapInstance 中
                    _this.map = new AMap.Map('mapContainer', {
                        zoom: 10, // 设置地图缩放级别
                        center: [116.397428, 39.90923], // 设置地图中心点坐标
                    });
                    // 将轨迹数据添加到地图上
                    //var lineArr = trackArray.map((item) => [item.longitude / 600000.0, item.latitude / 600000.0]);
                    this.convertedCoords = this.convertBDToAMap(trackArray);
                    console.log(this.convertedCoords)
                    _this.poly = new AMap.Polyline({
                        path: this.convertedCoords, // 设置折线路径
                        strokeColor: "#3366ff", // 线颜色
                        strokeOpacity: 1, // 线透明度
                        strokeWeight: 3, // 线宽
                        strokeStyle: "solid", // 线样式
                    });
                    _this.poly.setMap(_this.map);
                    _this.map.setCenter(this.convertedCoords[0])
                    //_this.map.setFitView();
                }).catch((err) => {
                    console.error('初始化地图失败：', err);
                });
            },
            initMapGPS(DATA) {
                const _this = this;
                AMapLoader.load({
                    key: 'fdb27c13681d084e85ff8457b5cbe540',
                    version: '2.0',
                    plugins: [], // 可以加载地图插件，比如定位、地图工具等
                }).then((AMap) => {
                    // 创建地图对象并存储在 _this.mapInstance 中
                    _this.map = new AMap.Map('mapContainer', {
                        zoom: 10, // 设置地图缩放级别
                        center: [116.397428, 39.90923], // 设置地图中心点坐标
                    });
                    // 将轨迹数据添加到地图上
                    //var lineArr = trackArray.map((item) => [item.longitude / 600000.0, item.latitude / 600000.0]);
                    this.convertedCoords = this.convertBDToAMapGPS(DATA);
                    console.log(this.convertedCoords)
                    _this.poly = new AMap.Polyline({
                        path: this.convertedCoords, // 设置折线路径
                        strokeColor: "#3366ff", // 线颜色
                        strokeOpacity: 1, // 线透明度
                        strokeWeight: 3, // 线宽
                        strokeStyle: "solid", // 线样式
                    });
                    _this.poly.setMap(_this.map);
                    _this.map.setCenter(this.convertedCoords[0])
                    //_this.map.setFitView();
                }).catch((err) => {
                    console.error('初始化地图失败：', err);
                });
            },
            convertBDToAMap(bdCoordData) {
                const aMapCoordData = [];
                bdCoordData.forEach(coord => {
                    const lon = parseFloat(coord.lon) / 600000.0; // 将经度从北斗格式转换为高德地图格式
                    const lat = parseFloat(coord.lat) / 600000.0; // 将纬度从北斗格式转换为高德地图格式
                    aMapCoordData.push([lon, lat]); // 添加到结果数组
                });
                return aMapCoordData;
            },
            convertBDToAMapGPS(bdCoordData) {
                const aMapCoordData = [];
                bdCoordData.forEach(coord => {
                    const lon = parseFloat(coord.lon); // 将经度从北斗格式转换为高德地图格式
                    const lat = parseFloat(coord.lat); // 将纬度从北斗格式转换为高德地图格式
                    aMapCoordData.push([lon, lat]); // 添加到结果数组
                });
                return aMapCoordData;
            },

        },

        mounted() {
            this.initMap(this.myArray);
        },
    };
</script>

<style scoped>
    .my-text-area .prepand{
        float: left;
        width:89px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
    }
</style>
<style>
    .my-text-area .el-textarea__inner{
        min-height: 28px;
        height: 28px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
    .rounded-corner {
        border-radius: 10px; /* 设置圆角的半径为10像素 */
        background-color: #f0f0f0; /* 背景颜色 */
        padding: 10px; /* 内边距 */
        margin: 10px; /* 外边距 */
        box-shadow: 0 0 5px #ddd; /* 盒子阴影效果 */
    }
</style>