<template>
	<view class="content">
		<view class="bg"></view>
		<view class="menutop"></view>
		<u-loading-page :loading="loading"></u-loading-page>
		
		<view class="contents">	 
			    <u-row
			        justify="space-between"
			        gutter="12">
			        <u-col span="3">
			            <view class="">
							<image class="photo" mode="widthFix" :src="isLogin?userInfo.avatar:deaultIcon"></image>
						</view>
			        </u-col>
			        <u-col span="7">
						<view v-if="!isLogin">
							<view class="text_name" style="text-align: left;"> 
								<button class="logins" open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
							</view>
							<view class="text_tel">欢迎来到警地融合小程序～</view>
						</view>
						
			            <view v-else>
							<view class="text_name">{{userInfo.user_name}}</view>
							<view class="text_tel">{{userInfo.detail.phone?getphone(userInfo.detail.phone):userInfo.user_id}}</view>
						</view>
			        </u-col>
			        <u-col span="2">
			            <view  @click="$u.func.route('/pageA/my/profile')" style="text-align: right;padding-right: 3px;">
							<image class="icon_arrow" mode="widthFix" src="../../static/my/btn_next_gray@2x.png"></image>
						</view>
			        </u-col>
			    </u-row>
						
				<view class="info_container" v-if="isLogin">
					<view class="boxes">	
						<view class="item_big">
							<image class="icon_sm" mode="widthFix" src="../../static/my/icon_addresss_white_16@2x.png"></image>{{userInfo.detail.sqName+userInfo.detail.dz}}
						</view>
						<view class="dotted"></view>
						<view class="item_sm" style="position: relative;">
							<image class="icon_sm" mode="widthFix" src="../../static/my/icon_police_white_16@2x.png"></image>{{userInfo.detail.pcsName?userInfo.detail.pcsName:'暂无'}}
							<view class="call">
								<image class="lf" :src="isLogin?userInfo.avatar:deaultIcon"></image>
								<image  @click="callPhone(userInfo.detail.phone)" class="rt" src="../../static/my/btn_phone_blue_16@2x.png"></image>
							</view>
						</view>
						<view class="item_sm">
							<image class="icon_sm" mode="widthFix" src="../../static/my/icon_love_white_16@2x.png"></image>{{userInfo.detail.sqName?userInfo.detail.sqName:'暂无'}}
						</view>
					</view>
				</view>
				
				<view>
					<view class="my_order cell_item" style="margin-top: 24rpx;" v-if="isLogin&&userInfo.role_id==1854067626151772162&&userInfo.detail.jyzShtyxydm==null">
						<view class="szqy">
							<view>	
								<view class="order_name">散装汽油</view>
								<view class="csjl">即时查看散装汽油出售记录</view>
								<view class="jydj"  @click="$u.func.route('/jyzPage/jyz/jyzdj')">加油站登记</view>
							</view>
							<view>
								<image class="icon" src="../../static/jf/pic_oil_big@2x.png" mode="widthFix"></image>
							</view>
							
						</view>
					</view>
					<view class="my_order cell_item" style="margin-top: 24rpx;" v-if="isLogin&&userInfo.role_id==1854067626151772162&&userInfo.detail.jyzShtyxydm">
						<view class="szqy" style="grid-template-columns: 120rpx calc(100% - 200rpx) 80rpx;">
							<view>	
								<image src="../../static/jf/pic_oil_big@2x.png" mode="widthFix" style="width: 112rpx;height: 112rpx"></image>
							</view>
							
							<view>
								<view class="jyzmc">中化石油加油站（幸福街站）</view>
								<view class="jyzdz">吉林省长春市南关区幸福街621号</view>
							</view>
							<view class="" style="text-align: right;padding-right: 3px;padding-top: 40rpx;">
								<image class="icon_arrow" mode="widthFix" src="../../static/my/btn_next_gray@2x.png"></image>
							</view>
						</view>
						
						<view class="csjlbutton" @click="$u.func.route('/jyzPage/jyz/csjl')">出售记录</view>
					</view>
				</view>
				
				<view class="my_order cell_item" style="margin-top: 24rpx;">
					<view class="order_name">我的订单</view>
					 <u-row justify="space-between"  customStyle="margin-bottom: 10px;padding-top:48rpx;text-align:center">
					        <u-col span="6">
					            <view  @click="$u.func.route('/product/order/dlq')" style="text-align: center;">
									<image style="width: 96rpx;" class="order_img" mode="widthFix" src="../../static/my/icon_order_waiting_48@2x.png"></image>
									<view class="item_name">待领取</view>
								</view>
					        </u-col>
					        <u-col  span="6">
					            <view @click="$u.func.route('/product/order/historyOrder')" class="" style="text-align: center;">
					            	<image style="width: 96rpx;"  class="order_img" mode="widthFix" src="../../static/my/icon_order_history_48@2x.png"></image>
									<view class="item_name">历史订单</view>
								</view>
					        </u-col>
					    </u-row>
				</view>
				
				
				<view class="my_order cell_item" style="margin-top: 24rpx;">
					<view class="order_name">常用功能</view>
					 <u-row justify="space-between"  customStyle="margin-bottom: 10px;padding-top:48rpx;text-align:center">
					        <u-col span="3">
					            <view class="" style="text-align: center;">
									<image style="width: 48rpx;" class="order_img" mode="widthFix" src="../../static/my/icon_my_set@2x.png"></image>
									<view class="item_name">设置</view>
								</view>
					        </u-col>
					        <u-col  span="3">
								<view class="" style="text-align: center;">
									<image style="width: 48rpx;"  class="order_img" mode="widthFix" src="../../static/my/icon_my_service@2x.png"></image>
									<button class="item_name kefu" type="default" open-type="contact">客服</button>
								</view>
					          
					        </u-col>
							<u-col span="3">
							    <view class="" style="text-align: center;">
									<image style="width: 48rpx;" class="order_img" mode="widthFix" src="../../static/my/icon_my_idea@2x.png"></image>
									<view class="item_name">意见反馈</view>
								</view>
							</u-col>
							<u-col  span="3">
							    <view class="" style="text-align: center;">
							    	<image style="width: 48rpx;"  class="order_img" mode="widthFix" src="../../static/my/icon_my_about@2x.png"></image>
									<view class="item_name">关于我们</view>
								</view>
							</u-col>
					    </u-row>
				</view>

		</view>
	</view>
</template>

<script>
	import {weblogin} from '@/api/user.js'
	import { mapGetters } from 'vuex';
	export default {
		data(){
			return{
				loading:true,
				hasUserInfo:false,
				deaultIcon:"data:image/png;base64,[encoded data, 6588 characters]"
			}
		},
		onLoad() {
			this.loading=false
		},
		computed: {
			
		},
		
		methods:{
			getphone(phone){
				if(phone.length==11){
				 return phone.replace(/(\d{4})(?=\d)/g, '$1 ');
				}
			},
			 // 获取用户信息
			    getUserInfo(e) {
					uni.navigateTo({
						url:'/pageA/my/login'
					})
				  return	
			      if (e.mp.detail.userInfo) {
			        this.userInfo = e.mp.detail.userInfo;
			        this.hasUserInfo = true;
					console.log(e);
			        this.login();
			      } else {
			        uni.showModal({
			          title: '警告',
			          content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
			          showCancel: false,
			          confirmText: '返回授权',
			          success: function(res) {
			            if (res.confirm) {
			              console.log('用户点击了“返回授权”');
			            }
			          }
			        });
			      }
			    },
			
			
			 // 登录并获取用户信息
			    login() {
			
			  },
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			callPhone(phoneNumber) {
			    uni.makePhoneCall({
			      phoneNumber: phoneNumber, // 电话号码
			      success: function () {
			        console.log('拨号成功');
			      },
			      fail: function () {
			        console.log('拨号失败');
			      }
			    });
			  }
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 0 24rpx;
		background: #F8F8F8;
		box-sizing: border-box;
		position: relative;
		min-height: 100vh;
		.logins{
			
		}
		.csjlbutton{
			height: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #106DFF;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
		}
		.szqy{
			display: grid;
			grid-template-columns: 55% 45%;
			position: relative;
			
			.icon{
				width: 45%;
				position: absolute;
				top: -60rpx;
				right: 10rpx;
				max-width: 304rpx;
			}
			.csjl{
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				padding: 24rpx 0;
			}
			.jydj{
				width: 184rpx;
				height: 64rpx;
				background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
				border-radius: 32rpx;
				height: 64rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
			}
			.jyzmc{
				height: 42rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: rgba(4,8,20,0.9);
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				line-height: 56rpx;
			}
			.jyzdz{
				height: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				line-height: 56rpx;
			}
		}
		.contents{
			position: relative;z-index: 9;
			
		}
		.bg{
			position: absolute;
			background: url('data:image/png;base64,[encoded data, 61464 characters]') 0 0 no-repeat;
			width: 100%;
			background-size: 100%;
			height: calc((100vw / 375) * 480);
			left:0;
			top: 0;
			z-index: 0;
		}
		.menutop{
			width: 100%;
			margin: auto;
			padding-bottom:10px;
			padding-top:25px;
			height: 200rpx;
			.search{
				text-align: left;width: 70%;
			}
		}
		.photo{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
		.text_name{
			height: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			padding-bottom: 6px;
			button{
				display: inline-block;
				background: transparent;
				border: 0px !important;
				outline: none;
				height: 28px;
				line-height: 28px;
				position: relative;
				top: -3px;
				margin: 0;
				padding: 0;
				&:after {
						display: none;
					}
			}
		}
		.text_tel{
			height: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
		}
		.icon_arrow{
			width: 32rpx;
			height: 32rpx;
		
		}
		.info_container{
			padding-top: 50rpx;
			.boxes{
				width: 100%;
				height: 256rpx;
				padding: 24rpx;
				box-sizing: border-box;
				background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				.call{
					width: 160rpx;
					height: 80rpx;
					background: #CFE2FF;
					border-radius: 40rpx;
					position: absolute;
					top: 15rpx;
					right: 24rpx;
					.lf{
						width: 80rpx;
						height: 80rpx;
						background: #FFFFFF;
						border: 4rpx solid #CFE2FF;
						float: left;
						box-sizing: border-box;
						border-radius: 40rpx;
					}
					.rt{
						width: 32rpx;
						height: 32rpx;
						float: right;
						margin-right: 24rpx;
						position: relative;
						top:24rpx
					}
				}
				.dotted{
					height: 1rpx;
					border-bottom: 1rpx dashed #FFFFFF;
					position: relative;
					top: -5px;
				}
				.item_big{
					height: 80rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					.icon_sm{
						width: 32rpx;
						height: 32rpx;
						vertical-align: text-top;
						margin-right: 5px;
						position: relative;
						top: 2px;
					}
				}
				.item_sm{
					height: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					padding: 5px 0;
					.icon_sm{
						width: 32rpx;
						height: 32rpx;
						vertical-align: bottom;
						margin-right: 5px;
					}
				}
				
			}
		
		}
	}
	
	.my_order{
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 15px;
		padding: 24rpx;
		box-sizing: border-box;
		.order_name{
			height: 40rpx;
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;

			
		}
		margin-top: 24rpx;
		.order_img{
			width: 96rpx;
			height: 96rpx;
			
		}
	}
	.item_name{
		height: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #111111;
		line-height: 32rpx;
		text-align: center;
		font-style: normal;
	}
	/deep/ .kefu{
		background: #FFF !important;
		margin: 0;
		padding: 0;
		border: 0px;
		&:after {
				display: none;
			}
	}
</style>