<template>
	<view class="bg-white page-content">
		<view class="bg-img padding-bottom-lg flex align-center"
			style="background-image: url(https://xoil-public.oss-cn-beijing.aliyuncs.com/baichuan_MP/wd-sz.png);height: 600upx;">
			<view class="padding-xl margin-top bg-tm text-white top-part">
				<view class="padding-xs padding-top-lg text-sm padding-top">
					Hi，{{(user.name?user.name:wxInfo.nickName)|nameKong}}师傅，愿你开心每一天!
				</view>
				<view class="padding-xs padding-bottom-lg">
					<view class="cu-list menu-avatar padding-bottom-lg">
						<view class="cu-item bg-tm no-mr-border">
							<view v-if="wxInfo.avatarUrl" class="cu-avatar round xl" @tap="getUserInfo"
								:style="'background-image:url('+wxInfo.avatarUrl+')'">
							</view>
							<view v-else class="cu-avatar round xl" @tap="getUserInfo"
								:style="'background-image:url('+imgURL+'default-avator.png)'">
							</view>
							<view class="content padding padding-top-sm" @tap="onTapUserInfo">
								<view class="text-cut text-xl padding-bottom-xs">
									{{(user.name?user.name:wxInfo.nickName)|nameKong}}
								</view>
								<view class="text-sm">
									<view class="text-cut zh-label">ID:{{user.userCode?user.userCode:'未登录'}}</view>
									<view class="text-cut zh-label">{{user.userPhone?user.userPhone:'点击登录'}}</view>
								</view>
							</view>
							<view class="action" @tap="onTapUserInfo">
								<text class="cuIcon-right text-lg"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xu-content margin">
			<view class="bg-white self-card person-card radius my-shadow" v-if="!isCompany">
				<view class="flex solid-bottom padding-xs justify-between person-vip">
					<view class="radius padding-xs text-xs">
						<!-- <text class="icon-person cuIcon-crownfill padding-right-xs"></text> -->
						<my-icon iconName="wd-ge-hy.png" class="padding-right-xs"></my-icon>
						<text class="icon-person ">个人会员</text>
					</view>
					<!-- <view class="radius padding-xs text-xs"  @tap="changeAccount('1')">
						<my-icon iconName="wd-qh.png" class="padding-right-xs"></my-icon>
						<text class="text-white ">
							<image :src="starUrl+'wd-qh.png'" class="van-icon__image van-icon"></image>
							切换企业会员
						</text>
					</view> -->
				</view>
				<!-- <view class="padding-xl text-center padding-top padding-bottom">
					<view class="text-sl text-bold text-black">
						{{userTotal.oilCardTotalPrice|moneyFormat}}
					</view>
					<view class="text-sm">
						星油豆
					</view>
					<view class="flex  padding-xs margin-top-sm justify-around ">
						<view class="radius padding-xs">
							<button class="cu-btn mr-btn mr-back-btn" @tap="toCards">消费明细</button>
						</view>
						<view class="radius padding-xs">
							<button class="cu-btn mr-btn" @tap="routerTo('/BagMoney/pages/reCharge/reCharge')">
								<text class=" padding-left padding-right">充值</text>
							</button>
						</view>
					</view>
				</view> -->
			</view>
			<view class="bg-white self-card person-card radius my-shadow" v-if="isCompany">
				<view class="flex solid-bottom padding-xs justify-between company-vip">
					<view class="radius padding-xs text-xs">
						<!-- <text class="icon-company cuIcon-crownfill padding-right-xs"></text> -->
						<my-icon iconName="wd-qy-hy.png" class="padding-right-xs"></my-icon>
						<text class="icon-company text-xs">企业会员</text>
					</view>
					<!-- <view class="radius padding-xs text-xs" @tap="changeAccount('0')">>
						<my-icon iconName="wd-qh.png" class="padding-right-xs"></my-icon>
						<text class="text-white">
							<image :src="starUrl+'wd-qh.png'" class="van-icon__image van-icon"></image>
							切换个人会员
						</text>
					</view> -->
				</view>
				<view class="padding-sm margin-bottom" @tap="toCards">
					<view class="color-666  text-sm">
						<!-- 山东星卡互联科技有限公司 -->
					</view>
					<view class=" padding-sm text-center">
						<view class="text-sl text-bold text-black">
							{{userTotal.oilCardTotalPrice|moneyFormat}}
						</view>
						<view class="text-sm">
							钱包余额（元）
						</view>
					</view>
					<!-- 	<view class="grid col-2 cu-list  text-center margin-top-sm margin-bottom-sm ">
						<view class="cu-item no-mr-border">
							<view class="text-xxl text-bold text-black">
								{{userTotal.oilCardTotalPrice|moneyFormat}}
							</view>
							<view class="text-sm">
								钱包余额（元）
							</view>
						</view>
						<view class="cu-item no-mr-border">
							<view class="text-xxl text-bold text-black">
								{{userTotal.oilCardTotalPrice|moneyFormat}}
							</view>
							<view class="text-sm">
								钱包余额（元）
							</view>
						</view>
					</view> -->
					<view class="text-center">
						<text class="text-sm">您一共有
							<text
								class="oil-main-color padding-left-xs padding-right-xs">{{userTotal.oilCardNumber}}</text>
							张油卡</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="xu-content card-menu margin margin-bottom-xs radius my-shadow">
			<view class=" cu-list sm-border  grid col-4 no-border ">
				<view @click="clickFn" class="cu-item">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="starUrl+'wd-ic-1.png'" lazy-load class="png" mode="widthFix"></img>
						</view>
					</view>
					<text>红包卡券</text>
				</view>
				<view @click="clickFn" class="cu-item">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="starUrl+'wd-ic-2.png'" lazy-load class="png" mode="widthFix"></img>
						</view>
					</view>
					<text>活动通知</text>
				</view>
				<view @click="clickFn" class="cu-item">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="starUrl+'wd-ic-3.png'" lazy-load class="png" mode="widthFix"></img>
						</view>
					</view>
					<text>推荐有礼</text>
				</view>
				<view  class="cu-item" @tap="goToPage('/BagAuth/pages/agreeMent/OperationGuide')">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="starUrl+'wd-ic-4.png'" lazy-load class="png" mode="widthFix"></img>
						</view>
					</view>
					<text>操作说明</text>
				</view>
			</view>
		</view> -->
		<view class="xu-content padding-sm">
			<view class="cu-list menu">
				<view class="cu-item hidden-cu-item">
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<image :src="starUrl+'zskf.png'" class="png" mode="aspectFit"></image>
						<text class="text-grey padding-left-sm">专属客服</text>
					</view>
					<view class="action">
						<button class="cu-btn oil-main-btn-color"  @click="makeCall">
							<text class="text-grey text-sm">拨打电话</text>
						</button>
					</view>
				</view>

				<!-- <view @click="clickFn" class="cu-item arrow">
					<view class="content">
						<image :src="starUrl+'gywm.png'" class="png" mode="aspectFit"></image>
						<text class="text-grey padding-left-sm">关于我们</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>

</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	import accountApi from '@/api/account.js'
	export default {
		props: {
			
		},
		data() {
			return {
				imgURL: this.global.imgURL ,
				starUrl: this.global.starUrl,
				isCompany: uni.getStorageSync('accountStatus'),
				user: uni.getStorageSync('user'),
				wxInfo: uni.getStorageSync('wxInfo'),
				userTotal:{}
			};
		},
		onShow() {
			this.getAuthInfo()
			this.getAmount()
		},
		methods: {
			clickFn(e){ 
					uni.showToast({
						title:'功能正在开发中',
						icon:'none'
					}) 
			},
			goToPage(url) {
				const token = uni.getStorageSync('Authorization')
				if(!token){
					uni.showToast({
						title:'功能正在开发中',
						icon:'none'
					})
					return 
				}
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			getAuthInfo() {
			  oilSiteApi.getUserAuthInfo().then(res => {
			    if (res.code === 20000) {
			      // realStatus: 0   vehicleStatus: 0
			      if (this.showAuthFrzen <= new Date().getTime()) {
			        this.showAuthFrror = res.data.realStatus&& res.data.vehicleStatus ? false : true
			      }
			    }
			  })
			},
			onTapUserInfo(){
				if(uni.getStorageSync('user')){
					this.routerTo('/BagSetup/setup/setup')
				}else{
					uni.reLaunch({
						url:'../../../BagAuth/pages/login/login?loginType=true'
					})
				}
			},
			getUserInfo() {
				uni.getUserProfile({
					desc: '获取您的头像昵称',
					success: (res) => {
						console.log(res)
						this.wxInfo = JSON.parse(res.rawData)
						uni.setStorageSync('wxInfo', JSON.parse(res.rawData))
					},
					complete: (msg) => {
						console.log(msg)
					}
				})
			},
			changeAccount(type) {
				// 切换账户类型为
				// this.$emit('switchType',type)

			},
			toCards() {
				uni.navigateTo({
					url: '/BagMoney/pages/oilCards/oilCards'
				})
			},
			getAmount() {
				accountApi.getTotalOilCardInfo().then(res => {
					if (res.code == 20000) {
						this.userTotal = res.data
					}
				})
			},
			copy() {
				uni.setClipboardData({
					data: 'lallalala',
					success() {
						uni.showToast({
							title: '复制成功',
							position: 'bottom',
							icon: 'none'
						})
					}
				})
			},
			toAuth() {
				uni.navigateTo({
					url: '/pages/authentication/authForm/authForm'
				})
			},
			toQrcode() {
				uni.navigateTo({
					url: '/pages/qrcode/qrcodeList/qrcodeList'
				});
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			toLogin() {
				uni.navigateTo({
					url: 'pages/login/login'
				});
			},
			// 拨打电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '15653644882' 
				})
			},
			onContact(e) {
				// console.log(e)
			}
		},
		filters: {
			moneyFormat(value) {
				if (value) {
					return value.toFixed(2)
				} else {
					return '0.00'
				}
			},

			nameKong(value) {
				if (value) {
					return value
				} else {
					return ''
				}
			}
		}
	};
</script>

<style scoped>
	.content {
		height: 100%;
	}

	.bottom-bar {
		position: relative;
		padding-top: 50px;
		margin-bottom: 0;
		margin-top: 0;
	}

	.main-topbar>>>.cu-bar {
		height: 380rpx !important;
		z-index: 0 !important;
	}

	.main-topbar>>>.cu-bar .content {
		padding-bottom: 300rpx;
	}

	.bottom-bar-fixed {
		position: fixed;
		bottom: 0;
		padding-top: 70rpx;
		width: 100%;
	}

	.main-money {
		position: relative;
		z-index: 1;
	}

	.van-tag {
		display: inline-block;
		padding: 0.3rem 0.4rem;
		position: absolute;
		right: 1px;
		font-size: 12px;
		top: 25%;
		background-color: #b9ffca;
		border-radius: 10rem 0 0 10rem;
		border-color: transparent;
	}

	.top-part {
		min-width: 100%;
		position: relative;
		z-index: 0;
	}

	.zh-label {
		line-height: 1.1rem;
	}

	.xu-content {
		position: relative;
		z-index: 1;
		top: -160upx;
	}



	.hidden-cu-item {
		min-height: 1upx !important;
	}

	.card-menu>>>image.png.user-png {
		max-height: 100upx;
	}

	.image-self-view>>>img {
		width: 3.5rem !important;
		height: 3.5rem !important;
		display: inline-block;
	}
	.cu-avatar{
		background-color: transparent !important;
	}
</style>
