<template>
	<view>
		<view class="top-back">
			<view @click="$util.navigateTo('/pages/my/user_info/user_info')" class="flex justify-between">
				<text v-if="name" class="head-text">您好：{{name}}</text>
				<text v-else class="head-text">登陆/注册</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="content margin-top">
			<uv-gap height="10" ></uv-gap>
			
			<view class="button-group">
				<button @click="$util.navigateTo('/pages/my/user_info/user_info')" class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #fff;" class="icon" src="@/static/img/user.png"></image>
						<text>个人资料</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
				
				<uv-divider customStyle="margin:0px;width:92%;margin:0 auto;"></uv-divider>
				
				<button class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #fff;" src="@/static/img/family.png"></image>
						<text>家庭成员</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
			</view>
			
			<view class="button-group">
				<button @click="to_ai()" class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #fff;" src="@/static/img/ai.png"></image>
						<text>AI 问诊记录</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
				
				<uv-divider customStyle="margin:0px;width:92%;margin:0 auto;"></uv-divider>
				
				<button class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #fff;" src="@/static/img/medical_box.png"></image>
						<text>病例识别记录</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
				
				<uv-divider customStyle="margin:0px;width:92%;margin:0 auto;"></uv-divider>
				
				<button @click="$util.navigateTo('/pages/BMI/BMI_history/BMI_history')" class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #fff;" src="@/static/img/bmi.png"></image>
						<text>BMI 记录</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
				
				<uv-divider customStyle="margin:0px;width:92%;margin:0 auto;"></uv-divider>
				
				<button class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #fff;" src="@/static/img/health-tip.png"></image>
						<text>健康知识收藏夹</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
			</view>
			
			<view class="button-group">
				<button open-type="share" class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<text style="margin:0 12px 0 3px;font-size: 25px;" class="cuIcon-share"></text>
						<text>分享小程序</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
				
				<uv-divider customStyle="margin:0px;width:92%;margin:0 auto;"></uv-divider>
				
				<button open-type="feedback" class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<image style="background-color: #ffffff;" src="@/static/img/feedback.png"></image>
						<text>问题反馈</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
				
				<uv-divider customStyle="margin:0px;width:92%;margin:0 auto;"></uv-divider>
				
				<button class="button-item flex justify-between">
					<view class="align-center flex justify-between">
						<text style="margin:0 12px 0 3px;font-size: 25px;" class="cuIcon-settings"></text>
						<text>设置</text>
					</view>
					<text class="cuIcon-right"></text>
				</button>
			</view>
			
			<uv-gap height="30"></uv-gap>
			<uv-divider text="我是有底线的"></uv-divider>
			
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.name = uni.getStorageSync("name");
		},
		onPullDownRefresh(){
			
		},
		data() {
			return {
				name: null,
				request: 1,
			}
		},
		methods: {	
			to_ai(){
				uni.setStorageSync('ai_history', true);
				uni.switchTab({
					url: '/pages/ai/ai'
				})
			},
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f5f5f5;
	}
	text{
		font-size: 18px;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center;    /* 垂直居中 */
	}
	image{
		margin-right: 10px;
		width: 30px;
		height: 30px;
		background-color: #ffffff;
	}

	.content {
		padding: 0 10px;
		border-radius: 25px;
		border: none;
		background-color: #f5f5f5;
	}
	.button-group{
		border: none;
		border-radius: 15px;
		width: 100%;
		background-color: #ffffff;
		margin-bottom: 15px;
		
		:first-child{
			border-radius: 15px 15px 0% 0%;
		}
		:last-child{
			border-radius:0% 0% 15px 15px;
		}
		:only-child {
		    border-radius: 15px;
		}
	}
	.button-item{
		border: 0px;
		height: 12vw;
		padding: 0 10px;
		background-color: #ffffff;
	}
	.button-item::after {
	    display: none;
	}
	.button-item:active {
		filter: brightness(80%);
		opacity: 0.5;
	}
	.header{
		width: 10vw;
		height: 10vw;
	}
	.top-back{
		padding: 5px 20px;
		height: 20vw;
		background-color: #1678ff;
		color: #fff;
		margin-bottom: -5vh;
		
		.head-text{
			letter-spacing: 2px;
			font-size: 20px;
			font-weight: 500;
		}
	}
</style>