<!-- 我的 -->
<template>
	<view class="mine">
		<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 300rpx;"></image>
		<!-- <view class="card-wrap"> -->
		
			<view class="info">
				<image style="width: 80px;height: 70px;margin-bottom: 32rpx;" src="http://111.198.10.15:11604/png/share.png"></image>
				<!-- <text style="color: #fff;">{{nickName}}</text> -->
			</view>
			
		  <view class="card-box">
		    <view class="card-info">
					<view class="title">
					 	<text>我的举报</text>
					 	<view class="icon-text" @click="handleClick('0')">
							<text class="text">全部</text>
							<u-icon name="arrow-right-double" color="#0043ac" size="18"></u-icon>
						</view>
					</view>
					 
					<view class="line"></view>
					 
					<view class="button-area">
						<view class="button" v-for="item in tabList" :key="item.id" @click="handleClick(item.id)">
							<image style="width: 54px;height: 54px;margin-bottom: 8px;" :src="item.icon" mode=""></image>
							<text class="info-text">{{item.name}}</text>
						</view>
					</view>
		    </view>
		  </view>
		<!-- </view> -->
		
		<view class="bottom">
			<!-- 平台账号 -->
			<view class="account" @click="changePage">
				<view class="title">
					<u-icon name="account-fill" color="#408bf6" size="28"></u-icon>
					<text class="text">个人信息</text>
				</view>
				
				<u-icon name="arrow-right" color="#0043ac" size="22"></u-icon>
			</view>
			<view class="account" @click="changePassword">
				<view class="title">
					<u-icon name="setting-fill" color="#408bf6" size="28"></u-icon>
					<text class="text">修改密码</text>
				</view>
				
				<u-icon name="arrow-right" color="#0043ac" size="22"></u-icon>
			</view>
			
			<!-- 举报电话 -->
			<view class="account" @click="call">
				<view class="title">
					<u-icon name="phone-fill" color="#408bf6" size="28"></u-icon>
					<text class="text">举报电话</text>
				</view>
				
				<view class="text-right-area">
					<text class="text-right">{{phone}}</text>
					<u-icon name="arrow-right" color="#0043ac" size="22"></u-icon>
				</view>
			</view>
		</view>
		<!-- 登录弹窗提醒 -->
			<u-modal
			    :show="showMessage"
			    v-model="showMessage"
				title="登录提醒" 
				content='您还未登录,点击去登录'
				:title-style="{
					color: '#408bf6',
				}"
				:content-style = "{
					'text-align': 'center'
				}"
				:show-cancel-button="true"
				@confirm="confirm"
				@cancel="cancel"
				confirmColor="#408bf6"
				confirmText="登录"
				cancelText="取消"></u-modal
			>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
					{
						id: 'not',
						name: '待评估',
						icon: '../../static/mine/dpg.png',
						color: '#0085fe'
					},
					{
						id: 'done',
						name: '已评估',
						icon: '../../static/mine/ypg.png',
						color: '#0085fe'
					},
				],
				phone: '0991-2384777',
				nickName: '微信用户',
				showMessage: false, // 登录提示
			}
		},
		onReady() {
		},
		mounted(){
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: '新疆网络举报',
				imageUrl: '../../static/share.png',
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		methods: {
			//拒绝登录
			cancel(val) {
				//  返回首页
				// wx.switchTab({
				// 	url:'/pages/index/index'
				// })
				this.showMessage = false
			},
			// 点击去登录
			confirm() {
				// wx.navigateTo({
				// 	url: '/packageMine/accountBound/accountBound'
				// })
				wx.navigateTo({
				   url:'/packageMine/accountBound/accountBound'
				 })
				 this.showMessage = false
			},
			// 点击举报电话
			call() {
				// wx.makePhoneCall({
				// 	phoneNumber: this.phone,
				// })
				wx.navigateTo({
					url: '/packageMine/phones/phones'
				})
			},
			changePassword() {
				if (wx.getStorageSync('userInfoxj')) {
					// 已经登陆
					this.showMessage = false
						// 修改密码页面
						let url = `/packageMine/changePassword/changePassword`
						wx.navigateTo({
							url: url
						})
					
				} else {
					// 未登录
					this.showMessage = true
				}
			},
			// 跳转账号信息页面
			changePage(val) {
				// 同步存储
				// wx.setStorageSync('list1', {name:"name",age:5})
				// 读取本地数据
				// 在小程序中可以通过wx.getStorage/wx.getStorageSync将数据存储到本地。
				// 判断用户用户有无登录
				if (wx.getStorageSync('userInfoxj')) {
					// 已经登陆
					this.showMessage = false
					// 个人信息
					wx.navigateTo({
						url: '/packageMine/accountInfo/accountInfo'
					})
					
				} else {
					// 未登录
					this.showMessage = true
				}
			},
			// 点击全部、待评估、已评估
			handleClick(type) {
				// 同步存储
				// wx.setStorageSync('list1', {name:"name",age:5})
				// 读取本地数据
				// 在小程序中可以通过wx.getStorage/wx.getStorageSync将数据存储到本地。
				// 判断用户用户有无登录
				if (wx.getStorageSync('userInfoxj')) {
					// 已经登陆
					this.showMessage = false
					let param = '0'
					if(type === 'not') {
						param = '1' 
					} else if(type === 'done') {
						param = '2' 
					}
					wx.navigateTo({
						url: `/packageMine/myReport/myReport?tabType=${param}`
					})
				} else {
					// 未登录
					this.showMessage = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.mine {
		width: 100%;
		box-sizing: border-box;
		padding-top: 54rpx;
		.info {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.card-box {
			width: 100%;
			margin-top: 132rpx;
			.card-info {
				margin: auto;
				width: 92%;
				padding-bottom: 42rpx;
				background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
				box-shadow: 0 8rpx 16rpx 0 rgba(190, 195, 199, 0.5);
				border-radius: 16rpx;
				.title {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 36rpx;
					font-weight: 600;
					padding: 20rpx 20rpx 0 20rpx;
					box-sizing: border-box;
					.icon-text {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 34rpx;
						font-weight: 400;
						color: #0043ac;
						.text {
							margin-right: 16rpx;
						}
					}
				}
				// 分割线
				.line {
					width: 100%;
					height: 1rpx;
					background-color: #eeeeee;
					margin: 20rpx 0;
				}
				.button-area {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					.button {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: #021b2a;
						margin-top: 32rpx;
					}
				}
			}
		}
		
		.bottom {
			padding: 20rpx 32rpx;
			.account {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 20rpx;
				background: linear-gradient(#eef1fd 0%, #bed5fe 100%);
				border-radius: 16rpx;
				box-shadow: 0 8rpx 16rpx 0 rgba(190, 195, 199, 0.5);
				margin: 40rpx 0;
				.title {
					display: flex;
					align-items: center;
					.text {
						margin-left: 16rpx;
					}
				}
				.text-right-area {
					display: flex;
					flex-direction: row;
					align-items: center;
					.text-right {
						margin-right: 32rpx;
					}
				}
			}
		}
	}
</style>
