<template>
	
	<view class="container" >
		<!-- v-if="isLogin" -->
		<view class="" >
			<view class="cardHeader" >
				<view class="introduct">
					<view class="introductHeader">
						<view class="left">
							<view
								class="avatar" 
								:style="{backgroundImage: 'url(' + (cardInfo.avatarUrl || companyLogo) + ')'}"
							>
							</view>
						</view>
						<view class="right">
							<view class="top">
								{{cardInfo.userName || '--'}}
							</view>
							<view class="bottom" v-if="cardInfo.companyInfoList&&cardInfo.companyInfoList.length>0">
								<view class="bottomCon" v-for="(item,index) in cardInfo.companyInfoList" :key="index">
									<view class="bottomL">
										{{item.companyName}}
									</view>
									<view class="bottomR">
										{{item.position}}
									</view>
								</view>
								
							</view>
						</view>
					</view>
					<view class="introductContent">
						<view  v-for="item in infoList" :key="item.id" class="infoCon" >
							<view class="iconfont infoIcon" :class="`${item.icon}`"></view>
							<view class="">
								{{item.value}}
							</view>
						</view>
					</view>
				</view>
				<view class="optionBtn">
					<view class="btnCon" v-for="item in btnList" :key="item.id"  @click="handleBtnClick(item)">
						<view :class="{'shareStyle':item.id=='1','commonBtn':item.id!=='1'}">
							<view class="iconfont btnIcon" :class="`${item.icon}`" ></view>
						</view>
						
						<view class="btnTxt">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="tabs">
				<customSegmentedControl
						:values="items"
						:current="current"
						:fontSize="16"
						activeTextColor="#20269B"
						inactiveTextColor="#000"
						@clickItem="onClickItem"
						:underlineHeight="'4rpx'"
						  :underlineColor="'#20269B'"
						  :underlineWidth="'30%'"
						:tabBg="false"
					  />
			        <view class="content">
			            <view v-show="current === 0">
			                关于我们的内容
			            </view>
			            <view v-show="current === 1">
			                企业荣誉的内容
			            </view>
			            <view v-show="current === 2">
			                关注官微的内容
			            </view>
			        </view>
			</view>
		</view>
		<!-- <view v-if="!isLogin" class="loginTip" @click="sharelogin=true">
			<text style="color: #20269B;">登录</text>之后才能看到名片
		</view> -->
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="descriptionBox">
				<view class="popupClose">
					<text class="iconfont icon-guanbi" @click="$refs.popup.close()"></text> 
					<!-- <view class="popupTit">
						{{popupTitle}}
					</view> -->
				</view>
				
				<view class="" v-if="optionType=='shareData'">
					<view class="" v-for="item in staticData" :key="item.name">
						<view class="staticItem">
							<text class="iconfont staticIcon" :class="item.icon" ></text> 
							{{item.name}}：{{item.value}}{{item.unit}}
							
						</view>
					</view>
					
				</view>
				<view class="" v-if="optionType=='focus' || (optionType=='shareCard'&&runEnv=='browser')">
					<view class="codeBox">
						<image v-if="cardInfo.qwQrcode"  :src="cardInfo.qwQrcode" mode="widthFix" style="width:250rpx !important;"></image>
						<image v-else  src="@/static/cffpCode.jpg" mode="widthFix" style="width:250rpx !important;"></image>
					</view>
					<view class="description">
					长按识别二维码 保存或分享图片
					</view>
				</view>
				
			</view>
			
		</uni-popup>
		<view class="markBox" @click="shareTipsFlag=false" v-if="shareTipsFlag">
			<view class="guideImgBox">
				<image src="../../static/Group132.png" mode="widthFix"></image>
				<view class="tips">
					<view style="margin-bottom:30rpx">请点击右上角菜单</view>
					<view>分享给朋友</view>
				</view>
			</view>
		</view>
		<boot-page 
			loginSource="我的名片"
			v-if="sharelogin" 
			ref="sharelogin" 
			@close="loginClose()"
			@afterLogin="afterLogin()"
		></boot-page>
	</view>
</template>

<script>
import { initJssdkShare, setWechatShare,hshare } from '@/util/fiveshare';
import {shareURL,companyInfo} from "@/environments/environment";
import api from "@/api/api";
import BootPage from "@/components/bootpage/bootpage.vue";
import dataHandling from "@/util/dataHandling";
import customSegmentedControl from '@/components/customSegmentedControl/customSegmentedControl.vue';
	export default{
		name:'businessCard',
		components:{
			BootPage,
		},
		data(){
			return{
				sharelogin:false,//是否需要登录
				isLogin:true,//登录状态
				shareTipsFlag:false,
				runEnv:dataHandling.getRuntimeEnv(), //运行的环境
				companyType : companyInfo.companyType,
				companyLogo : '../../static/suplogo.png',
				 sharePictrue:'../static/images/cardLogo.png',
				
				 infoList:[
					 {value:'暂无',icon:'icon-dianhua',id:'1'},
					 {value:'暂无',icon:'icon-youxiang',id:'2'},
					 {value:'暂无',icon:'icon-dingwei',id:'3'},
				 ],
				 items: ["关于我们", "企业荣誉", "关注官微"],
				 current: 0,
				 systemInfo:{},
				 cardInfo:{},//名片信息
				 isShare:false,//是否通过分享链接进来的
				 userId:uni.getStorageSync('cffp_userId'),
				 cardId:'',
				 staticData:[
					 {name:'总访问人数',value:0,unit:'人',icon:'icon-zhongdianrenquntongji',color:'#3639A9'},
					 {name:'总访问量',value:0,unit:'次',icon:'icon-zongfangwenliang',color:'#3639A9'},
				 ],
				 optionType:'',
				 popupTitle:''
			}
		},
		computed: {
			btnList() {
				if(this.isShare){
					return [
						{name:'分享名片',icon:'icon-fenxiang',id:'1',color:'#20269B',type:'shareCard'},
						{name:'拨打电话',icon:'icon-daohang',id:'2',color:'#fff',phoneNumber:'18918485032',type:'phone'},
						{name:'关注我',icon:'icon-guanzhuwode',id:'3',color:'#fff',type:'focus'},
					]
				}else {
					return [
					 {name:'分享名片',icon:'icon-fenxiang',id:'1',color:'#20269B',type:'shareCard'},
					 {name:'拨打电话',icon:'icon-daohang',id:'2',color:'#fff',phoneNumber:'18918485032',type:'phone'},
					 {name:'关注我',icon:'icon-guanzhuwode',id:'3',color:'#fff',type:'focus'},
					 {name:'分享数据',icon:'icon-fenxiangshuju',id:'4',color:'#fff',type:'shareData'},
				 ]
				}
				
			}
			
		},
		 onLoad(options) {
			 if(options.isShareCard){
				 this.isShare = true
				 this.userId = options.userId
				 this.cardId = options.cardId
			 }
		   this.systemInfo = uni.getSystemInfoSync();
		   const { platform, deviceType, screenWidth, screenHeight } = this.systemInfo;
		   
		 },
		 onShow() {
			 // 是通过分享进来的但未登录
			// if(this.isShare&&(!uni.getStorageSync('loginType') ||uni.getStorageSync('loginType') == 'visitor')){
			// 	this.sharelogin = true
			// 	this.isLogin = false
			// }else {
			// 	this.isLogin = true
			// 	this.getCard()
			// }
		 	if(this.companyType == '1'){
		 		this.companyLogo='../../static/myteam/Group1633.png';
		 	}else if(this.companyType == '2'){
		 		this.companyLogo='../../static/suplogo.png';
		 	}
			if(this.isShare){
				this.getShareCard()
			}else {
				this.getCard()
			}
			
		 },
		 onUnload(){
			 // #ifdef H5
			 	initJssdkShare(() => {
			 	  setWechatShare();
			 	}, window.location.href);
			 // #endif
		 },
		methods:{
			afterLogin(){
				this.sharelogin = false
				this.isLogin = true
				this.getCard()
			},
			// H5 自定义分享
			getshareData() {
				let data = {
					title: this.cardInfo.userName?`我是${this.cardInfo.userName}的电子名片`:'电子名片',
					// desc: '加入我们开启学习之旅',
					desc:'专注为家庭提供全资产、全成员、全生命周期的复合型家庭事务治理方案',
					link: `${shareURL}/myPackageA/businessCard/businessCard?userId=${this.userId}&cardId=${this.cardId}&isShareCard=1`, //分享链接
					imgUrl: `${shareURL}/myPackageA/static/images/cardLogo.png`, //图片
				}
				var url = window.location.href.split('#')[0]
				hshare(data, url)
			},
			// 分享状态下获取名片信息
			getShareCard(){
				api.getShareBusinessCard(
					this.cardId
				).then(res =>{
					if(res['success']){
						this.cardInfo = res.data.data
						this.cardId = res.data.data.id
						this.infoList[0].value = this.cardInfo.phone || '暂无'
						this.btnList[1].phoneNumber = this.cardInfo.phone || null
						this.infoList[1].value = this.cardInfo.email || '暂无'
						this.infoList[2].value = this.cardInfo.address || '暂无'
						
						this.getshareData()
					}else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			// 不是分享状态下获取名片信息
			getCard(){
				api.getBusinessCard(
					this.userId
				).then(res =>{
					if(res['success']){
						this.cardInfo = res.data.data
						this.cardId = res.data.data.id
						this.infoList[0].value = this.cardInfo.phone || '暂无'
						this.btnList[1].phoneNumber = this.cardInfo.phone || null
						this.infoList[1].value = this.cardInfo.email || '暂无'
						this.infoList[2].value = this.cardInfo.address || '暂无'
						// this.cardInfo.avatarUrl = 'https://dev-yindun-store.oss-cn-shanghai-finance-1-pub.aliyuncs.com/dealerEmployee/4eaf5af32e9c4589aa01c28d0e74e1e8/8fa37642f20a49d5beae7a8002c46c57/registerBg.png'
						this.getshareData()
						this.getCardStatic()
					}else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			// 获取名片统计数据
			getCardStatic(){
				api.getCardStats(
					{userId:this.userId,cardId:this.cardId}
				).then(res =>{
					if(res['success']){
						if(res.data.data){
							this.staticData[0].value = res.data.data.uvNum
							this.staticData[1].value = res.data.data.pvNum
						}
						
					}else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			onClickItem(index) {
			  if (this.current !== index) {
				this.current = index;
				
			  }
			},
			// 按钮点击事件
			handleBtnClick(item) {
				// // 拨打电话按钮
			  if (item.id === '2') {
				  if(item.phoneNumber){
					 uni.makePhoneCall({
					   phoneNumber: item.phoneNumber.replace(/\s+/g, ''),
					   success: () => {
					 	console.log('拨打电话成功');
					   },
					   fail: (err) => {
					   
					 	uni.showToast({
					 	  title: '拨打电话失败',
					 	  icon: 'none'
					 	});
					   }
					 }); 
				  }else {
					  uni.showToast({
					  	title: '暂无电话',
					  	duration: 2000,
					  	icon: 'none'					
					  })
				  }
				
				
			  } else {
				// 其他按钮的处理逻辑
				if(item.type!=='shareCard' || (item.type=='shareCard'&&this.runEnv=='browser')){
					this.optionType = item.type
					this.popupTitle = item.name
					this.$refs.popup.open()
					return
				}
				// 如果是移动端
				this.shareTipsFlag = true;
				this.getshareData()
			  }
			},
			//关闭登录
			loginClose(val,loginTypeSync,type) {
				// 直接点击了关闭登录的叉号
				if(type){
					this.sharelogin = false
					this.isLogin = false
					return
				}
				if (val) {
					this.sharelogin = false
					
				} else {
					this.sharelogin = false
				}
				
			},
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		background-color: rgba(235, 239, 247, 1);
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20rpx;
		.loginTip{
			width: 100%;
			height: 50vh;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.cardHeader{
			box-sizing: border-box;
			border-radius: 20rpx ;
			background-color: #fff;
			.introduct{
				box-sizing: border-box;
				background-image: url('/myPackageA/static/images/cardBg.png');
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				padding: 10rpx 15rpx;
				width: 100%;
				border-radius: 20rpx;
				.introductHeader{
					display: flex;
					align-items: center;
					width: 100%;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					.left{
						flex: 1;
						display: flex;
						background-color: #fff;
						border-radius: 50%;
						align-items: center;
						justify-content: center;
						border: 8rpx solid #fff;
						.avatar{
							margin-top: -5rpx;
							flex-grow: 0;
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
							overflow: hidden;
							// margin-right: 15rpx;
							/* 背景图设置 */
							  background-size: cover;
							  background-position: center;
							  background-repeat: no-repeat;
							/* 添加以下属性强制硬件加速 */
							transform: translateZ(0);
							-webkit-transform: translateZ(0);
							backface-visibility: hidden;
							-webkit-backface-visibility: hidden;
							
							image{
								width: 100%;
								border-radius: 50%;
								object-fit: cover;
								/* 同样为图片添加硬件加速 */
								transform: translateZ(0);
								-webkit-transform: translateZ(0);
								border-radius: none !important;
							}
						}
						
					}
					.right{
						width:100% ;
						margin-left: 10rpx;
						box-sizing: border-box;
						color: #fff;
						display: flex;
						flex-direction: column;
						.top{
							width: 100%;
							font-size: 30rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}
						.bottom{
							width: 100%;
							font-size: 26rpx;
							.bottomCon{
								box-sizing: border-box;
								width: 100%;
								display: flex;
								justify-content: space-between;
							}
							
						}
					}
				}
				.introductContent{
					width: 100%;
					box-sizing: border-box;
					.infoCon{
						width: 100%;
						display: flex;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
						margin-bottom: 10rpx;
						.infoIcon{
							margin-right: 15rpx;
						}
					}
				}
				
			}
			.optionBtn{
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				.btnCon{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.btnIcon{
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 10rpx;
					}
					.shareStyle{
						color: #20269B;
						font-size: 40rpx;
					}
					.commonBtn{
						background-color: #20269B;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						color: #ffff;
					}
					.btnTxt{
						font-size: 26rpx;
					}
				}
				
			}
		}
		.descriptionBox {
			width: 510rpx;
			padding: 40rpx;
			.popupTit{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom: 10rpx;
			}
			.popupClose{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.icon-guanbi{
					font-size: 28rpx;
					
				}
			}
			.staticItem{
				font-size: 28rpx;
				margin-bottom: 10rpx;
				.staticIcon{
					font-size: 30rpx;
					color: #20269B;
					margin-right: 5rpx;
				}
			}
			.imageBox{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: 600;
				.subTit{
					font-size: 28rpx;
					color: #919094;
					margin: 15rpx 0;
					font-weight: 400;
				}
			}
			.codeBox{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 250rpx;
			}
			.description{
				color: rgba(56, 56, 56, 1);
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.markBox {
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			color: #fff;
			display: flex;
			justify-content: flex-end;
			z-index: 100000;
			background: rgba(0, 0, 0, 0.8);
			.guideImgBox {
				margin: 20px auto;
				uni-image {
					width: 25% !important;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			
			.tips {
				margin-top: 30%;
				padding: 0 30px;
			}
		}
		
	}
	::v-deep .my-segmented-control .segmented-control__item .uni-segmented-control__text {
	  font-size: 30rpx !important;
	}
	
</style>
