<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" class="search-menu">
                    <a-form-item>
                        <div class="oper">
                            <a @click="handleMonitor" v-show="operFlag">
                                <a-icon type="poweroff" />
                                <div>监控</div>
                            </a>
                            <a @click="handleStop" v-show="!operFlag">
                                <a-icon type="pause-circle" class="icon" />
                                <div>停止</div>
                            </a>
                            <a @click="addMarker">
                                <a-icon type="poweroff" />
                                <div>添加标记</div>
                            </a>
                            <a @click="subMarker">
                                <a-icon type="poweroff" />
                                <div>删除标记</div>
                            </a>
                            <a @click="cleanMarkers">
                                <a-icon type="poweroff" />
                                <div>清空标记</div>
                            </a>
                        </div>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <!-- 顶部搜索 end -->
        <div style="width:100%;padding:2%;">
            <gpsRTMS ref="gpsRTMS" :height="800"></gpsRTMS>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            timer: "", //定时器
            operFlag: true,
            tableSearch: {
                licenceNumber: "皖AA9B63"
            }
        };
    },
    methods: {
        /**
         * 监控
         */
        handleMonitor() {
            this.operFlag = !this.operFlag;
            this.$refs.gpsRTMS.realtimePosition({
                licenceNumbers: [this.tableSearch.licenceNumber]
            });
            this.timer = setInterval(() => {
                this.$refs.gpsRTMS.realtimePosition({
                    licenceNumbers: [this.tableSearch.licenceNumber]
                });
            }, 5000);
        },
        /**
         * 停止
         */
        handleStop() {
            this.operFlag = !this.operFlag;
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        addMarker() {
            this.$refs.gpsRTMS.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.gpsRTMS.subMarker([
                {
                    id: 1
                }
            ]);
        },
        cleanMarkers() {
            this.$refs.gpsRTMS.cleanMarkers();
        }
    }
};
</script>
<style scoped lang="less">
.oper {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: space-around;
    font-size: 20px;

    div {
        font-size: 12px;
    }
}
</style>
