<template>
	<view class="content">
		<view class="store u-flex u-row-between u-p-32">
			<view class="flex1 u-line-1">
				<view class="lg bold-400 u-flex">
					<navigator class="u-flex" url="/pages/store/choose_store" hover-class="none">
						MEET轻食店
						<u-icon name="arrow-right" size="28" class="right-icon"></u-icon>
					</navigator>
				</view>
				<view class="u-m-t-8 u-line-1"> 
					<navigator class="u-flex " url="/bundle/pages/address/address?type=1" hover-class="none">
						<u-icon name="map" size="32"></u-icon>
						<view class="u-line-1">
							{{userAddress || '请选择收货地址'}}
						</view>
					</navigator>
				</view>
			</view>
			<view>
				<u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">签到</u-button>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper u-relative">
			<u-swiper height="524" :list="adList" border-radius="0"></u-swiper>
			<view class="balance bg-white u-flex">
				<view>
					<navigator class="u-flex u-row-center" url="/pages/my/wallet" hover-class="none">
						<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
						<view class="u-m-l-60 u-text-center">
							<view class="nr">{{userInfo.user_money || 0.00}}</view>
							<view class="text-default xs">余额</view>
						</view>
					</navigator>
				</view>
				
				<view>
					<navigator class="u-flex u-row-center" url="/bundle/pages/points/points" hover-class="none">
						<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
						<view class="u-m-l-60 u-text-center">
							<view class="nr">{{ userInfo.user_integral || 0}}</view>
							<view class="text-default xs">积分</view>
						</view>
					</navigator>
				</view>
				
				<view>
					<navigator class="u-flex u-row-center" url="/bundle/pages/coupon/coupon" hover-class="none">
						<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
						<view class="u-m-l-60 u-text-center">
							<view class="nr">{{ userInfo.coupon || 0}}</view>
							<view class="text-default xs u-text-center">券</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		
		<!-- 下单 -->
		<view class="order u-flex u-row-between">
			<view class="bg-white u-text-center">
				<navigator url="/pages/store/store?type=1" hover-class="none">
					<view class="text-default xxl">预约下单</view>
					<view class="xs text-999">极速送达更便捷</view>
					<view class="u-flex u-row-center">
						<u-image :src="cloudPath + 'img/icon_p_order.png'" width="132" height="132"></u-image>
					</view>
				</navigator>
			</view>
			<view class="bg-white u-text-center">
				<navigator url="/pages/store/store?type=2" hover-class="none">
					<view class="text-default xxl">现在点单</view>
					<view class="xs text-999">下单更便捷</view>
					<view class="u-flex u-row-center">
						<u-image :src="cloudPath + 'img/icon_order.png'" width="132" height="133" mode="aspectFit"></u-image>
					</view>
				</navigator>
			</view>
		</view>
		
		<!-- 活动图 -->
		<view class="mx20 u-m-b-64">
			<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import { getConfig } from '@/api/app'
	import { getUser, getDefaultAddress, getOneAddress } from '@/api/user'
	import { getAdList } from '@/api/store'
	import { setTabbar } from '@/utils/tools'
	export default {
		data() {
			return {
				adList: [],
				userAddress: '',
				addressId: 0
			}
		},
		onLoad() {
			setTabbar()
			this.getUserAddress()

			//更改收货地址
			uni.$on('selectaddress', (params) => {
				this.addressId = params.id
				this.updateUserAddress()
			})

			this.getAdListFun()
		},
		onShow() {
			this.getUser()
			this.getCartNum()
		},
		onUnload() {
			// 取消全局监听
			uni.$off(['selectaddress'])
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),

			// 获取广告轮播图
			async getAdListFun() {
				const { code, data } = await getAdList({
					pid: 1,
					client: 1
				})

				if (code) {
					this.adList = data
				}
			},

			// 获取默认物流地址
			getUserAddress() {
				getDefaultAddress().then(res => {
					if (res.code == 1) {
						const {id, province, city, district, address} = res.data
						this.userAddress = `${province} ${city} ${district} ${address}`
						this.addressId = id
					}
				})
			},

			// 用户切换物流地址
			updateUserAddress() {
				getOneAddress(this.addressId).then(res => {
					if (res.code == 1) {
						const {id, province, city, district, address} = res.data
						this.userAddress = `${province} ${city} ${district} ${address}`
						this.addressId = id
					}
				})
			},

			// 签到
			signin() {
				uni.navigateTo({
					url: '/pages/signin/signin'
				})
			}
		},
		computed: {
			...mapGetters(['cartNum', 'userInfo', 'inviteCode', 'appConfig', 'cityInfo']),
			statusBar() {
				return uni.getSystemInfoSync().statusBarHeight + 10
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.store {
			background-color: #FFFAFB;
			height: 108rpx;
			
			.right-icon {
				font-weight: bold;
				margin-left: 4rpx;
			}
		}
		
		.swiper {
			height: 544rpx;
			box-sizing: border-box;
			width: 100%;
			
			.balance {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 20rpx;
				height: 140rpx;
				border-radius: 16rpx;
		
				
				& > view {
					width: 33.33%;
				}
			}
		}
		
		.order {
			margin: 30rpx 20rpx;
			& > view {
				border-radius: 16rpx;
				padding: 40rpx 86rpx;
			}
		}
	}
</style>
