<template>
    <div>
        <!-- 顶部搜索 start -->

        <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 17, offset: 1 }">
            <a-row>
                <a-col :xxl="6" :xl="6" :md="8" :sm="24">
                    <a-form-item label="车牌号">
                        <a-input v-model="tableSearch.licenceNumber" />
                    </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :md="8" :sm="24">
                    <a-form-item label="开始时间">
                        <a-date-picker
                            v-model="tableSearch.beginTime"
                            allowClear
                            show-time
                            format="YYYY-MM-DD HH:mm:ss"
                            style="width: 100%"
                        />
                    </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :md="8" :sm="24">
                    <a-form-item label="结束时间">
                        <a-date-picker
                            v-model="tableSearch.endTime"
                            allowClear
                            show-time
                            format="YYYY-MM-DD HH:mm:ss"
                            style="width: 100%"
                        />
                    </a-form-item>
                </a-col>
                <a-col :xxl="12" :xl="12" :md="12" :sm="24" class="search-menu">
                    <a-form-item>
                        <a-button type="primary" @click="search">查询</a-button><span style="width:20px;">&nbsp;</span>
                        <a-button type="primary" @click="addMarker">添加标记</a-button>   <span style="width:20px;">&nbsp;</span>
                        <a-button type="primary" @click="subMarker">删除标记</a-button>   <span style="width:20px;">&nbsp;</span>
                        <a-button type="primary" @click="cleanMarkers">清空标记</a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <!-- 顶部搜索 end -->
        <gpsTrack ref="gpsTrack"  ></gpsTrack>
    </div>
</template>
<script>


export default {
    data() {
        return {
            tableSearch: {
                licenceNumber: "渝D90035"
            }
        };
    },
    methods: {
        search() {
            let _tableSearch = { ...this.tableSearch };
            if (_tableSearch.beginTime) {
                _tableSearch.beginTime = new Date(_tableSearch.beginTime).getTime();
            }
            if (_tableSearch.endTime) {
                _tableSearch.endTime = new Date(_tableSearch.endTime).getTime();
            }
            this.$refs.gpsTrack.polyline({
                device: {
                    deviceId: "",
                    licenceNumber: this.tableSearch.licenceNumber,
                    deviceNumber: "",
                    deviceProvider: ""
                },
                beginTime: _tableSearch.beginTime,
                endTime: _tableSearch.endTime
            });
        },
         addMarker() {
            this.$refs.gpsTrack.addMarker([
                {
                    marker: {
                        id: 1,
                        icon:"https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png",
                        position: [117.251863, 31.812059],
                        offset: [10, -20] // 选填，如果设置了自定义的icon，需根据实际效果自行调整
                    },
                    // 非必须字段，如果需要显示文字，则需提供该属性
                    label: {
                        offset: [10, -20], // 选填，如果content设置了自定义的样式，需根据实际效果自行调整
                        content: "hello world", // 设置文本标注内容
                        // direction: "right" //设置文本标注方位，选填
                    }
                }
            ]);
        },
        subMarker() {
            this.$refs.gpsTrack.subMarker([
                {
                    id: 1
                }
            ]);
        },
        cleanMarkers() {
            this.$refs.gpsTrack.cleanMarkers();
        }
    }
};
</script>
<style scoped></style>
