<template>
	<view>
		<navbar :collapse='false' :Background='Background' :navtitle='navtitle' :navboxshow="navboxshow"
			@fatherMethod='navfatherMethod'></navbar>
		<view class="index_box">
			<image class="index_boximge" :src="userlist.background" mode="aspectFill"></image>
			<!-- #ifdef MP-WEIXIN -->
			<navigator :url="'/pages/my/setup/index'" class="index_boxone flex-between"
				:style="[{'padding-top':HeighT.customBar+'px'}]">
			<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<navigator :url="'/pages/my/setup/index'" class="index_boxone flex-between" style="padding-top:44px;">
				<!-- #endif -->
					<view class="index_boxone_one flex-start" v-if="userlist.user">
						<image :src="userlist.user.avatar" mode="aspectFill"></image>
						<view class="index_boxone_tow flex-colum-start">
							<text class="index_boxone_tow_one">{{userlist.user.nickname || "暂无昵称"}}</text>
							<text class="index_boxone_tow_tow">{{userlist.user.user_id}}</text>
						</view>
					</view>
					<u-icon name="setting" color="#fff" size="20"></u-icon>
				</navigator>
				<view class="onebox">
					<view class="onebox_one">
						<view class="onebox_one_text flex-between">
							<text>我的订单</text>
							<text @click="order(10)">查看全部</text>
						</view>
						<view class="onebox_one_one flex-around">
							<view class="flex-colum" v-for="(item,index) in userlist.user_order" :key="index"
								@click="order(index)">
								<image :src="item.img" mode="aspectFill"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="towbox flex-between">
					<view class="towbox_item flex-start" v-for="(item,index) in userlist.t_user" :key="index"
						@click="toworder(index)">
						<image :src="item.img" mode="aspectFill"></image>
						<view class="flex-colum">
							<text>{{item.name}}</text>
							<view v-if="index==0">{{item.balance}}<text>元</text></view>
							<view v-if="index==1">{{item.card_count}}<text>张</text></view>
						</view>
					</view>
				</view>
				<view class="therebox">
					<view class="therebox_item flex-between" v-for="(item,index) in userlist.list" :key="index"
						@click="mobilemobile(item)">
						<view class="flex-start">
							<image :src="item.img" mode="aspectFill"></image>
							<text>{{item.name}}</text>
						</view>
						<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
					</view>
				</view>
		</view>

		<bottombbar :valuebbar='4'></bottombbar>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import bottombbar from '@/components/bottombbar.vue'
	export default {
		components: {
			navbar,
			bottombbar
		},
		computed: {
			HeighT() {
				return this.$store.getters.is_BarHeight
			},
		},
		data() {
			return {
				navtitle: '', //名称
				navboxshow: '0', //显示
				Background: 'none',
				userlist: {
					user: {
						avatar: "https://door.sxczgkj.cn//assets/img/avatar.png",
						nickname: "超掌柜",
						user_id: 1001,
					},
					t_user: [{
						balance: "0.00",
						img: "https://door.sxczgkj.cn//apple/qb.png"
					}, {
						card_count: "0",
						img: "https://door.sxczgkj.cn//apple/kx.png"
					}],
					list: [{
						img: "https://door.sxczgkj.cn//apple/kf.png",
						mobile: "0290102212",
						name: "联系客服",
						url: ""
					}, {
						img: "https://door.sxczgkj.cn//apple/aq.png",
						name: "安全密码",
						url: "my/setup/repairpassword",
					}]
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.$store.dispatch("actionsclassification");
			this.usermy()
			this.useruserinfo()
		},
		methods: {
			async useruserinfo() {
				let res = await this.api.useruserinfo() //p判断是否完成手机号
				uni.cache.set('loginuser', res);
			},
			async mobilemobile(e) {
				switch (e.name) {
					case '联系客服':
						uni.makePhoneCall({
							phoneNumber: e.mobile //打电话
						});
						break;
					case '安全密码':

						if (uni.cache.get('loginuser').userinfo.mobile) {
							uni.pro.navigateTo(e.url)
						} else {
							uni.showModal({
								title: '提示',
								content: '确认订单需要获取您的手机号',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/my/setup/index'
										});
									} else if (res.cancel) {}
								}
							});
						}
						break;
					case '我的地址':
						uni.pro.navigateTo(e.url)
						break;
				}
			},
			async usermy() {
				let res = await this.api.usermy({
					store_id: uni.cache.get('store_id') // 判断显示哪家的作品,
				})
				this.userlist = res
				console.log(res)
			},
			threelist(e) {
				uni.pro.navigateTo('my/order/index', {
					e: e
				})
			},
			toworder(e) {
				if (e == 0) {
					uni.pro.navigateTo('my/member/memberone', e)
				} else {
					uni.pro.navigateTo('my/member/index', {
						e: e
					})
				}
			},
			order(e) {
				switch (e) {
					case 10:
						if (uni.cache.get('loginuser').style_type == 2) {
							uni.pro.navigateTo('mall/order/index', {
								e: 0
							})
						} else {
							uni.pro.navigateTo('my/order/index', {
								e: 0
							})
						}
						break;
					case 0:
						if (uni.cache.get('loginuser').style_type == 2) {
							uni.pro.navigateTo('mall/order/index', {
								e: 1
							})
						} else {
							uni.pro.navigateTo('my/order/index', {
								e: 1
							})
						}
						break;
					case 1:
						if (uni.cache.get('loginuser').style_type == 2) {
							uni.pro.navigateTo('mall/order/index', {
								e: 2
							})
						} else {
							uni.pro.navigateTo('my/order/index', {
								e: 2
							})
						}
						break;
					case 2:
						if (uni.cache.get('loginuser').style_type == 2) {
							uni.pro.navigateTo('mall/order/index', {
								e: 3
							})
						} else {
							uni.pro.navigateTo('my/order/index', {
								e: 3
							})
						}
						break;
					case 3:
						if (uni.cache.get('loginuser').style_type == 2) {
							uni.pro.navigateTo('mall/order/index', {
								e: 4
							})
						} else {
							uni.pro.navigateTo('my/order/index', {
								e: 4
							})
						}

				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.index_box {
		position: relative;
		padding: 0 32rpx;
		width: 100%;
		height: 502rpx;
		// background: url(@/static/1.png) no-repeat;
		background-size: cover;

		.index_boximge {
			z-index: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.index_boxone {
			z-index: 9;

			.index_boxone_one {
				image {
					z-index: 999;
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
				}
			}

			.index_boxone_tow {
				margin-left: 32rpx;
				height: 100rpx;
				justify-content: space-around;

				.index_boxone_tow_one {
					z-index: 9;
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.index_boxone_tow_tow {
					z-index: 9;
					font-size: 28rpx;
					font-family: Segoe UI-Regular, Segoe UI;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

		}

		.onebox {
			position: relative;
			top: 40rpx;

			.onebox_one {
				width: 100%;
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 32rpx;

				.onebox_one_text{
					width: 100%;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					text:nth-child(2){
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 500;
						color: #666;
					}
				}

				.onebox_one_one {
					margin-top: 32rpx;

					.flex-colum {
						image {
							width: 64rpx;
							height: 64rpx;
						}

						text {
							margin-top: 16rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}

		.towbox {
			margin-top: 64rpx;

			.towbox_item {
				width: 48%;
				background: #FFFFFF;
				padding: 32rpx 24rpx;
				border-radius: 12rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.flex-colum {
					width:50%;
					margin-left: 28rpx;
					align-items: flex-start;
					text {
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #999999;
					}

					view {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #333333;

						text {
							color: #333333;
							font-size: 22rpx;
						}
					}

				}
			}
		}

		.therebox {
			margin-top: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 32rpx 32rpx 32rpx;

			.therebox_item {
				padding-top: 32rpx;

				.flex-start {
					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						margin-left: 24rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}
</style>