<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 style="font-size: 28rpx;">{{item.title}}</text>
					</view>
					<view class="iconBox">
						<view class="" v-if="item.isType == 'text'">
							<text style="font-size: 28rpx;">{{item.contentType}}</text>
						</view>
						<i v-else class="iconfont icon-youjiantou iconStyle"></i>
					</view>
				</view>
			</view>
		</view>
		<restrictedTip
		ref="restrictedOrCanelTip"
		:showCode="false"
		confirmText="知道了"
		content="您已解约，无需重复操作"
		@confirm="$refs.restrictedOrCanelTip.close()"
		/>
	</view>
</template>

<script>
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue';
	export default {
		props: {
			menuList: {
				type: Array
			}
		},
		components:{
			restrictedTip
		},
		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.isJump) {
							this.$refs.restrictedOrCanelTip.open()
							
							return
						}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>
