<template>

	<view>
		<view class="header-content">
			<image class="header-logo-img" src="@/static/img/ccdg.png"></image>
			<view class="header-info">
				<view class="header-tip">彩店名称</view>
				<view class="header-name">{{data.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>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navList: [
					[{
						name: '宣传设置',
						to: '/center/adv'
					}, {
						name: '添加子账号',
						to: ''
					}, {
						name: '分享给好友',
						to: ''
					}],
					[{
						name: '联系客服',
						to: ''
					}, {
						name: '提建议',
						to: ''
					}, {
						name: '缓存清理',
						to: ''
					}]
				],
				data: {
					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.data.addr = data.addr
		},
		methods: {
			menuNavTo(e) {
				const url = e.target.dataset.to
				console.log(url)
				if (!url) return
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.header-content {
		background-color: #D23338;
		width: 100vw;
		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;
	}
</style>