<template>
	<view class="content">
		<!--  -->
		<view class="phonetop" v-if="token">
			<view class="headbox">
				<view class="head">
					<view class="image">
						<image :src="userInfo.avatarurl" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name">
							{{userInfo.name}}<text>{{userInfo.posname}}</text>
						</view>
						<view class="post">
							{{userInfo.orgname}}
						</view>
						<view class="phone">电话:{{userInfo.phone}}</view>
						<view class="phone" v-if="userInfo.email">
							邮箱:{{userInfo.email}}
						</view>
						<view class="phone" @click="navTo('/pageTwo/me/user')" v-if="!userInfo.email"
							:class="[!userInfo.email?'redcolor':'']">
							请尽快完善个人资料
						</view>
					</view>
					<view class="logo">
						<image src="../../static/logo.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="login" @click="handleLogin">
			登录后查看更多内容资讯，点击此处<text>登录/注册</text>
		</view>
		<!-- vip -->
		<view class="vip" :class="[!token?'marginTop':'']">
			<image src="../../static/h.png"></image>
			<view>
				<text v-if="!userInfo.vipname">加入我们，尊享多重特权</text>
				<text v-else class="bold">会员有效期至：{{userInfo.vipendtime.substring(0,10)}}</text>
			</view>
			<!--  -->
			<view class="btn" @click="navTo('/pageTwo/me/addVip')" v-if="!userInfo.vipname">加入我们</view>
		</view>
		<!-- 资料 -->
		<view class="tools">
			<view class="item" @click="navTo('/pageTwo/me/user')">
				<image src="../../static/tools1.png"></image>
				<view class="ml-15">
					<text class="size18 bold">个人资料</text>
					Personal Data
				</view>
			</view>
			<view class="item" @click="navTo('/pageTwo/me/company')">
				<image src="../../static/tools2.png"></image>
				<view class="ml-15">
					<text class="size18 bold">企业信息</text>
					Company
				</view>
			</view>
		</view>
		<!-- 更多功能 -->
		<view class="tools tools2">
			<view class="title">更多功能</view>
			<view class="tools_item">
				<view @click="navTo('/pageTwo/me/needs?type=3')">
					<image src="../../static/q.png"></image>
					<text>我的商品</text>
				</view>
				<view @click="navTo('/pageTwo/login/editPassword')">
					<image src="../../static/w.png"></image>
					<text>修改密码</text>
				</view>
				<view @tap="handleisVIP">
					<image src="../../static/r.png"></image>
					<text>联系人</text>
				</view>
				<view @tap="handleisCare">
					<image src="../../static/t.png"></image>
					<text>身份卡</text>
				</view>
				<view @click="navTo('/pageTwo/me/addVip')" v-if="!userInfo.vipname">
					<image src="../../static/me4.png"></image>
					<text>加入我们</text>
				</view>
				<view @click="handleOutLogin" v-if="token">
					<image src="../../static/y.png"></image>
					<text>退出</text>
				</view>
			</view>
		</view>
		<!--  -->
		<!-- <view class="foot">
			<view class="logo">
				<image src="../../static/logo.png"></image>
			</view>
			<view class="ercode">
				<image :src="HomeContent.officialqrcode" show-menu-by-longpress="true"></image>
			</view>
			<view>
				<text>长按识别二维码</text>
				<text>关注沪抖团公众号接收最新动态</text>
			</view>
		</view> -->
		<!-- 身份卡 -->
		<view class="wrapper" v-if="isCard">
			<view class="bg" @click="handleisCare">
				<view class="edit Card" @click.stop>
					<view class="Cardbg">
						<!-- <image src="../../static/bg.jpg" mode="aspectFit"></image> -->
						<view class="logo">
							<image :src="userInfo.cominfo.logourl" mode="aspectFit"></image>
						</view>
						<view class="title">
							{{userInfo.cominfo.name}}
						</view>
						<view class="address" v-if="userInfo.cominfo.province">
							{{userInfo.cominfo.province}}{{userInfo.cominfo.city}}{{userInfo.cominfo.area}}{{userInfo.cominfo.address}}
						</view>
						<view class="address redcolor" v-else @click="navTo('/pageTwo/me/company')">
							请尽快完善企业资料
						</view>

					</view>
					<!--  -->
					<view class="box">
						<view class="mt-15 name">
							<view class="size16">{{userInfo.name}}<text class="text">{{userInfo.posname}}</text></view>
							<view class="c999 size12 mt-5">
								<text>{{userInfo.orgname}}</text>
								<!-- <text v-if="userInfo.place" class="ml-5 mr-5">|</text>{{userInfo.place}} -->
							</view>
						</view>

						<view class="ercode">
							<view class="left">
								<text class="mb-5">电话:{{userInfo.phone}}</text>
								<text v-if="userInfo.email">
									{{userInfo.email}}
								</text>
								<text @click="navTo('/pageTwo/me/user')" v-if="!userInfo.email"
									:class="[!userInfo.email?'redcolor':'']">
									请尽快完善个人资料
								</text>
							</view>
							<view class="right">
								<!-- https://izzt.jt-sky.com/qr/get?appid=wxbbddd1888da43ab0&id=142307070910553 -->
								<image :src="'https://irdhdt.com/qr/get?appid='+appid+'&id='+userInfo.id"
									show-menu-by-longpress="true"></image>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 联系人 -->
		<secratary></secratary>
		<!-- 客服 -->
		<message></message>
		<!-- 底部 -->
		<tabbar :tabInd="2"></tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import tabbar from "@/components/tabBar.vue"
	export default {
		data() {
			return {
				isCard: false,
				token: "",
				appid: ""
			}
		},
		components: {
			tabbar,
		},
		computed: {
			...mapState(['user', "HomeContent"]),
			userInfo() {
				return this.user.name ? this.user : uni.getStorageSync('UserInfo')
			}
		},
		onLoad() {
			let that = this
			that.appid = uni.getStorageSync('appid')
			that.token = uni.getStorageSync('token')
		},
		methods: {
			handleOutLogin() {
				let that = this
				uni.showModal({
					title: '友情提示',
					content: '是否退出登录？',
					success: function(res) {
						if (res.confirm) {
							that.$model.getoutlogin({
								sessionid: uni.getStorageSync('sessionid')
							}).then((res) => {
								if (res.code != 0) return
								console.log('确定退出', res)
								uni.clearStorageSync()
								uni.setStorageSync('UserInfo', {})
								that.$store.commit("changeLogout", false);
								uni.reLaunch({
									url: "/pageTwo/login/login"
								})
							})
						} else if (res.cancel) {
							that.$tools.msg("您已取消操作！");
						}
					},
				})
			},
			handleisVIP() {
				this.$store.commit("changeSecratary", true);
			},
			handleisCare() {
				if (!this.token) {
					this.$tools.msg("登录后查看更多")
					return
				}
				this.isCard = !this.isCard
			},
			// 登录
			handleLogin() {
				let that = this
				uni.navigateTo({
					url: "/pageTwo/login/login"
				})
			},
			navTo(url) {
				if (!this.token) {
					this.$tools.msg("登录后查看更多")
					return
				}
				this.isCard = false
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.vip {
		font-size: 14px;
		color: $blue;
		margin: 45px 10px 0;
		height: 200rpx;
		position: relative;


		view {
			position: absolute;
			left: 15px;
			bottom: 8px;
		}

		.btn {
			position: absolute;
			font-size: 14px;
			right: 15px;
			padding: 5px 10px;
			border-radius: 5px;
			background-color: $blue;
			width: fit-content;
			color: #fff;
			left: auto;
			top: 15px;
			bottom: auto;
		}

		image {
			width: 100%;
			height: 100%;
			position: absolute
		}
	}

	.tools {
		display: flex;
		flex-wrap: wrap;
		margin: 15px 10px;
		justify-content: space-between;

		.title {
			font-size: 16px;
			font-weight: bold;
			margin-left: 15px;
			position: relative;
		}

		.title::after {
			content: "";
			position: absolute;
			width: 5px;
			height: 20px;
			left: -10px;
			border-radius: 5px;
			background: $navColor;
		}

		.item {
			width: 43%;
			padding: 15px 2%;
			border-radius: 10px;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 1px 5px 2px #dfe2e1fc;

			image {
				width: 45px;
				height: 45px;
			}

			view {
				color: #999;
				width: calc(100% - 50px);
			}

		}

		text {
			width: 100%;
			color: $blue;
			text-align: left;
			display: inline-block;
		}

	}

	.login {
		width: 100%;
		text-align: center;
		height: 45px;
		line-height: 45px;
		border-radius: 5px;

		text {
			color: $blue;
			font-size: 16px;
			font-weight: bold;
			margin-left: 5px;
			padding: 0 3px;
			border-bottom: 1px solid $blue;
		}
	}

	.tools_item {
		justify-content: left;
		width: 100%;
		display: flex;
		flex-flow: wrap;
		background: #fff;
		padding-top: 15px;
		margin-top: 15px;
		border-radius: 10px;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

		view {
			width: 25%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 15px;
		}

		image {
			width: 40px;
			height: 40px;
		}

		text {
			text-align: center;
		}

		.title {
			width: 100%;
			justify-content: left;
			font-size: 16px;
			font-weight: bold;
			margin-top: 5px;
		}
	}

	.foot {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 50px;

		.logo {
			width: 100%;
			text-align: center;

			image {
				width: 166rpx;
				height: 56rpx;
			}
		}

		.ercode {
			width: 100%;
			margin: 10px 0;
			text-align: center;

			image {
				width: 100px;
				height: 100px;
				border: 1px solid #dfdfdf;

			}
		}

		text {
			width: 100%;
			text-align: center;
			display: inline-block;
			margin-bottom: 5px;
		}
	}



	.marginTop {
		margin-top: 0px !important;
	}

	.Card {
		width: 560rpx;
		height: 630rpx;
		color: #333;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.Cardbg {
			width: 560rpx;
			height: 350rpx;
			background: $navColor;
			border-radius: 5px 5px 0 0;

			image {
				border-radius: 5px 5px 0 0;
				background-color: rgba(225, 225, 255, 0.5);

			}
		}

		.logo {
			width: 100%;
			padding-top: 20px;
			margin-bottom: 10px;

			image {
				width: 55px;
				height: 55px;
				padding: 5px;
				border-radius: 50%;
				background-color: #fff;
			}
		}

		.title {
			margin-top: 5px;
		}

		.address {
			color: #fff;
			margin-top: 10px;
		}

		.box {
			position: absolute;
			top: 355rpx;

			.name {
				width: auto;
				text-align: left;
				margin-left: 15px;

				view {
					width: 100%;
					display: flex;

					.text {
						width: auto;
						font-size: 12px;
						background: $orange;
						padding: 3px 10px;
						border-radius: 5px;
						color: #fff;
						margin-left: 5px;
					}

					text {
						display: inherit;
						width: auto;
					}
				}
			}

			.ercode {
				display: flex;
				justify-content: space-between;
				padding: 0 15px;
				width: auto;
				align-items: center;


				.left {
					width: calc(100% - 100rpx);
					font-size: 12px;
					margin-top: 20px;

					text {
						text-align: left;
					}

				}

				.right {
					width: 160rpx;
					height: 160rpx;
					position: absolute;
					right: 10px;
					bottom: 30px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.phonetop {
		width: 126% !important;
		height: 120px !important;
		left: -13% !important;
		position: relative;
		border-radius: 0 0 60% 60%;
		background: $navColor;

		.headbox {
			left: 13%;
			right: 13%;
			top: 20px;
		}
	}
</style>