<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="72rpx" height="72rpx" src="/static/zhinan.png"></u-image>
					<view class="grid-text">分类指南</view>
				</u-grid-item>
				<u-grid-item :index="1">
					<u-image width="72rpx" height="72rpx" src="/static/liucheng.png"></u-image>
					<view class="grid-text">投递流程</view>
				</u-grid-item>
				<u-grid-item :index="2">
					<u-image width="72rpx" height="72rpx" src="/static/shouyi.png"></u-image>
					<view class="grid-text">乐豆收益</view>
				</u-grid-item>
				<u-grid-item :index="3">
					<u-image width="72rpx" height="72rpx" 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"></u-section>
			 <view class="stores-box">
				<view class="stores-item" v-for="item in stationDataList" @click="viewStore(item)">
					<view class="s-name">
						<view>{{ item.name }}</view>
					</view>
					<view class="s-address">
						<view>
							<text>{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.address }}</text>
						</view>
						<view>
							<u-icon name="map-fill" color="#01c9b2" size="30"></u-icon>
							{{ item.distanct.distance ? (item.distanct.distance/1000).toFixed(1) : 0 }}KM
						</view>
					</view>
					<view class="s-time">
						<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>
</template>

<script>
	import {
		getCartList,
		addGoodsToCart,
		deleteGoodsFormCart,
		updateGoodsBuyQty
	} from '@/api/shoppingCart.js'
	import {bannerList} from '@/api/banner.js'
	import {
		getLookUpDatas
	} from '@/api/data.js'
	import { stationList } from '@/api/station.js'
	export default {
		data() {
			return {
				imageTopList: [],
				stationDataList: [] //  附近网点列表
			}
		},
		onLoad() {
			// 获取订单状态数据字典
			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)
			})
		},
		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:'MALL_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
				})
			},
			// 快速导航
			toPage(e){
				let path=[
					'/pages/userCenter/zhinan',
					'/pages/userCenter/liucheng',
					'/pages/userCenter/ldDetailed',
					''
				]
				if(path[e]!=''){
					uni.navigateTo({
						url: path[e]
					})
				}else{
					// 核销
					this.smHx()
				}
			},
			// 扫码核销
			smHx(){
				uni.navigateTo({
					url: '/pages/checkOut/checkOut'
				})
				return
				uni.scanCode({
					success(e) {
						console.log(e)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 查看网点
			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;
			background: #FFFFFF;
			border-radius: 15upx;
			box-shadow: 0upx 3upx 6upx #eee;
			.stores-box{
				padding-top: 5upx;
				.stores-item{
					border-bottom: 1px solid #F8F8F8;
					padding: 20upx 10upx;
					&:last-child{
						border: 0;
					}
					> view{
						padding: 10upx 0;
						display: flex;
						align-items: center;
					}
					.s-address,.s-time{
						justify-content: space-between;
						color: #666;
						font-size: 24rpx;
					}
					.s-address{
						> view{
							&:last-child{
								font-size: 24rpx;
								width: 30%;
								display: flex;
								align-items: center;
								justify-content: flex-end;
							}
						}
					}
				}
			}
		}
	}
</style>
