<template>
	<view class="bg-white page-content">
		<view class="bg-img padding-bottom-lg flex align-center"
			:style="'background-image: url('+yellowURL+'wd-sz-bg.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('+yellowURL+'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>
								<image class="qrcode" src="../../../static/img/erweima-white.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="position: relative;" class="xu-content margin">
			<view @click="isSwitchEnterprises=true" class="switch">切换企业</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 style="display: flex;" 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">{{companyCard.name}}</text>
						<view
							:class="company_tag===1?'company_tag company_tag_SelfOperated':'company_tag company_tag_externalOperated'">
							{{companyCard.companyNature===1?'自营':'外请'}}
						</view>
					</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="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 class="cu-item">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="yellowURL+'wd-ic-1.png'" lazy-load class="png" mode="widthFix"></img>
						</view>
					</view>
					<text>红包卡券</text>
				</view>
				<view class="cu-item">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="yellowURL+'wd-ic-2.png'" lazy-load class="png" mode="widthFix"></img>
						</view>
					</view>
					<text>活动通知</text>
				</view>
				<view class="cu-item">
					<view class=" padding-tb-0">
						<view class="image-self-view">
							<img :src="yellowURL+'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="yellowURL+'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" @click="goIntegral">
					<view class="content">
						<!-- <image :src="imgURL+'yunsite-kefu.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" open-type="contact" @contact="onContact"> -->
						<!-- <text class="text-grey text-sm">打开会话</text> -->
						<!-- </button> -->
						<view>{{balance}}</view>
					</view>
				</view>
				<view class="cu-item arrow" @click="makeCall">
					<view class="content">
						<!-- <image :src="imgURL+'yunsite-kefu.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" open-type="contact" @contact="onContact"> -->
						<!-- <text class="text-grey text-sm">打开会话</text> -->
						<!-- </button> -->
						<!-- <view class="cu-btn oil-main-btn-color" @click="makeCall">
							<text class="text-grey text-sm">联系客服</text>
						</view> -->
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<!-- <image :src="imgURL+'yunsite-about.png'" class="png" mode="aspectFit"></image> -->
						<text class="text-grey padding-left-sm">关于我们</text>
					</view>
				</view>
			</view>
		</view>
		<SwitchEnterprises @submit='upadteCompanyCard' @logout='logout' :is-show.sync="isSwitchEnterprises">
		</SwitchEnterprises>
		<!-- <tabbar :current-page="4"/> -->
	</view>

</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	import SwitchEnterprises from '@/components/SwitchEnterprises.vue'
	import accountApi from '@/api/account.js'
	import integralServe from '@/api/integral.js'
	export default {
		components: {
			SwitchEnterprises
		},
		props: {

		},
		data() {
			return {
				companyCard: null,
				isSwitchEnterprises: false,
				showCard: [],
				hideCard: [],
				cardSum: [],
				yellowURL: this.global.yellowURL,
				imgURL: this.global.imgURL,
				starUrl: this.global.starUrl,
				isCompany: uni.getStorageSync('accountStatus'),
				user: uni.getStorageSync('user'),
				wxInfo: uni.getStorageSync('wxInfo'),
				userTotal: {},
				balance: ''
			};
		},
		onShow() {

			this.getAuthInfo()
			this.getAmount();
			this.upadteCompanyCard()
			this.getByCustomerId()
		},
		methods: {
			goIntegral() {
				uni.navigateTo({
					url: './integralRecord'
				})
			},
			getByCustomerId() {
				integralServe.getByCustomerId(this.user.id).then(res => {
					if (res.code === 20000) {
						this.balance = res.data.balance
					}
				})
			},
			logout() {
				this.isSwitchEnterprises = false
			},
			upadteCompanyCard() {
				if (uni.getStorageSync('companyCard')) {
					this.companyCard = JSON.parse(uni.getStorageSync('companyCard'))
				}
			},
			goToPage(url) {
				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
						}
					}
				})
			},
			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)
					}
				})
			},
			onTapUserInfo() {
				if (uni.getStorageSync('user')) {
					this.routerTo('/BagSetup/setup/setup')
				} else {
					uni.reLaunch({
						url: '../../../BagAuth/pages/login/login'
					})
				}
			},

			toCards() {
				if (Number(this.userTotal.oilCardNumber) <= 0) return
				uni.navigateTo({
					url: '/BagMoney/pages/oilCards/oilCards'
				})
			},
			async getAmount() {

				await accountApi.getTotalOilCardInfo().then(res => {
					console.log(1)
					if (res.code == 20000) {
						this.userTotal = res.data
					}
				})
				await accountApi.getUserAccount().then(res => {
					console.log(2)
					this.showCard = []
					res.data.forEach(item => {
						this.showCard.push(item.companyId)
					})
				})
				await accountApi.getSyncDeductions().then(res => {
					console.log(3)
					if (res.code == 20000) {
						this.cardSum = this.showCard.filter(item => !res.data.companyIds.includes(item))
					}
				})
			},
			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: '4008-56-5355' //仅为示例
				})
			},
			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>
	.action {
		position: relative;
	}

	.qrcode {
		position: absolute;
		left: -3rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 34rpx;
		height: 34rpx;
	}

	.company_tag_externalOperated {
		background: #FDDBDB;
		color: #FE0505;
	}

	.company_tag_SelfOperated {
		background: #FDE9DB;
		color: #FF6700;
	}

	.company_tag {
		width: 62rpx;
		font-size: 22rpx;
		height: 30rpx;
		border-radius: 10rpx 3rpx 10rpx 3rpx;
		opacity: 1;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.switch {
		width: 143rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		color: #FFFFFF;
		background: linear-gradient(90deg, rgba(255, 110, 11, 0.85) 0%, #FFBA8B 100%);
		box-shadow: 0rpx 2rpx 7rpx 2rpx rgba(191, 191, 191, 0.2);
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		opacity: 1;
		position: absolute;
		z-index: 1;
		right: 0;
		top: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.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>