<template>
	<view class="wrap">
		<view class="stabar"></view>
		<view class="mainwrap">
		    <view class="topcont">
				<img :src="topImg"></img>
			</view>
		    <view class="banbox">
				<swiper style="height: 100%;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item, i) in swiperList" :key="i">
						<navigator style="height: 100%;" class="swiper-item">
							<img :src="item"></img>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
		    <view class="itembox">
				<span v-for="(item,i) in sceneList" :key="i"  @click="navClickHandler(item)"><img :src="item.uploadPath" class="scene-img"></image></span>
		    </view>
		    <view class="middleContent" v-if="showTitle">
			     <view v-html="content"></view>
		    </view>
		  </view>
		<view class="footbox">
			<tabbar :page="page"></tabbar>
		</view>
		
		
		<!-- <view class="index-background">
			<image :src="topImg"></image>
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<navigator class="swiper-item">
					<image :src="item"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="scene-list">
			<view class="scene-item" v-for="(item,i) in sceneList" :key="i"  @click="navClickHandler(item)">
				<image :src="item" class="scene-img"></image>
			</view>
		</view>
		
		<tabbar :page="page"></tabbar> -->
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue";
	import { mapMutations, mapState } from 'vuex'
	export default {
		
		data() {
			return {
				page: "",
				//顶部图片
				topImg: "",
				leftImg: "",
				rightImg: "",
				//轮播图数据列表
				swiperList: [],
				//场景入口
				sceneList: [],
				x:0,
				showTitle:true,
				y:0,
				content:""
			};
		},
		computed: {
		  ...mapState('m_user', ['token'])
		},
		onLoad(options) {
			this.checkLogin();
			if (this.token != "") {
				this.getSwiperList();
				this.getLocation();
				this.getContent();
			    this.timer = setTimeout(() => {
			    	this.showTitle = false
			    	clearTimeout(this.timer)
			    }, 5000)	
			}
		},
		onShow() {
			this.page= "home"
			if (this.token != "") {
				this.getSwiperList();
			}
		},
		onPullDownRefresh() {
			this.getSwiperList();
		},
		methods: {

			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll',{page:"home"})
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item => {
					item.uploadPath =  uni.$http.baseUrl + item.uploadPath
					if (item.position === "top") {
						this.topImg = item.uploadPath
					} else if (item.position.indexOf("banner") !=-1) {
						this.swiperList.push(item.uploadPath)
					} else if (item.position.indexOf("bottom-left") !=-1) {
						const obj = {uploadPath:item.uploadPath,isOpen:item.status}
						this.sceneList[0] = obj
					}else if (item.position.indexOf("bottom-right-top") !=-1){
						const obj = {uploadPath:item.uploadPath,isOpen:item.status}
						this.sceneList[1] = obj
					}
				})

				// uni.$showMsg('数据请求成功！')
			},
			async getContent() {
				
				const {
					data: res
				} = await uni.$http.post('/small/project/text/listAll',{type:3})
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item=>{
					this.content = item.content
		
				})
			},
			navClickHandler(item) {
			  uni.navigateTo({
			    url: '/subpkg/list/list?isOpen='+item.isOpen
			  })
			},
			checkLogin() {
			   if(this.token === "") {
			      uni.reLaunch({
			        url: '/subpkg/login/login',
			    })
			   }
			},
		    getLocation () {
			      let that = this
			      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
			      uni.getSetting({
			        success (res) {
			          console.log(res)
			
			          // 如果没有授权
			          if (!res.authSetting['scope.userLocation']) {
			            // 则拉起授权窗口
			            uni.authorize({
			              scope: 'scope.userLocation',
			              success () {
			                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
			                uni.getLocation({
			                  type: 'wgs84',
			                  success: function (res) {
			                    that.x = res.longitude
			                    that.y = res.latitude
			                    console.log(res)
			                    console.log('当前位置的经度：' + res.longitude)
			                    console.log('当前位置的纬度：' + res.latitude)
			                    // uni.showToast({
			                    //   title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
			                    //   icon: 'none'
			                    // })
			                  }, fail (error) {
			                    console.log('失败', error)
			                  }
			                })
			              },
			              fail (error) {
			                //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
			                console.log('拒绝授权', error)
			
			                uni.showModal({
			                  title: '提示',
			                  content: '若点击不授权，将无法使用位置功能',
			                  cancelText: '不授权',
			                  cancelColor: '#999',
			                  confirmText: '授权',
			                  confirmColor: '#f94218',
			                  success (res) {
			                    console.log(res)
			                    if (res.confirm) {
			                      // 选择弹框内授权
			                      uni.openSetting({
			                        success (res) {
			                          console.log(res.authSetting)
			                        }
			                      })
			                    } else if (res.cancel) {
			                      // 选择弹框内 不授权
			                      console.log('用户点击不授权')
			                    }
			                  }
			                })
			              }
			            })
			          } else {
			            // 有权限则直接获取
			            uni.getLocation({
			              type: 'wgs84',
			              success: function (res) {
			                that.x = res.longitude
			                that.y = res.latitude
			                console.log(res)
			                console.log('当前位置的经度：' + res.longitude)
			                console.log('当前位置的纬度：' + res.latitude)
			                // uni.showToast({
			                //   title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
			                //   icon: 'none'
			                // })
			              }, fail (error) {
			                uni.showToast({
			                  title: '请勿频繁调用！',
			                  icon: 'none',
			                })
			                console.log('失败', error)
			              }
			            })
			          }
			        }
			      })
			
			    }

		},
		components: {tabbar}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");
	.middleContent {
		position: absolute;
		top: 45%;
		left: 50%;
		z-index: 9999;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		padding: 30rpx;
		width: 400rpx;
		height: 300rpx;
		background-color: #c0b9e1;
		border-radius: 10px;
		opacity: 0.9;
	}
	// .index-background {
	// 	image {
	// 		height: 270rpx;
	// 		width: 100%;
	// 	}
	// }

	// swiper {
	// 	height: 630rpx;

	// 	.swiper-item,
	// 	image {
	// 		width: 100%;
	// 		height: 100%;
	// 		border-radius: 4px;
	// 	}
	// }


	// .scene-list {
	// 	display: flex;
	// 	justify-content: space-around;
	// 	margin: 5px 0;
	// }

	// .scene-img {
	// 	width: 358rpx;
	// 	height: 290rpx;
	// 	border-radius: 8px;
	// }
</style>