<template>
	<view class="content">
		<uni-nav-bar title=" " statusBar="true">
			<view class="navbar_view">
				<image class="navbar_image" src="../../static/images/logo.png"></image>
			</view>
		</uni-nav-bar>

		<view class="location_view">
			<image class="location_view_image" src="../../static/c1.png"></image>
			<text class="location_view_address" v-model="address" id="location">{{address}}</text>
		</view>

		<view>
			<uni-card title="本地服务" isShadow="true">
				<uni-grid class="services" column="4"  @change="gridClicked" borderColor="#FFFFFF">
					<uni-grid-item v-for="item in servicesList" :index="item.id">
						<image class="serviceimage" :src="item.url"> </image>
						<text class="servicetitle"> {{item.title}}</text>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
			<uni-card title="本地商城" isShadow="true">
				
			</uni-card>
			
			<uni-card>
			<view class="page-section-spacing">
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
					<swiper-item v-for="(item , index) in banners" :key="index">
						<image :src="item.img" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			</uni-card>

		</view>

		<!-- 选项卡 -->
		<view>
			<scroll-view scroll-x="true" class="tab-h" v-bind:scroll-into-view="scroll_into"
				v-bind:scroll-with-animation="true">
				<view v-for="(item, index) in tab_bar" class="tab-item"
					v-bind:class="current_tab==index ? 'tab-bar-active' : ''" v-bind:key="index"
					v-bind:data-current="index" v-bind:id="item.id" v-on:click="change_tab">{{item.tit}}</view>
			</scroll-view>
			<view class="hr"></view>
			<swiper class="card-swiper" v-bind:current="current_tab" duration="300" @change="change_swiper">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">D</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">E</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">F</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">G</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">H</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">I</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">J</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">K</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">L</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-red">M</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import QQMapWX from "../../third/qqmap-wx-jssdk1/qqmap-wx-jssdk.min.js"
	
	export default {
		data() {
			return {
				address: "正在获取当前位置...",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 当前选中tab索引
				current_tab: 0,
				// 当前滚动条距离左边的位置
				scroll_left: 0,
				// 当前滚动条滚动到id位置
				scroll_into: '',
				// 屏幕宽度
				screen_width: 0,
				tab_bar: [],
				banners: [],
				servicesList:[]
			}
		},
	
		onLoad() {
			// 首次获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					this.screen_width = res.screenWidth
				}
			});
	
			this.getServicesList();
	
			this.getBannersFunc();
	
			this.getCategorysFunc();
			
		},
	
		onShow() {
			// 腾讯地图Api
			const qqmapsdk = new QQMapWX({
				key: "HHRBZ-7UME2-5DXUN-CS73X-SNHDH-XVBEH"
			});
	
			let that = this;
			// 腾讯地图Api
			uni.getLocation({
				type: "wgs84", //  wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
				success: res => {
					console.log(res.latitude, res.longitude)
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: function(res) {
							console.log(res);
							that.address = res.result.address;
						},
						fail: function(res) {
							that.address = "获取当前位置失败";
							console.log(res);
						},
						complete: function(res) {
							//console.log(res);
						}
					});
				},
	
			});
		},
	
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 点击tabbar事件
			change_tab(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.run_tab(index)
			},
			// swiper滑动事件
			change_swiper(e) {
				console.log('你啥时候执行啊', e)
				let index = e.target.current || e.detail.current;
				this.run_tab(index)
			},
			// 执行整个tab事件
			run_tab(index) {
				// 记录当前滑动的位置
				this.current_tab = index
				// 如果点击了第4个以后的,滚动条向右移动屏幕的宽度
				this.scroll_into = this.tab_bar[index].id
			},
			
			getServicesList() {
				this.servicesList = [{"id":"1", "url":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014c8d5a902d19a801219231b08ded.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712844&t=d5d6c3010dac7eb5557a8c688359536a", "title":"社区管家"},
									 {"id":"2", "url":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014c8d5a902d19a801219231b08ded.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712844&t=d5d6c3010dac7eb5557a8c688359536a", "title":"服务商"},
									 {"id":"3", "url":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014c8d5a902d19a801219231b08ded.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712844&t=d5d6c3010dac7eb5557a8c688359536a", "title":"志愿者"},
									 {"id":"4", "url":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014c8d5a902d19a801219231b08ded.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712844&t=d5d6c3010dac7eb5557a8c688359536a", "title":"套餐购买"}];
			},
			
			gridClicked(res) {
				let index = res.detail.index;
				if (index == 1) {
					uni.navigateTo({
						// url:'../社区管家/steward/steward',
						url:'../服务分类/servicesList/servicesList'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url:'../服务商/provider/provider'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url:'../志愿者/volunteer/volunteer'
					})
				} else if (index == 4) {
					uni.navigateTo({
						url:'../套餐购买/purchase/purchase'
					})
				}	
			},
	
			getBannersFunc() {
				var that = this;
				that.banners = [{
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1"
					},
					{
						"img": "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=图片&hs=2&pn=0&spn=0&di=174600&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1631582372%2C4013670020&os=3897321528%2C53942646&simid=4179469929%2C687942974&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=11&oriquery=图片&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F7330570062%2F0%26refer%3Dhttp%3A%2F%2Finews.gtimg.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1625675177%26t%3Dc718c0767ca9ef1bb0b3766b1f592d7c&fromurl=ippr_z2C%24qAzdH3FAzdH3Fetjo_z%26e3Btgjof_z%26e3Bqq_z%26e3Bv54AzdH3FwAzdH3Fdad8acalAaAXVdaa&gsm=1&islist=&querylist="
					}
				];
	
				// uni.request({
				// 	url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',
				// 	success: (res) => {
				// 		console.log(res)
	
				// 	}
				// });
			},
	
			getCategorysFunc() {
				var that = this;
				that.tab_bar = [{
						id: 'emotion',
						tit: '情感'
					},
					{
						id: 'news',
						tit: '新闻'
					},
					{
						id: 'diagrams',
						tit: '八卦'
					},
					{
						id: 'house',
						tit: '楼市'
					},
					{
						id: 'cars',
						tit: '骑车'
					},
					{
						id: 'healthy',
						tit: '健康'
					},
					{
						id: 'workplace',
						tit: '职场'
					},
					{
						id: 'all',
						tit: '全部'
					},
					{
						id: 'other',
						tit: '其他'
					},
					{
						id: 'music',
						tit: '音乐'
					},
					{
						id: 'movie',
						tit: '影视'
					},
					{
						id: 'sport',
						tit: '运动'
					},
					{
						id: 'country',
						tit: '国家'
					}
				];
	
				// uni.request({
				// 	url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',
				// 	success: (res) => {
				// 		console.log(res)
	
				// 	}
				// });
			},
	
		},
		components: {
			uniNavBar
		}
	}
	
</script>


<style>
	@import url("location.css");
</style>
