<template>
	<view id="index">
		<button @click="toStart()">开始</button>
		<button @click="toEnd()">停止</button>
		<u-cell-group>
			<template v-for="(i,index) in list">
				<template v-if="i.longitude&&i.latitude">
					<u-cell :key="`col-${index}`" :title="i.longitude" :value="i.latitude" :label="i.time"></u-cell>
				</template>
				<template v-else>
					<u-cell :label="i.time"></u-cell>
				</template>
			</template>
		</u-cell-group>
		<!-- <u-row customStyle="margin-bottom: 10px;height:100vh">
      <u-col span="12" >
        {{item.longitude}} - {{item.latitude}} - {{item.time}}
      </u-col>
    </u-row> -->
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		createNamespacedHelpers
	} from 'vuex';
	export default {
		name: 'index',
		props: {},
		components: {},
		data: function() {
			return {
				latitude: '',
				longitude: '',
				list: [],
				interval: undefined,
			};
		},
		created() {},
		methods: {
			toStart() {
				this.interval = setInterval(() => this.test(), 5000);
			},
			toEnd() {
				clearInterval(this.interval);
			},
			test() {
				const _this = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success: (res) => {
						const obj = {
							latitude: res.latitude,
							longitude: res.longitude,
							time: moment().format('YYYY-MM-DD HH:mm:ss')
						};
						console.log(obj)
						_this.list.push(obj);
					},
					fail: (error) => {
						_this.list.push({
							time: error
						})
					}
				})
			},
		},
		computed: {},
	};
</script>

<style lang="less" scoped></style>
