<template>
	<view class="content">
		<my-baseNar />
		<view class="myInfoInit">
			<view class="myInfoImg">
				<image class="init_image" :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="myInfoInitInfo">
				<view class="myInfoInitInfoTop">
					<view class="myInfoInitInfoTop-name">
						{{userInfo.store_name}}
					</view>
					<view class="myInfoInitInfoTop-back">
						<!-- <u-icon name="arrow-right"></u-icon><span>编辑</span> -->
					</view>
				</view>
				<view class="myInfoInitInfoBottom">
					{{userInfo.phone}}
				</view>
			</view>
		</view>
		<view class="myTab">
			<u-cell-group :border="false">
				<u-cell :icon="item.iconName" v-for="(item,index) in myCellList" :border="false" :key="index"
					:title="item.text" @click="tabChange(item.pagePath)" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
		<view @click="userLoginout" class="loginOutBtn">
			退出登录
		</view>
		<u-toast ref="uToast"></u-toast>
		<my-tabbar :currentTab='1' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myCellList: [{
						"pagePath": "/pageSub/pages/balance/balance",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_wdye.png",
						"text": "我的佣金",
						"name": "balance"
					},
					{
						"pagePath": "/pageSub/pages/MyUsers/MyUsers",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_wdhy.png",
						"text": "我的用户",
						"name": "MyUsers"
					},
					{
						"pagePath": "/pageSub/pages/mybankList/mybankList",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/bankicon.png",
						"text": "我的银行卡",
						"name": "mybankList"
					}
				],
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/merchant-info', 'GET', {}).then(res => {
					console.log('请求成功')
					this.userInfo = res.data;
					if (res.data.role_id == 3) {
						this.myCellList = [{
								"pagePath": "/pageSub/pages/balance/balance",
								"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_wdye.png",
								"text": "我的佣金",
								"name": "balance"
							},
							{
								"pagePath": "/pageSub/pages/mybankList/mybankList",
								"iconName": "http://amy.yyinhong.cn/uploads/wximg/bankicon.png",
								"text": "我的银行卡",
								"name": "mybankList"
							}
						]
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			tabChange(res) {
				uni.navigateTo({
					url: res
				})
			},
			userLoginout() {
				this.$request('/logout', 'GET', {}).then(res => {
					uni.clearStorageSync();
					uni.showToast({
						icon: 'success',
						title: '退出登录成功',
						complete() {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.myTab {
		width: calc(100% - 80rpx);
		min-height: 104rpx;
		margin: 0 40rpx;
		// margin-top: 20rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		padding: 15rpx 0;
	}

	.myInfoInit {
		margin: 30rpx;
		width: calc(100% - 60rpx);
		padding: 30rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;

		.myInfoImg {
			height: 120rpx;
			width: 120rpx;
			background-color: #ffffff;
			border-radius: 120rpx;
			overflow: hidden;
		}

		.myInfoInitInfo {
			flex: 1;
			margin-left: 20rpx;
			height: 120rpx;

			.myInfoInitInfoTop {
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.myInfoInitInfoTop-name {
					width: 70%;
					font-size: 40rpx;
					color: #333333;
					font-weight: 600;
				}

				.myInfoInitInfoTop-back {
					width: 30%;
					font-size: 24rpx;
					color: #333333;
					font-weight: 600;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
				}
			}

			.myInfoInitInfoBottom {
				height: 60rpx;
				line-height: 60rpx;
				width: 100%;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}

	.loginOutBtn {
		width: calc(100% - 100rpx);
		margin: 0 50rpx;
		position: fixed;
		bottom: 244rpx;
		height: 90rpx;
		color: #ffffff;
		text-align: center;
		letter-spacing: 5rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		background-color: #FF4D4F;
		border-radius: 90rpx;
	}
</style>