<template>

	<view>
		<uni-nav-bar fixed="true" backgroundColor="#F8F8F8" rightIcon="more-filled" title="用户中心"
			@clickRight="$refs.popup.open('bottom')" />

		<view class="header-content">
			<image class="header-logo-img" src="@/static/img/ccdg.png"></image>
			<view class="header-info">
				<view class="header-tip">{{name}}</view>
				<view class="header-name">{{addr}}</view>
			</view>
		</view>
		<view class="panel" v-for="(list,i1) in navList" :class="{'panel-top':i1>0}" :key="i1">
			<view v-for="(item,i2) in list" class="panel-item" :class="{'panel-item-bottom':i2<list.length-1}" :key="i2"
				:data-to="item.to" @click="menuNavTo">
				<text class="panel-text">{{item.name}}</text>
				<uni-icons type="forward" size="14" color="#d2d2d2"></uni-icons>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" class="popup">
			<view class="popup-content">
				<view class="popup-btn">是否退出帐号？</view>
				<view class="popup-btn popup-btn1" @click="logout">去意已决</view>
				<view class="popup-btn popup-btn2" @click="$refs.popup.close()">再想想</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navList: [
					[{
						name: '宣传设置',
						to: '/center/adv'
					}, {
						name: '添加子账号',
						to: ''
					}, {
						name: '分享给好友',
						to: '/center/share'
					}],
					[{
						name: '联系客服',
						to: ''
					}, {
						name: '提建议',
						to: '/center/suggest'
					}, {
						name: '缓存清理',
						to: ''
					}]
				],
				name: '彩店名称',
				addr: ''
			}
		},
		async onLoad(e) {
			const res = await uni.$u.request.graphql({
				name: 'lottery_shop_get_my_shop_info'
			})

			if (!(res && res.length > 0)) return
			const data = res[0]
			this.name = data.name
			this.addr = data.addr
		},
		methods: {
			menuNavTo(e) {
				const url = e.target.dataset.to
				console.log(url)
				if (!url) return
				uni.navigateTo({
					url
				})
			},
			async logout() {
				await uni.$u.request.graphql({
					type: 'mutation',
					name: 'ydn_logout'
				})

				uni.redirectTo({
					url: `/`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.header-content {
		background-color: #D23338;
		width: 100%;
		height: 77px;
		display: flex;
	}

	.header-logo-img {
		margin: 16px;
		width: 45px;
		height: 45px;
		border-radius: 45px;
		background-color: #FFFFFF;
	}

	.header-info {
		font-size: 16px;
		color: #FFFFFF;
		margin-top: 20px;
	}

	.header-name {
		font-size: 12px;
	}

	.panel {
		font-size: 12px;
	}

	.panel-item {
		padding: 10px 20px;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.panel-item-bottom {
		border-bottom: solid 1px #F5F5F5;
	}

	.panel-text {
		color: #000;
		word-wrap: break-word;
	}

	.panel-top {
		margin-top: 12px;
	}

	.popup {
		z-index: 9999;
	}

	.popup-content {
		background-color: #FFFFFF;
		min-height: 120px;
		display: flex;
		flex-direction: column;
	}

	.popup-btn {
		text-align: center;
		height: 38px;
		line-height: 38px;
		font-size: 18px;
		color: #101010;
	}

	.popup-btn1 {
		font-size: 14px;
		color: #666666;
	}

	.popup-btn2 {
		font-size: 14px;
		color: #F44336;
	}
</style>