<template>
	<view class="content">
		<u-swiper height="320" :list="imageTopList" ></u-swiper>
		<!-- 导航按钮 -->
		<view class="nav">
			<u-grid :col="4" :border="false" @click="toPage">
				<u-grid-item :index="0">
					<u-image width="90rpx" height="90rpx" src="/static/zhinan.png"></u-image>
					<view class="grid-text">回收分类</view>
				</u-grid-item>
				<u-grid-item :index="1">
					<u-image width="90rpx" height="90rpx" src="/static/liucheng.png"></u-image>
					<view class="grid-text">使用指南</view>
				</u-grid-item>
				<u-grid-item :index="2">
					<u-image width="90rpx" height="90rpx" src="/static/shouyi.png"></u-image>
					<view class="grid-text">我的投递码</view>
				</u-grid-item>
				<u-grid-item :index="3">
					<u-image width="90rpx" height="90rpx" src="/static/hexiao.png"></u-image>
					<view class="grid-text">扫一扫</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 网点 -->
		<view class="storeList">
			 <u-section title="附近的回收机" :right="false" line-color="#01c9b2" class="store-section"></u-section>
			 <view class="stores-box">
			 	<view class="stores-item" v-for="item in stationDataList" @click="viewStore(item)">
			 		<view class="item-con">
			 			<image src="/static/md-icon.png" class="item-icon"></image>
			 			<view class="s-name item-main">{{ item.name }}</view>
			 		</view>
			 		<view class="item-con">
			 			<image src="/static/dz-icon.png" class="item-icon"></image>
			 			<view class="s-address item-main">
			 				<view>{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.address }}</view>
			 				<view>
			 					<u-icon name="map-fill" color="#01c9b2" size="30"></u-icon>
			 					{{ item.distanct.distance ? (item.distanct.distance / 1000).toFixed(1) : 0 }}KM
			 					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
			 				</view>
			 			</view>
			 		</view>
			 		<view class="item-con">
			 			<image src="/static/time-icon.png" class="item-icon"></image>
			 			<view class="s-time item-main">
			 				<view>
			 					营业时间：
			 					<text v-for="(tItem, tInd) in item.deliveryTimeRuleItemList" :key="tInd">
			 						{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == item.deliveryTimeRuleItemList.length - 1 ? '' : '，' }}
			 					</text>
			 				</view>
			 			</view>
			 		</view>
			 	</view>
			 </view>
		</view>
	</view>
</template>

<script>
	import {
		getCartList,
		addGoodsToCart,
		deleteGoodsFormCart,
		updateGoodsBuyQty
	} from '@/api/shoppingCart.js'
	import {bannerList} from '@/api/banner.js'
	import {getLookUpDatas,openDevice} from '@/api/data.js'
	import {stationList} from '@/api/station.js'
	import {checkLogin} from '@/api/login.js'
	import {parseQueryString} from '@/libs/tools.js'
	export default {
		data() {
			return {
				imageTopList: [],
				stationDataList: [] ,//  附近网点列表
				hasLogin: false
			}
		},
		onLoad() {
			// 是否登录
			checkLogin().then(res => {
				console.log(res,'checkLogin')
				this.hasLogin = res.status == 200
				if(!this.hasLogin){
					this.toLoginPage()
				}
			})
			// 获取订单状态数据字典
			this.getCodeList('RUBBISH_TYPE','vuex_rubbishType')
			// 获取顶部轮播图
			this.getbannerList()
			//  获取经纬度
			this.getLocation()
			// 查询购物车列表
			this.getCartList()
			// 加入购物车
			uni.$on("addCart",item =>{
				this.addGoodToCart(item)
			})
			// 删除购物车的商品
			uni.$on("delCartGood",item => {
				this.delGoodFormCart(item)
			})
			// 更新购物车商品数量
			uni.$on("updateGoodsBuyQty",item=>{
				this.updateGoodsBuyQty(item)
			})
		},
		onShow() {
			
		},
		methods: { 
			// 获取数据字典
			getCodeList(code,key) {
				getLookUpDatas({
					type: code
				}).then(res => {
					if (res.status == 200) {
						this.$u.vuex(key, res.data)
					}
				})
			},
			//  获取经纬度
			getLocation() {
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.getStationList(res.longitude, res.latitude)
					},
					fail: function(error) {
						console.log(error)
						uni.showToast({ icon: 'none', title: '定位失败' })
					}
				});
			},
			//  获取网点列表
			getStationList(lng, lat) {
				stationList({ lng: lng, lat: lat }).then(res => {
					if (res.status == 200) {
						this.stationDataList = res.data
					} else {
						this.stationDataList = []
					}
				});
			},
			// 获取banner
			getbannerList(){
				bannerList({type:'banner',location:'HOME_TOP'}).then(res=>{
					if(res.status==200){
						this.imageTopList=res.data
					}
				})
			},
			// 查询购物车
			getCartList(){
				getCartList({}).then(res => {
					console.log(res)
					if(res.status == 200){
						this.$u.vuex('vuex_cartList', res.data)
					}
				})
			},
			// 添加购物车
			addGoodToCart(item){
				addGoodsToCart(item).then(res => {
					if(res.status == 200){
						uni.showToast({
							title:"商品添加成功",
							icon:"none"
						})
						// 刷新购物车
						this.getCartList()
					}
				})
			},
			// 删除购物车
			delGoodFormCart(ids){
				uni.showLoading({
					mask: true,
					title: "删除中..."
				})
				deleteGoodsFormCart({idList:ids}).then(res => {
					if(res.status == 200){
						uni.showToast({
							title:"商品删除成功",
							icon:"none"
						})
						// 刷新购物车
						this.getCartList()
					}
					uni.hideLoading()
				})
			},
			// 更新商品数量
			updateGoodsBuyQty(item){
				uni.showLoading({
					mask: true,
					title: "更新数量中..."
				})
				updateGoodsBuyQty(item).then(res => {
					uni.hideLoading()
				})
			},
			// 更多商品
			toGoods(clsId){
				uni.navigateTo({
					url:"/pages/goods/goods?id="+clsId
				})
			},
			// 去登录
			toLoginPage(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 快速导航
			toPage(e){
				let path=[
					'/pages/userCenter/zhinan',
					'/pages/userCenter/liucheng',
					'/pages/userCenter/myCode/myCode',
					''
				]
				 
				if(e>1){
					//判断是否登录
					if(this.hasLogin){
						if(path[e]!=''){
							uni.navigateTo({
								url: path[e]
							})
						}else{
							// 核销
							this.smHx()
						}
					}else{
						this.toLoginPage()
					}
				}else{
					uni.navigateTo({
						url: path[e]
					})
				}
			},
			// 扫码核销
			smHx(){
				const _this = this
				uni.scanCode({
					success(e) {
						console.log(e)
						// 普通二维码，用户扫箱体的二维码开箱
						if(e.scanType == 'QR_CODE'){
							console.log(e.result)
							_this.openDevice(e.result)
						}
						// 小程序码，用户核销
						if(e.scanType == 'WX_CODE'){
							// uni.navigateTo({
							// 	url: '/pages/checkOut/checkOut'
							// })
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 开箱
			openDevice(data){
				let params = parseQueryString(data)
				openDevice(params).then(res => {
					console.log(res)
					if(res.status == 200){
						uni.showToast({
							icon:"none",
							title:"开启成功"
						})
					}
				})
			},
			// 查看网点
			viewStore(item){
				uni.navigateTo({
					url: '/pages/store/store?id=' + item.id + '&stationNo=' + item.stationNo
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background: url(../../static/topBg.png) no-repeat top center;
		// background-size: 100%;
		width: 100%;
		.nav {
			margin: 20upx 0;
			border-radius: 15upx;
			box-shadow: 0upx 3upx 6upx #eee;
			overflow: hidden;
			.grid-text {
				padding-top: 10upx;
			}
		}
		.storeList {
			padding: 25upx 20upx 20upx;
			.store-section {
				display: block;
				margin-bottom: 20rpx;
			}
			.stores-box {
				padding-top: 5upx;
				.stores-item {
					background: #ffffff;
					border-radius: 15upx;
					box-shadow: 0upx 3upx 6upx #eee;
					border-bottom: 1px solid #f8f8f8;
					padding: 10upx 20upx;
					margin-bottom: 20rpx;
					&:last-child {
						border: 0;
					}
					.item-con {
						display: flex;
						&:last-child {
							.item-main {
								border: none;
							}
						}
						.item-icon {
							width: 34rpx;
							height: 34rpx;
							margin-right: 10rpx;
							flex-shrink: 0;
							padding: 18rpx 0;
						}
						.item-main {
							font-size: 24rpx;
							color: #666;
							padding: 18rpx 0;
							border-bottom: 1rpx solid #f2f2f2;
							flex-grow: 1;
						}
						.s-address {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
	}
</style>
