<!-- 我的 -->
<template>
	<view class="mine">
		<image src="../../static/index/back.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="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>
	</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: '微信用户',
			}
		},
		mounted(){
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: '新疆网络举报',
				imageUrl: '../../static/share.png',
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		methods: {
			// 点击举报电话
			call() {
				wx.makePhoneCall({
					phoneNumber: this.phone,
				})
			},
			// 跳转账号信息页面
			changePage() {
				wx.navigateTo({
					url: '/packageA/accountInfo/accountInfo'
				})
			},
			// 点击全部、待评估、已评估
			handleClick(type) {
				let param = '0'
				if(type === 'not') {
					param = '1' 
				} else if(type === 'done') {
					param = '2' 
				}
				wx.navigateTo({
					url: `/packageA/myReport/myReport?tabType=${param}`
				})
			}
		}
	}
</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>