<template>
	<view>
		<view class="personalInfo">
			<view class="ulBox">
				<view v-for="item in menuList.filter(v=>v.isShow)" :key="item.title" @click="goDetail(item)"
					class="liBox">
					<view class="infoBox">
						<text>{{item.title}}</text>
					</view>
					<view class="iconBox">
						<view class="" v-if="item.isType == 'text'">
							<text>{{item.contentType}}</text>
						</view>
						<i v-else class="iconfont icon-youjiantou"></i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			menuList: {
				type: Array
			}
		},
		data() {
			return {}
		},
		mounted() {
		},
		methods: {
			goDetail(item) {
				if (item.isShow == true && item.isOpen == true) {
						if (item.isTips == true) {
							uni.showModal({
								title: item.title,
								content: '确定要进行' + item.title + '操作吗?',
								showCancel: true,
								success: function(res) {
									if (res.confirm) {
										uni.showToast({
											title: '操作成功',
											icon: 'none'
										});
									} else {
										console.log('已取消')
									}
								}
							});
						} else if (item.link != null) {
							uni.navigateTo({
								url: item.link
							});
						}else {
							console.log('错误抛出')
						}
				} else {
					common.errorDialog(2, '该模块正在开发中，敬请期待！', '提示');
				}
			}
		}
	}
</script>

<style lang="scss">
	.personalInfo {
		background: #fff;
		width: 95%;
		margin: 50rpx auto 0;

		.ulBox {
			padding: 20rpx;
			.liBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #E6E6E6;
				height: 92rpx;

				.infoBox {
					display: flex;
					align-items: center;

					image {
						width: 52rpx !important;
						height: 52rpx;
					}
				}
				& > view:first-child{
					position: relative;
					&::after{
						content:'';
						position: absolute;
						left: 0;
						bottom: -6rpx;
						background: linear-gradient(90deg,#FA882F, #D9D9D9);
						border-radius: 4rpx;
						height: 8rpx;
						width: 80rpx;
					}
				}
				&:last-child {
					border: none;
				}
			}
		}
	}
</style>
