<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
		:footerSets="{height:120, zIndex:100, bg:'none'}">
		<view slot="gBody" :style="appThemeStyle"
			style="background: linear-gradient(180deg, rgba(255,255,255,0)0%,rgba(249, 238, 248, 1.0) 100%);height: 100vh;">
			<view style="position: relative;">
				<view class="a" style="width: 100%; height: 350rpx;  z-index: 1;">
					<image src="../../static/3334.png" style="width: 100%; height: 300rpx;"></image>
				</view>
				<view class="b"
					style="position: absolute; top: 60rpx; left: 0; width: 100%; height: 100px;  z-index: 0;padding: 0 10rpx;">
					<view style="padding: 10rpx;border-radius: 10rpx;display: flex;justify-content: space-between;"
						v-if="isLogin">
						<view style="display: flex;width: 60%;">
							<view style="margin-right: 20rpx;">
								<image :src="userInfo.avatar_url"
									style="width: 120rpx;height: 120rpx;border-radius: 50%;border: 5rpx solid #633981;">
								</image>
							</view>
							<view style="line-height: 60rpx;font-weight: bold;">
								<view style="font-size: 34rpx;color: #fff;">{{ userInfo.nick_name }}</view>
								<view style="color: #fff;">{{ userInfo.mobile }}</view>
							</view>
						</view>
						<view style="display: flex;justify-content: center;align-items: center;">



							<view style="display: flex;justify-content: center;align-items: center;">
								<view @click="onSettled" v-if="userInfo.is_info == 0"
									style="display: flex; padding: 15rpx 35rpx;background: linear-gradient(to top, #0E001F, #7B0373 );color: #fff;font-size: 24rpx;border-radius: 30rpx;">
									<view>商家入驻</view>
									<view class="arrow-right">
										<image src="../../static/right.png"></image>
									</view>
								</view>

								<view v-if="userInfo.is_info == 1 " @click="wddp"
									style="display: flex; padding: 15rpx 35rpx;background: linear-gradient(to top, #0E001F, #7B0373 );color: #fff;font-size: 24rpx;border-radius: 30rpx;">

									<view>我的店铺</view>
									<view class="arrow-right">
										<image src="../../static/right.png"></image>
									</view>
								</view>


							</view>
						</view>
					</view>
					<view style="padding: 10rpx;border-radius: 10rpx;display: flex;" v-else @click="handleLogin">

						<view style="margin-right: 20rpx;">
							<avatar-image :width="120" style="border: 5rpx solid #633981;border-radius: 50%;" />
						</view>
						<view style="line-height: 60rpx;width: 420rpx;font-weight: bold;">
							<view style="font-size: 34rpx;color: #fff;">未登录</view>
							<view style="color: #fff;">点击登录账号</view>
						</view>
						<view style="display: flex;justify-content: center;align-items: center;">
							<view
								style="padding: 10rpx 20rpx;background: linear-gradient(to top, #0E001F, #7B0373 );color: #fff;font-size: 24rpx;border-radius: 30rpx;">
								商家入驻
							</view>

						</view>
					</view>
				</view>
			</view>


			<view class="gui-list  gui-padding-x" style="padding: 0 20rpx;">
			<!-- 	<button class="btn-normal" open-type="contact" @click="zaixiankefu">
					<view class="gui-list-items">
						<image src="../../static/zxkfzs.png" style="width: 35rpx;height: 35rpx;"></image>
						<view class="gui-list-body gui-border-b" style="padding: 40rpx 0;">
							<view class="gui-list-title">
								<text class="gui-list-title-text" style="font-size: 18px;">在线客服助手</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</button> -->
			<!-- 	<view class="gui-list-items">
					<image src="../../static/zskftd.png" style="width: 35rpx;height: 35rpx;"></image>
					<view class="gui-list-body gui-border-b" style="padding: 40rpx 0;">
						<view class="gui-list-title">
							<text class="gui-list-title-text" style="font-size: 18px;">专属客服通道</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view> -->
	<view class="gui-list-items" @click="handleService('/pagesNew/order/index')">
					<image src="../../static/yhfwxy.png" style="width: 35rpx;height: 35rpx;"></image>
					<view class="gui-list-body gui-border-b" style="padding: 40rpx 0;">
						<view class="gui-list-title">
							<text class="gui-list-title-text" style="font-size: 18px;">订单列表</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
				<view class="gui-list-items" @click="handleService('/pages/dealer/index')">
					<image src="../../static/yqsjrz.png" style="width: 35rpx;height: 35rpx;"></image>
					<view class="gui-list-body gui-border-b" style="padding: 40rpx 0;">
						<view class="gui-list-title">
							<text class="gui-list-title-text" style="font-size: 18px;">邀请商家入驻</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
				<view class="gui-list-items" @click="tiaozhuan('/pages/article/details?articleId=4')">
					<image src="../../static/yhfwxy.png" style="width: 35rpx;height: 35rpx;"></image>
					<view class="gui-list-body" style="padding: 40rpx 0;">
						<view class="gui-list-title">
							<text class="gui-list-title-text" style="font-size: 18px;">用户服务协议</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
			</view>


<!--			<view v-if="isLogin" @click="handleLogout()"-->
<!--				style="font-size: 18px;width: 90%;text-align: center;padding: 20rpx 0;text-align: center;background: linear-gradient(to top, #0E001F, #7B0373 );margin: 200rpx auto 0 ;color: #fff;border-radius: 40rpx;">-->
<!--				退出登录-->
<!--			</view>-->
		</view>
		<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end"
			style="background: linear-gradient(to top, #0E001F, #7B0373 );padding-bottom: 100rpx;">
			<view class="gui-footer-icon-buttons" @tap="navChang(0)" style="padding-bottom: 30rpx;;text-align: center;">
				<view class="tab">
					<image src="../../static/sy.png" mode="widthFix"></image>
				</view>
				<view>
					首页
				</view>
			</view>

			<view class="gui-footer-icon-buttons" @tap="navChang(1)" style="padding-bottom: 30rpx;;text-align: center;">
				<view class="tab">
					<image src="../../static/dd.png" mode="widthFix"></image>
				</view>
				<view>
					订单
				</view>
			</view>
			<view class="gui-footer-icon-buttons" @tap="navChang(2)" style="padding-bottom: 30rpx;;text-align: center;">
				<view class="tab">
					<image src="../../static/wds.png" mode="widthFix"></image>
				</view>
				<view style="color: #B32ABE;">
					我的
				</view>
			</view>
		</view>

	</gui-page>
</template>

<script>
	import store from '@/store'
	import AvatarImage from '@/components/avatar-image'
	import Recommended from '@/components/recommended'
	import {
		setCartTabBadge
	} from '@/core/app'
	import SettingKeyEnum from '@/common/enum/setting/Key'
	import SettingModel from '@/common/model/Setting'
	import * as UserApi from '@/api/user'
	import * as OrderApi from '@/api/order'
	import {
		checkLogin
	} from '@/core/app'

	// 订单操作
	const orderNavbar = [{
			id: 'all',
			name: '全部订单',
			icon: 'qpdingdan'
		},
		{
			id: 'payment',
			name: '待支付',
			icon: 'daifukuan',
			count: 0
		},
		{
			id: 'delivery',
			name: '待发货',
			icon: 'daifahuo',
			count: 0
		},
		{
			id: 'received',
			name: '待收货',
			icon: 'daishouhuo',
			count: 0
		},
	]

	/**
	 * 我的服务
	 * id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
	 */
	const service = [{
			id: 'address',
			name: '收货地址',
			icon: 'shouhuodizhi',
			type: 'link',
			url: 'pages/address/index'
		},
		{
			id: 'coupon',
			name: '领券中心',
			icon: 'lingquan',
			type: 'link',
			url: 'pages/coupon/index'
		},
		{
			id: 'myCoupon',
			name: '优惠券',
			icon: 'youhuiquan',
			type: 'link',
			url: 'pages/my-coupon/index'
		},
		{
			id: 'refund',
			name: '退换/售后',
			icon: 'shouhou',
			type: 'link',
			url: 'pages/refund/index',
			count: 0
		},
		{
			id: 'help',
			name: '我的帮助',
			icon: 'bangzhu',
			type: 'link',
			url: 'pages/help/index'
		},
		{
			id: 'contact',
			name: '在线客服',
			icon: 'kefu',
			type: 'button',
			openType: 'contact'
		},
		{
			id: 'points',
			name: '我的积分',
			icon: 'jifen',
			type: 'link',
			url: 'pages/points/log'
		},
		{
			id: 'dealer',
			name: '分销中心',
			icon: 'fenxiao',
			type: 'link',
			url: 'pages/dealer/index'
		},
		{
			id: 'groupon',
			name: '我的拼团',
			icon: 'pintuan',
			type: 'link',
			url: 'pages/groupon/index?tab=1'
		},
		{
			id: 'bargain',
			name: '我的砍价',
			icon: 'kanjia',
			type: 'link',
			url: 'pages/bargain/index?tab=1'
		},
	]

	export default {
		components: {
			AvatarImage,
			Recommended
		},
		data() {
			return {
				// 枚举类
				SettingKeyEnum,
				// 正在加载
				isLoading: true,
				// 首次加载
				isFirstload: true,
				// 是否已登录
				isLogin: false,
				// 系统设置
				setting: {},
				// 当前用户信息
				userInfo: {},
				// 账户资产
				assets: {
					balance: '--',
					points: '--',
					coupon: '--'
				},
				// 我的服务
				service,
				// 订单操作
				orderNavbar,
				// 当前用户待处理的订单数量
				todoCounts: {
					payment: 0,
					deliver: 0,
					received: 0
				},
				navCurrent: 2
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad(options) {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			this.onRefreshPage()
		},

		methods: {
			zaixiankefu() {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc6206617a5de54b2d'; // 跳转到相对路径下的网页
			},
			navChang: function(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/order/index'
					})
				}
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}

			},
			tiaozhuan(e) {
				uni.navigateTo({
					url: e
				})
			},
			wddp() {
				if (!this.isLogin) {
					this.$toast('请登录')
					return false;
				}

				uni.navigateTo({
					url: './shop/index'
				})
			},
			onSettled() {
				if (!this.isLogin) {
					this.$toast('请登录')
					return false;
				}

				uni.navigateTo({
					url: './settled/index'
				})
			},

			// 刷新页面
			onRefreshPage() {
				// 更新购物车角标
				setCartTabBadge()
				// 判断是否已登录
				this.isLogin = checkLogin()
				// 获取页面数据
				this.getPageData()
			},

			// 获取页面数据
			getPageData(callback) {
				const app = this
				app.isLoading = true
				Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets(), app.getTodoCounts()])
					.then(result => {
						app.isFirstload = false
						// 初始化我的服务数据
						app.initService()
						// 初始化订单操作数据
						app.initOrderTabbar()
						// 执行回调函数
						callback && callback()
					})
					.catch(err => console.log('catch', err))
					.finally(() => {
						app.isLoading = false
					})
			},

			// 初始化我的服务数据
			initService() {
				const app = this
				const newService = []
				service.forEach(item => {
					// 默认开启
					item.enabled = true
					// 我的积分
					if (item.id === 'points') {
						item.name = '我的' + app.setting[SettingKeyEnum.POINTS.value].points_name
					}
					// 是否显示分销中心
					if (item.id === 'dealer' && !app.setting._other.isEnabledDealer) {
						item.enabled = false
					}
					// 数据角标
					if (item.count != undefined) {
						item.count = app.todoCounts[item.id]
					}
					newService.push(item)
				})
				app.service = newService
			},

			// 初始化订单操作数据
			initOrderTabbar() {
				const app = this
				const newOrderNavbar = []
				orderNavbar.forEach(item => {
					if (item.count != undefined) {
						item.count = app.todoCounts[item.id]
					}
					newOrderNavbar.push(item)
				})
				app.orderNavbar = newOrderNavbar
			},

			// 获取商城设置
			getSetting() {
				const app = this
				return new Promise((resolve, reject) => {
					SettingModel.data()
						.then(setting => {
							app.setting = setting
							resolve(setting)
						}).catch(reject)
				})
			},

			// 获取当前用户信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.info({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 获取账户资产
			getUserAssets() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.assets({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.assets = result.data.assets
							resolve(app.assets)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 获取当前用户待处理的订单数量
			getTodoCounts() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : OrderApi.todoCounts({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.todoCounts = result.data.counts
							resolve(app.todoCounts)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 跳转到登录页
			handleLogin() {
				!this.isLogin && this.$navTo('pages/login/index')
			},

			// 跳转到绑定手机号页面
			handleBindMobile() {
				this.$navTo('pages/user/bind/index')
			},

			// 退出登录
			handleLogout() {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => app.onRefreshPage())
						}
					}
				})
			},

			// 跳转到钱包页面
			onTargetWallet() {
				this.$navTo('pages/wallet/index')
			},

			// 跳转到订单页
			onTargetOrder(item) {
				this.$navTo('pages/order/index', {
					dataType: item.id
				})
			},

			// 跳转到我的积分页面
			onTargetPoints() {
				this.$navTo('pages/points/log')
			},

			// 跳转到我的优惠券页
			onTargetMyCoupon() {
				this.$navTo('pages/my-coupon/index')
			},

			// 跳转到服务页面
			handleService(url) {
				uni.navigateTo({
					url: url
				})
			},

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},


	}
</script>

<style>
	page{
		background: #F8EEF7;
	}
	.arrow-right {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 10rpx;
	}

	.arrow-right image {
		width: 12rpx;
		height: 15rpx;
	}

	.gui-border-b {
		border-bottom: 4rpx solid #F1F2F3;
	}

	.gui-color-gray {
		color: #CCBBCC !important;
		font-size: 60rpx !important;
	}

	.gui-footer-icon-buttons {
		color: #FFF;
		width: 130rpx;
		// height: 80rpx;
		padding: 20rpx 10rpx 10rpx;
		flex: 1;
		position: relative;
		margin: 0;
		// background-color: #F8F8F8;
	}

	.tab image {
		width: 50rpx;
		height: 60rpx;
	}

	.gui-footer-buttons-ab {
		position: absolute;
		z-index: 101;
		left: 325rpx;
		top: 0rpx;
		width: 110rpx;
		height: 150rpx;
	}

	.gui-footer-buttons-ab-icon {
		width: 110rpx;
		height: 110rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 68rpx;
		background-color: #F7F8FA;
		border-radius: 100rpx;
	}
</style>