<!-- 我的 -->
<template>
	<view class="mine">
		<view class="card-wrap">
			
			<view class="info">
				<image style="width: 112px;height: 97px;margin-bottom: 32rpx;" src="../../static/index/logo.png"></image>
				<text  >{{nickName}}</text>
			</view>
			
		  <view class="card-box">
		    <view class="card-info">
					<view class="title">
					 	<text>举报中心</text>
					 	<view class="icon-text">
							<text class="text">全部</text>
							<u-icon name="arrow-right-double" color="#0096e0" 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">
							<image style="width: 38px;height: 38px;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="#0096e0" size="28"></u-icon>
					<text class="text">平台账号</text>
				</view>
				
				<u-icon name="arrow-right" color="#ccc" size="22"></u-icon>
			</view>
			
			<!-- 举报电话 -->
			<view class="account" @click="call">
				<view class="title">
					<u-icon name="phone-fill" color="#0096e0" 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="#ccc" 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: '/pages/accountInfo/accountInfo'
				})
			}
		}
	}
</script>

<style lang="scss">
	.mine {
		width: 100%;
		.card-wrap {
			width: 100%;
			height: 720rpx;
			position: relative;
			z-index: -1;
			overflow: hidden;
			&::after {
			  width: 140%;
			  height: 520rpx;
			  position: absolute;
			  left: -20%;
			  top: 0;
			  z-index: -1;
			  content: '';
			  border-radius: 0 0 50% 50%;
			  background: linear-gradient(to bottom, #17a6ec 0%, #007bca 100%);
			}
			.info {
				position: absolute;
				width: 100%;
				top: 64rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.card-box {
			  position: absolute;
			  bottom: 6rpx;
			  width: 100%;
			
			  .card-info {
			    margin: auto;
			    width: 92%;
			    padding-bottom: 42rpx;
			    background: #fff;
			    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: #0096e0;
							.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-color: #fff;
				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>