<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<block v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="carddetail-content padding-box-all">
				<view class="carduserInfo-box">
					<view class="carduserInfo-top p-r">
						<view class="cardInfo dis-flex flex-x-center flex-x-between">
							<view class="cardInfo-left">
								<view class="cardInfo-nameBox dis-flex flex-y-center">
									<view class="col-3 f-36 m-right30">{{ cardInfoData.name }}</view>
									<view class="col-9 f-28">{{ cardInfoData.position }}</view>
								</view>
								<view class="seg"></view>
								<view class="f-24 col-3">{{ cardInfoData.company }} | {{ cardInfoData.branch }}</view>
							</view>
							<view class="cardInfo-right" :style="{ 'background-image': 'url(' + cardInfoData.logo + ')' }"></view>
						</view>
						<view class="cardInfo-contact">
							<view class="f-24 f-w m-btm20" >									主营行业<text style="padding: 0 10upx;">:</text>{{cardInfoData.one_class_title}} <text style="padding: 0 10upx;">-</text> {{cardInfoData.two_class_title}}							</view>
							<view class="address dis-flex flex-y-center m-btm20" v-if="!!cardInfoData.address && cardInfoData.show_addr === '1'">
								<view class="iconfont icon-location icon-Class m-right20 col-9"></view>
								<view class="col-3 f-24">{{ cardInfoData.address }}</view>
							</view>
							<view class="phone dis-flex flex-y-center m-btm20" v-if="!!cardInfoData.mobile">
								<view class="iconfont icon-dianhua icon-Class m-right20 col-9"></view>
								<view class="col-3 f-24">{{ cardInfoData.mobile }}</view>
							</view>
							<view class="wx dis-flex flex-y-center m-btm20" v-if="!!cardInfoData.wechat && cardInfoData.show_wechat === '1'">
								<image :src="imgfixUrls + 'businesscard/wx.png'"></image>
								<view class="col-3 f-24 m-right20">{{ cardInfoData.wechat }}</view>
								<view class="copy f-24 col-f4" @click="copy(cardInfoData.wechat)">
									点击复制
								</view>
							</view>
							<view class="brief dis-flex flex-y-center" v-if="!!cardInfoData.desc">
								<view class="iconfont icon-xiangqing icon-Class m-right20 col-9"></view>
								<view class="col-3 f-24 briefTextwh">{{ cardInfoData.desc }}</view>
							</view>
						</view>
						<view class="businessCard_detail_bg" :style="{ 'background-image': 'url(' + imageRoot + 'businessCard_detail_bg.png)' }"></view>
					</view>
					<view class="carduserInfo-btm">
						<view class="shadow-seg"></view>
						<view class="cardDataList dis-flex flex-y-center flex-x-between">
							<view class="cardDataItem">
								<view class="col-3 f-28 t-c">{{ cardInfoData.pv }}</view>
								<view class="col-9 f-24 t-c">人气</view>
							</view>
							<view class="cardDataItem">
								<view class="col-3 f-28 t-c">{{ cardInfoData.laud }}</view>
								<view class="col-9 f-24 t-c">点赞</view>
							</view>
							<view class="cardDataItem">
								<view class="col-3 f-28 t-c">{{ cardInfoData.total_collect }}</view>
								<view class="col-9 f-24 t-c">收存</view>
							</view>
							<view class="cardDataItem">
								<view class="col-3 f-28 t-c">{{ cardInfoData.share }}</view>
								<view class="col-9 f-24 t-c">转发</view>
							</view>
						</view>
					</view>
				</view>
				<view class="carduserfcbtn-box">
					<view class="fcbtn-list dis-flex flex-y-center flex-x-between">
						<view
							class="fcbtn-item dis-flex flex-y-center flex-x-center defau-btn"
							:class="{ 'fnclick-dz': cardInfoData.is_laud === 1 }"
							@click="fnClick('laud', cardInfoData.id)"
						>
							<view class="iconfont icon-appreciate_light fcbtn-itemIconfont m-right12"></view>
							<view class="f-28" :class="cardInfoData.is_laud === 1 ? 'col-f4' : 'col-3'">{{ cardInfoData.is_laud === 1 ? '已赞' : '赞' }}</view>
						</view>
						<view
							class="fcbtn-item dis-flex flex-y-center flex-x-center defau-btn"
							:class="{ 'fnclick-dz': cardInfoData.is_collect === 1 }"
							@click="fnClick('collect', cardInfoData.id)"
						>
							<view class="iconfont icon-punch_light fcbtn-itemIconfont m-right12"></view>
							<view class="col-3 f-28" :class="cardInfoData.is_collect === 1 ? 'col-f4' : 'col-3'">{{ cardInfoData.is_collect === 1 ? '已收存' : '收存' }}</view>
						</view>
						<view class="fcbtn-item dis-flex flex-y-center flex-x-center defau-btn" @click="fnClick('share', cardInfoData.id)">
							<view class="iconfont icon-share_light fcbtn-itemIconfont m-right12"></view>
							<view class="col-3 f-28">转发</view>
						</view>
					</view>
				</view>
				<view class="cardusertabbar-box">
					<view class="tabbar-list dis-flex flex-y-center">
						<view
							class="tabbar-item dis-flex flex-box flex-x-center f-28 p-r"
							:class="currentabType === tabbarItem.tabType ? 'col-f4' : 'col-3'"
							v-for="(tabbarItem, index) in tabbar"
							:key="index"
							@click="tabbarSelect(tabbarItem)"
						>
							{{ tabbarItem.title }}
							<view class="selectabbar-item" v-if="currentabType === tabbarItem.tabType"></view>
						</view>
					</view>
					<!-- 店铺 -->
					<view class="shop-content " v-if="currentabType === 'shop'">
						<block v-if="!!shopData && shopData.length > 0">
							<view class="post-list-scrollView1">
								<view class="shop-list b-f">
									<view class="shop b-color-f8">
										<view class="shangjia">
											<view class="shangjia-i" :class="{ shangjiaISty: item2.goods.length == 0 }" v-for="(item2, key2) in shopData" :key="key2">
												<view class="a shangjia-i-t" @click="navgateTo(item2.id)">
													<view class="shangjia-i-l"><image class="image" :src="item2.logo" mode="aspectFill"></image></view>
													<view class="shangjia-i-r">
														<view class="shangjia-i-r-d">
															<view class="dis-flex flex-y-center flex-x-between">
																<view class="shop3-title-width shangjia-i-r-t1 over-omit onelist-hidden">{{ item2.storename }}</view>
																<view class="store-containerIcon dis-flex flex-y-center">
																	<image :src="imgfixUrls + 'diypage/720icon.png'" mode="" class="m-right10" v-if="item2.panorama === 1"></image>
																	<image :src="imgfixUrls + 'diypage/videoicon.png'" mode="" v-if="item2.videourl === 1"></image>
																</view>
															</view>
															<view class="shangjia-i-r-t2 over-omit dis-flex flex-x-between flex-y-center">
																<view class="dis-flex flex-y-center">
																	<view class="shangjia-i-r-t2-icon">
																		<view class="star star-dark">
																			<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
																		</view>
																		<view class="star star-light">
																			<view class="star-width" :style="'width:' + (item2.score / 5) * 100 + '%;'">
																				<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view>
																			</view>
																		</view>
																	</view>
																	<view class="f-28 col-6 star-grade">{{ item2.score }}分</view>
																</view>
																<view class="shop3-distance f-24 col-6" v-if="!!item2.distance">{{ item2.distance }}</view>
															</view>
															<view class="shangjia-i-r-t3 over-omit"><view class="p" v-html="item2.storehours"></view></view>
															<view class="shangjia-i-r-t4 over-omit">
																<view v-for="(item3, index3) in item2.tags" class="tags_view">{{ item3 }}</view>
															</view>
														</view>
													</view>
												</view>
												<view class="shangjia-i-b" v-if="((shopFold && shopFoldIndex == key2) || shopFoldIndex !== key2) && item2.goods.length > 0">
													<view class="shangjia-i-b-t1" v-if="item2.goods.length <= 2">
														<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
															<view class="em" :class="tag.css">{{ tag.tag }}</view>
															<view class="span">{{ tag.name }}</view>
														</view>
													</view>
													<view class="shangjia-i-b-t1" @click="shangjiaFold(key2)" v-if="item2.goods.length > 2">
														<view class="i icon iconfont icon-unfold"></view>
														<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0">
															<view class="em" :class="tag.css">{{ tag.tag }}</view>
															<view class="span">{{ tag.name }}</view>
														</view>
													</view>
													<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="item2.goods.length == 2 && key3 == 1">
														<view class="em" :class="tag.css">{{ tag.tag }}</view>
														<view class="span">{{ tag.name }}</view>
													</view>
													<view class="shangjia-i-b-t2" v-if="item2.goods.length > 2">
														<view class="em" :class="tag.css" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 > 0">{{ tag.tag }}</view>
													</view>
												</view>
												<view class="shangjia-i-b" v-if="!shopFold && shopFoldIndex == key2 && item2.goods.length > 2">
													<view class="shangjia-i-b-t1" @click="shangjiaUpFold(key2)">
														<view class="i icon iconfont icon-fold"></view>
														<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3">
															<view class="em" :class="tag.css">{{ tag.tag }}</view>
															<view class="span">{{ tag.name }}</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
						<nonemores v-else></nonemores>
					</view>
					<!-- 发布 -->
					<view class="issue-content" v-if="currentabType === 'post' && tabbar.length > 0">
						<block v-if="!!invitationListData && invitationListData.length > 0">
							<view class="post-list-scrollView">
								<view v-for="(issueItem, index) in invitationListData">
									<post-list :itemInfo="issueItem" :indexNumber="index" :indexShow="indexShow" @operationShow="operationShow"></post-list>
								</view>
								<loadmore :isMore="postMore" />
							</view>
						</block>
						<nonemores v-else></nonemores>
					</view>
				</view>
			</view>
			<view class="bottomFixedTabbar dis-flex flex-y-center flex-x-between b-f">
				<view class="bottomFixedTabbar-left">
					<view class="menuList dis-flex flex-y-center flex-x-between">
						<view class="menu-item" @click="fnbottomClick('index')">
							<image :src="imgfixUrls + 'businesscard/index.png'" class="menu-itemImage"></image>
							<view class="menu-name f-24 col-3">首页</view>
						</view>
						<view class="menu-item" @click="fnbottomClick('mycard')">
							<image :src="imgfixUrls + 'businesscard/card.png'" class="menu-itemImage"></image>
							<view class="menu-name f-24 col-3">我的名片</view>
						</view>
						<view class="menu-item" @click="fnClick('share', cardInfoData.id)">
							<image :src="imgfixUrls + 'businesscard/share.png'" class="menu-itemImage"></image>
							<view class="menu-name f-24 col-3">转发</view>
						</view>
					</view>
				</view>
				<view class="bottomFixedTabbar-right dis-flex flex-box">
					<view class="tabbar-btnlist dis-flex flex-y-center flex-x-between">
						<view class="tabbar-chat tabbar-btnStyle dis-flex flex-y-center">
							<image :src="imgfixUrls + 'businesscard/chat.png'" class="tabbar-itemImage"></image>
							<view class="menu-name f-24 col-f" @click="fnbottomClick('chat', cardInfoData.mid)">在线聊</view>
						</view>
						<view
							class="tabbar-phone tabbar-btnStyle dis-flex flex-y-center"
							@click="fnbottomClick('phone', cardInfoData.mobile)"
							:class="cardInfoData.show_mobile == '1' ? '' : 'cantCall'"
						>
							<text
								class="icon iconfont icon-dianhua1 f-24 col-f menu-name ver_mid"
								v-if="cardInfoData.show_mobile == '0'"
								:class="cardInfoData.show_mobile == '1' ? '' : 'cantCall_text'"
							></text>
							<image :src="imgfixUrls + 'businesscard/phone.png'" class="tabbar-itemImage" v-if="cardInfoData.show_mobile == '1'"></image>
							<view class="menu-name f-24 col-f ver_mid" :class="cardInfoData.show_mobile == '1' ? '' : 'cantCall_text'">打电话</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view  v-if="cardInfoData.id">
			<shareBottom
				:shareBottomShow="shareBottomShow"
				@clickmask="closeShareBottom"
				:shareShow="shareShow"
				@closeShareShow="closeShareShow"
				@shareImgShow="shareImgShow"
				:isCard="isCard"
				:postId="cardInfoData.id"
				@gohb="goPost"
				:postType="11"
			></shareBottom>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import postList from '@/components/template/postList.vue';
import Loadlogo from '@/components/template/loadlogo';
import nonemores from '@/components/template/nonemores.vue';
import loadmore from '@/components/template/loadmore.vue';
import shareBottom from '@/components/template/shareBottom';
export default {
	data() {
		return {
			loadlogo: false,
			currentabType: 'post',
			cardInfoData: {},
			shopData: [],
			current_page: 1,
			total: null,
			index: -1,
			indexShow: -1,
			invitationListData: [],
			agencyData: {},
			postMore: true,
			shareBottomShow: false,
			shareShow: false,
			tabbar: [
				{
					title: 'Ta的动态',
					tabType: 'post'
				},
				{
					title: 'Ta的店铺',
					tabType: 'shop'
				}
			]
		};
	},
	methods: {
		copy(text){
			//#ifdef H5
				App.clipboard(text);
			//#endif
			//#ifndef H5
				uni.setClipboardData({
				    data: text,
				    success: function () {
				        uni.showToast({
				        	title:'订单号已复制到粘贴板',
							icon:'none'
				        })
				    }
				});
			//#endif
			
			// uni.setClipboardData({
			//     data: text,
			//     success: function () {
			//        uni.showToast({
			//        	title:'复制成功',
			// 		icon:'none'
			//        })
			// 	   uni.hideToast()
			//     }
			// });
		},
		// tabbar选项
		tabbarSelect(tabbarItem) {
			let _this = this,
				cardInfoData = _this.cardInfoData,
				agencyData = _this.agencyData;
			uni.showLoading({});
			if (tabbarItem.tabType === 'shop') {
				_this.getuserShopList(cardInfoData.mid, agencyData.lat, agencyData.lng);
			} else {
				_this.getuserList(cardInfoData.mid, 1, 0, false);
				_this.current_page = 1;
			}
			_this.currentabType = tabbarItem.tabType;
		},
		navgateTo(sid) {
			let _this = this;
			App.navigationTo({
				url: 'pages/mainPages/store/index?sid=' + sid
			});
		},
		//
		// 获取名片信息
		getCardDetail(id = 4) {
			let _this = this,
				agencyData = uni.getStorageSync('agencyData');
			App._post_form(
				'&p=citycard&do=cardInfo',
				{
					id
				},
				res => {
					if (res.errno === 0) {
						_this.setData({
							cardInfoData: res.data,
							agencyData
						});
						// debugger
						if( _this.cardInfoData.showstore == 0 && _this.cardInfoData.showpocket == 0 ){
							_this.tabbar = [];
							return
						}else if(_this.cardInfoData.showpocket == 0 &&  _this.cardInfoData.showstore ==1) {
							_this.tabbar = [
								{
									title: 'Ta的店铺',
									tabType: 'shop'
								}
							];
							_this.tabbarSelect(_this.tabbar[0]);
							return
						}else if (_this.cardInfoData.showpocket == 1 && _this.cardInfoData.showstore == 0) {
							_this.tabbar = [
								{
									title: 'Ta的动态',
									tabType: 'post'
								}
							];
							_this.getuserList(res.data.mid);
							return
						}else if(_this.cardInfoData.showpocket == 1 && _this.cardInfoData.showstore == 1){
							_this.getuserList(res.data.mid);
						}
						
					}
				},
				false,
				() => {
					_this.loadlogo = true;
				}
			);
		},
		// 点赞
		laudCollect(type, id) {
			let _this = this,
				cardInfoData = _this.cardInfoData,
				requestUrl = type === 'laud' ? '&p=citycard&do=cardFabulous' : '&p=citycard&do=cardCollect',
				islaudCollect = type === 'laud' ? 'is_laud' : 'is_collect',
				laudCollect = type === 'laud' ? 'laud' : 'total_collect';
			console.log(islaudCollect);
			App._post_form(
				requestUrl,
				{
					id
				},
				res => {
					if (res.errno === 0) {
						if (cardInfoData[islaudCollect] === 0) {
							_this.$set(_this.cardInfoData, islaudCollect, 1);
							cardInfoData[laudCollect] = Number(cardInfoData[laudCollect]) + 1;
						} else {
							if (cardInfoData[islaudCollect] === 1) {
								_this.$set(_this.cardInfoData, islaudCollect, 0);
								cardInfoData[laudCollect] = cardInfoData[laudCollect] - 1;
							}
						}
					}
				}
			);
		},
		fnClick(type, id, isShow = true) {
			let _this = this;
			if (type === 'laud' || type === 'collect') {
				_this.laudCollect(type, id);
			}
			if (type === 'share') {
				if (isShow) {
					_this.shareBottomShow = true;
				}
			}
		},
		goPost(data) {
			let _this = this;
			_this.shareBottomShow = false;
		},
		closeShareBottom() {
			let _this = this;
			_this.shareBottomShow = false;
		},
		// 关闭分享弹框
		closeShareShow() {
			let _this = this;
			_this.shareShow = false;
			_this.shareBottomShow = false;
		},
		shareImgShow() {
			let _this = this;
			_this.shareShow = true;
			_this.shareBottomShow = false;
		},
		shangjiaFold(key2) {
			this.shopFold = false;
			this.shopFoldIndex = key2;
		},
		shangjiaUpFold(key2) {
			this.shopFold = true;
			this.shopFoldIndex = key2;
		},
		operationShow(e) {
			let _this = this;
			_this.indexShow = e;
		},
		// 获取店铺信息列表
		getuserShopList(mid = '', lat = '', lng = '') {
			let _this = this;
			App._post_form(
				'&p=store&do=userShopList',
				{
					mid,
					lat,
					lng
				},
				res => {
					if (res.errno === 0) {
						for (let i = 0; i < res.data.length; i++) {
							let goodsList = [];
							for (let j in res.data[i].goods) {
								let goodsData = res.data[i].goods[j];
								if (goodsData !== '') {
									if (j == 'active') {
										goodsData.css = 'qiang';
										goodsData.tag = '抢';
									} else if (j == 'coupon') {
										goodsData.css = 'hui';
										goodsData.tag = '券';
									} else if (j == 'fightgroup') {
										goodsData.css = 'pin';
										goodsData.tag = '拼';
									} else if (j == 'groupon') {
										goodsData.css = 'tuan';
										goodsData.tag = '团';
									} else if (j == 'halfcard') {
										goodsData.css = 'ka';
										goodsData.tag = '卡';
									} else if (j == 'packages') {
										goodsData.css = 'li';
										goodsData.tag = '礼';
									}
									goodsList.push(goodsData);
								}
							}
							res.data[i].goods = goodsList;
						}
						_this.setData({
							shopData: res.data
						});
					}
				},
				false,
				() => {
					uni.hideLoading();
				}
			);
		},

		getuserList(mid = '', page = 1, status = 0, isPage = false) {
			let _this = this;
			App._post_form(
				'&p=pocket&do=userList',
				{
					mid,
					page,
					status
				},
				res => {
					if (res.errno === 0) {
						let invitationData = res.data;
						if (isPage) {
							if (invitationData.list.length > 0) {
								_this['invitationListData'].push(...invitationData.list);
							} else {
								_this.postMore = true;
							}
						} else {
							_this.setData({
								invitationListData: invitationData.list,
								total: res.data.total,
								postMore: invitationData.list.length === 0 || _this.current_page === res.data.total
							});
						}
					}
				},
				false,
				() => {
					uni.hideLoading();
				}
			);
		},
		fnbottomClick(type, clickData) {
			let _this = this;
			switch (type) {
				case 'chat':
					// App.navigationTo({
					// 	url: `pages/subPages/homepage/chat/chat?other_party_id=${clickData}&type=1&other_party_type=1`
					// });
					let getSetInfo = uni.getStorageSync('getSetInfo');
					if (getSetInfo.type == 1) {
						App.navigationTo({
							url: 'pagesA/instantMessenger/instantMessenger?other_party_id=' + clickData + '&other_party_type=' + 1 + '&type=1' + '&id='
						});
					} else {
						App.navigationTo({
							url: 'pages/subPages/homepage/chat/chat?other_party_id=' + clickData + '&other_party_type=' + 1 + '&type=1' + '&id='
						});
					}
					break;
				case 'phone':
					uni.makePhoneCall({
						phoneNumber: clickData //仅为示例
					});
					break;
				case 'index':
					App.navigationTo({
						url: 'pages/mainPages/index/diypage?i=26&type=13'
					});
					break;
				case 'mycard':
					App.navigationTo({
						url: 'pages/subPages/businesscard/carddetail/renewcarddetail',
						navType: 'rediRect'
					});
					break;
			}
		}
	},
	computed: {
		isCard() {
			let ClientType = App.getClientType();
			return ClientType !== '3' ? false : true;
		},
		cardShare() {
			return this.$store.state.isCardshare;
		}
	},
	watch: {
		cardShare(newValue, oldValue) {
			let _this = this;
			if (newValue > oldValue) {
				App._post_form(
					'&p=citycard&do=cardShare',
					{
						id: _this.cardInfoData.id
					},
					res => {
						if (res.errno === 0) {
							_this.$set(_this.cardInfoData, 'share', Number(_this.cardInfoData.share) + 1);
						}
					}
				);
			}
		}
	},
	components: {
		postList,
		Loadlogo,
		nonemores,
		loadmore,
		shareBottom
	},
	onLoad(e) {
		let _this = this;
		console.log(e, 66666666111);
		_this.getCardDetail(e.cardid);
	},
	//加载更多
	onReachBottom(e) {
		let _this = this,
			currentType = _this.currentabType,
			cardInfoData = _this.cardInfoData,
			agencyData = _this.agencyData;
		if (_this.current_page >= _this.total) {
			_this.postMore = true;
			return false;
		}
		if (currentType === 'post') {
			_this.getuserList(cardInfoData.mid, ++_this.current_page, 0, true);
		} else if (currentType === 'shop') {
			_this.getuserShopList(cardInfoData.mid, agencyData.lat, agencyData.lng);
		}
	}
};
</script>

<style lang="scss">
@import '/detailStyle.css';
@import '../../../../common/css/old_diyPages';

.cantCall {
	background: #eeeeee !important;
	pointer-events: none;
}

.ver_mid {
	vertical-align: middle;
}

.cantCall_text {
	color: rgba(153, 153, 153, 1) !important;
}
</style>
