<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="我的" backgroundColor="transparent" :border="false">
		</uni-nav-bar>
		<scroll-view class="page" scroll-y>
			<view class="topBox">
				<view class="name">
					<image src="/static/propertyImgs/touxiang.jpg" class="img" />
					<span style="padding: 5rpx 5rpx;display: flex;flex-direction: column;line-height: 30px;">
						<span style="font-size: 18px;font-weight: 600;">
							{{loginName}}
						</span>
						<span style="font-size: 13px;color:#666666;">
							{{phoneNum}}
						</span>
					</span>
				</view>
			</view>
			<view class="contentBox">
				<div class="page-container">
					<view class="list-container">
						<view class="list-item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
							<image :src="item.icon" class="item-icon" />
							<view class="item-content">
								<text class="item-title">{{ item.title }}</text>
								<span class="item-desc" v-if="item.desc"><span
										style="align-self: flex-end;font-size: 12px;vertical-align: baseline;">{{ item.desc }}</span></span>
							</view>
							<view class="item-arrow"></view>
							<!-- <image src="/static/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
						</view>
					</view>

				</div>


			</view>
		</scroll-view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},
		computed: {

		},

		created() {

		},
		onShow() {

		},
		onLoad() {

		},
		mounted() {},
		data() {
			return {
				loginName: "wangh",
				phoneNum: '156*****1212',
				list: [{
						icon: "/static/propertyImgs/house.png",
						title: "我的房屋"
					},
					{
						icon: "/static/propertyImgs/user.png",
						title: "住户管理",
						// desc: "您可以在这里添加家人、朋友、租客~"
					},
					{
						icon: "/static/propertyImgs/parking.png",
						title: "我的车位"
					},
					{
						icon: "/static/propertyImgs/car.png",
						title: "我的车辆"
					},
					{
						icon: "/static/propertyImgs/setting.png",
						title: "设置"
					}
				]

			}
		},


		methods: {
			onItemClick(item) {
				if (item.title == '我的房屋') {
					uni.redirectTo({
						url: '/pages/my/myHouseIndex',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.title == '住户管理') {
					// uni.redirectTo({
					// 	url: '/pages/my/changePwd',
					// 	success: res => {},
					// 	fail: () => {},
					// 	complete: () => {}
					// });
				} else if (item.title == '我的车位') {
					uni.redirectTo({
						url: '/pages/my/myParkingSpaceIndex',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.title == '我的车辆') {
					uni.redirectTo({
						url: '/pages/my/myCarIndex',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.title == '设置') {
					this.goSetting()
				}
			},
			goSetting() {
				uni.redirectTo({
					url: '/pages/my/settingIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		},


	}
</script>
<style lang="scss">
	page {
		// background: #fff;
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}
</style>
<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 50px);

		.topBox {
			width: 100%;
			padding: 10px 0px;
			position: relative;
			// background-color: #1A75FF;

			.titleBox {
				width: 100%;

				position: relative;

				.title {
					font-size: 18px;
					line-height: 40px;
					text-align: center;
					font-weight: 500;
				}

				.settingImg {
					width: 24px;
					height: 24px;
					top: 8px;
					right: 0px;

				}
			}

			.img {
				width: 60px;
				height: 60px;
				margin-right: 10rpx;
				border-radius: 50%;
			}

			.name {

				bottom: 15px;
				left: 15px;
				display: flex;
				align-items: center;


			}
		}

		.contentBox {

			position: relative;
		}


	}

	.contentStyle {}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
	}
</style>
<style scoped>
	.list-container {}

	.status-bar {
		width: 100vw;
		height: 46px;
	}

	.list-item {
		display: flex;
		align-items: center;
		/* background: #fff; */
		padding: 10px 3px;
		border-radius: 8rpx;
		/* border-bottom: 1px solid #f2f2f2; */
		/* margin-bottom: 10rpx; */
	}

	.item-icon {
		width: 42px;
		height: 42px;
		/* margin-right: 20rpx; */
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-title {
		font-size: 16px;
		/* color: #333; */
		font-weight: 400;
		margin: 5px 10px;
		/* margin-bottom: 6rpx; */
	}

	.item-desc {
		font-size: 12px;
		color: #b5b5b5;
		white-space: nowrap;
		/* 强制不换行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;


	}

	.item-arrow {
		width: 8px;
		height: 8px;
		border-right: 3rpx solid #999999;
		border-bottom: 3rpx solid #999999;
		transform: rotate(-45deg);
		margin-right: 5px;
	}
</style>