<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<block v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="carddetail-content padding-box-all">
				<view v-for="(cardItem,index) in cardData.list" :key="index" v-if="!!cardData.list && cardData.list.length>0">
					<view class="carduserInfo-box m-btm30" v-if="cardItem.paystatus==='1' && cardItem.checkstatus==='1'">
						<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">{{cardItem.name}}</view>
										<view class="col-9 f-28">{{cardItem.position}}</view>
									</view>
									<view class="seg"></view>
									<view class="f-24 col-3">{{cardItem.company}}{{!!cardItem.branch?'|'+cardItem.branch:''}}</view>
								</view>
								<view class="cardInfo-right" :style="{'background-image':'url('+cardItem.logo+')'}"></view>
							</view>
							<view class="cardInfo-contact">
								<view class="f-24 f-w m-btm20" >
										主营行业<text style="padding: 0 10upx;">:</text>{{cardItem.one_class_title}} <text style="padding: 0 10upx;">-</text> {{cardItem.two_class_title}}
								</view>
								<view class="address dis-flex flex-y-center m-btm20" v-if="!!cardItem.address && cardItem.show_addr==='1'">
									<view class="iconfont icon-location icon-Class m-right20 col-9"></view>
									<view class="col-3 f-24">{{cardItem.address}}</view>
								</view>
								<view class="phone dis-flex flex-y-center m-btm20" v-if="!!cardItem.mobile">
									<view class="iconfont icon-dianhua icon-Class m-right20 col-9"></view>
									<view class="col-3 f-24">{{cardItem.mobile}}</view>
								</view>
								<view class="wx dis-flex flex-y-center m-btm20" v-if="!!cardItem.wechat && cardItem.show_wechat==='1'">
									<image :src="imgfixUrls + 'businesscard/wx.png'"></image>
									<view class="col-3 f-24 m-right20">{{ cardItem.wechat }}</view>
									<view class="copy f-24 col-f4" @click="copy(cardItem.wechat)">
										点击复制
									</view>
								</view>
								<view class="brief dis-flex flex-y-center" v-if="!!cardItem.desc">
									<view class="iconfont icon-xiangqing icon-Class m-right20 col-9"></view>
									<view class="col-3 f-24 briefTextwh">{{cardItem.desc}}</view>
								</view>
							</view>
							<view class="cardInfo-tab dis-flex flex-y-center padding-box">
								<view class="dis-flex cardInfo-tabItem col-3 f-24">人气:<text class="col-f4">{{cardItem.pv}}</text></view>
								<view class="dis-flex flex-box flex-x-center cardInfo-tabItem col-3 f-24">点赞:<text class="col-f4">{{cardItem.laud}}</text></view>
								<view class="dis-flex cardInfo-tabItem col-3 f-24">收存:<text class="col-f4">{{cardItem.total_collect}}</text></view>
							</view>
							<view class="businessCard_detail_bg" :style="{'background-image':'url('+imageRoot+'businessCard_detail_bg.png)'}"></view>
							<view class="cardEndTime" :style="{backgroundColor: cardItem.is_endtime===1?'#ff4444':'#31C418'}">
								<text class="col-f f-24">{{cardItem.meal_endtime}}</text>
								<text class="col-f f-24">{{cardItem.is_endtime===1?'已过期':'未过期'}}</text>
							</view>
						</view>
						<view class="carduserInfo-btm">
							<view class="shadow-seg"></view>
							<view class="fctabbar-box" style="padding: 0;">
								<view class="fctabbar-list dis-flex flex-y-center flex-x-between">
									<view class="fctabbar-item" :style="{flex: tops.length == 0 && meals.length == 0?'0 0 50%':((tops.length > 0 && meals.length == 0) || (tops.length == 0 && meals.length > 0))?'0 0 33.33%':'0 0 25%'}" @click="fnclick(cardItem,tabbarList[0]['tabtype'])" v-if="meals.length > 0">
										<image :src="tabbarList[0]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[0]['title']}}</view>
									</view>
									<view class="fctabbar-item" :style="{flex: tops.length == 0 && meals.length == 0?'0 0 50%':((tops.length > 0 && meals.length == 0) || (tops.length == 0 && meals.length > 0))?'0 0 33.33%':'0 0 25%'}" @click="fnclick(cardItem,tabbarList[1]['tabtype'])">
										<image :src="tabbarList[1]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[1]['title']}}</view>
									</view>
									<view class="fctabbar-item" :style="{flex: tops.length == 0 && meals.length == 0?'0 0 50%':((tops.length > 0 && meals.length == 0) || (tops.length == 0 && meals.length > 0))?'0 0 33.33%':'0 0 25%'}" @click="fnclick(cardItem,tabbarList[2]['tabtype'])" v-if="tops.length > 0">
										<image :src="tabbarList[2]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[2]['title']}}</view>
									</view>
									<view class="fctabbar-item" :style="{flex: tops.length == 0 && meals.length == 0?'0 0 50%':((tops.length > 0 && meals.length == 0) || (tops.length == 0 && meals.length > 0))?'0 0 33.33%':'0 0 25%'}" @click="fnclick(cardItem,tabbarList[3]['tabtype'])">
										<image :src="tabbarList[3]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[3]['title']}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="carduserInfo-box m-btm30" v-if="cardItem.paystatus==='0'">
						<view class="carduserPayInfo-top dis-flex flex-dir-column flex-y-center p-r">
							<view class="f-24 col-9 m-btm20">{{cardItem.name}}名片等待支付</view>
							<view class="carduserPayBtn f-24 col-6" @click="fnclick(cardItem,tabbarList[0]['tabtype'])">立即支付</view>
							<view class="businessCard_detail_bg" :style="{'background-image':'url('+imageRoot+'businessCard_detail_bg.png)'}"></view>
						</view>
						<view class="carduserPayInfo-bottom">
							<view class="shadow-seg"></view>
							<view class="fctabbar-box">
								<view class="fctabbar-list dis-flex flex-y-center flex-x-between">
									<view class="fctabbar-item" @click="fnclick(cardItem,tabbarList[0]['tabtype'])">
										<image :src="tabbarList[0]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[0]['title']}}</view>
									</view>
									<view class="fctabbar-item" @click="fnclick(cardItem,tabbarList[1]['tabtype'])">
										<image :src="tabbarList[1]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[1]['title']}}</view>
									</view>
									<view class="fctabbar-item" @click="fnclick(cardItem,tabbarList[2]['tabtype'])">
										<image :src="tabbarList[2]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[2]['title']}}</view>
									</view>
									<view v-if="cardItem.checkstatus!='0'" class="fctabbar-item" @click="fnclick(cardItem,tabbarList[3]['tabtype'])">
										<image :src="tabbarList[3]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[3]['title']}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="carduserInfo-box m-btm30" v-if="cardItem.paystatus==='1'&&(cardItem.checkstatus==='0' || cardItem.checkstatus==='2')">
						<view class="carduserPayInfo-top dis-flex flex-dir-column flex-y-center p-r">
							<block v-if="cardItem.checkstatus==='0'">
								<view class="f-24 col-9 m-btm20">{{cardItem.name}}名片等待审核</view>
							</block>
							<block v-else>
								<view class="f-24 col-9 m-btm20">{{cardItem.name}}名片被驳回</view>
							</block>
							<view class="businessCard_detail_bg" :style="{'background-image':'url('+imageRoot+'businessCard_detail_bg.png)'}"></view>
						</view>
						<view class="carduserPayInfo-bottom">
							<view class="shadow-seg"></view>
							<view class="fctabbar-box">
								<view class="fctabbar-list dis-flex flex-y-center flex-x-between">
									<view class="fctabbar-item" @click="fnclick(cardItem,tabbarList[0]['tabtype'])">
										<image :src="tabbarList[0]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[0]['title']}}</view>
									</view>
									<view class="fctabbar-item" @click="fnclick(cardItem,tabbarList[1]['tabtype'])">
										<image :src="tabbarList[1]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[1]['title']}}</view>
									</view>
									<view class="fctabbar-item" @click="fnclick(cardItem,tabbarList[2]['tabtype'])">
										<image :src="tabbarList[2]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[2]['title']}}</view>
									</view>
									<view v-if="cardItem.checkstatus!='0'" class="fctabbar-item" @click="fnclick(cardItem,tabbarList[3]['tabtype'])">
										<image :src="tabbarList[3]['tabImage']" class="fctabbarImage"></image>
										<view class="col-3 f-24">{{tabbarList[3]['title']}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="carduserInfo-box" v-if="cardData.surplus>0">
					<view class="carduserPayInfo-top dis-flex flex-dir-column flex-y-center p-r">
						<view class="f-24 col-9 m-btm20">您还可以再创建{{cardData.surplus===999?'多':cardData.surplus}}张名片</view>
						<view class="carduserPayBtn f-24 col-6" style="width: 280rpx !important;" @click="creatCard()">点击立即创建</view>
						<view class="businessCard_detail_bg" :style="{'background-image':'url('+imageRoot+'businessCard_detail_bg.png)'}"></view>
					</view>
				</view>
			</view>
			<view class="full"></view>
		</block>
		<view  v-if="currentPostId">
			<shareBottom :shareBottomShow="shareBottomShow" @clickmask="closeShareBottom" :shareShow="shareShow" @closeShareShow="closeShareShow"
			 @shareImgShow="shareImgShow" :isCard="isCard" :postId="currentPostId" :postType="'11'" @gohb="goPost"></shareBottom>
		</view>
		<PopManager :show="iscardRelevantInfo" :type="'bottom'" @clickmask="iscardRelevantInfo = false">
			<view class="b-f checkbox-content" style="padding-bottom: 150upx;">
				<scroll-view scroll-y="true" class="scrollView" v-if="currentTabType==='zhiding'">
					<radio-group @change="radioChange">
						<view class="scroll-tops">
							<label v-for="(topsItem,index) in tops" :key="index" class="labeStyle">
								<view class="tops-item">
									<view class="dis-flex flex-y-center m-btm40 labeStyle-btm">
										<view class="m-right20">
											<radio :value="topsItem.id" color="#FF4444" style="transform: scale(0.8);" />
										</view>
										<view class="f-28 col-3">{{topsItem.name}} {{topsItem.day}}天(
										<text v-if="topsItem.is_free != 1">收费¥{{topsItem.price}}</text>
										<text v-else>免费</text>)</view>
									</view>
								</view>
							</label>
						</view>
					</radio-group>
				</scroll-view>
				<scroll-view scroll-y="true" class="scrollView" v-if="currentTabType==='xufei'">
					<radio-group @change="radioChange">
						<view class="scroll-tops">
							<label v-for="(mealsItem,index) in meals" :key="index" class="labeStyle">
								<view class="tops-item">
									<view class="dis-flex flex-y-center m-btm40 labeStyle-btm">
										<view class="m-right20">
											<radio :value="mealsItem.id" color="#FF4444" style="transform: scale(0.8);" />
										</view>
										<view class="f-28 col-3" v-if="mealsItem.is_free != 1">{{mealsItem.name}} {{mealsItem.day}}天(收费¥{{mealsItem.price}})</view>
										<view class="f-28 col-3" v-else>免费</view>
									</view>
								</view>
							</label>
						</view>
					</radio-group>
				</scroll-view>
				<view class="checkbox-submit f-28 col-f t-c" @click="Submit">确认</view>
			</view>
		</PopManager>
		<TabBars :tabBarAct="0" pageType="13"></TabBars>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import shareBottom from '@/components/template/shareBottom'
	import PopManager from '@/components/template/PopManager'
	import Loadlogo from '@/components/template/loadlogo'
	import TabBars from '@/components/template/tabBar.vue'
	export default {
		data() {
			return {
				loadlogo: false,
				tabbarList: [{
						title: '续费',
						tabImage: 'businesscard/xufei.png',
						tabtype: 'xufei'
					},
					{
						title: '编辑',
						tabImage: 'businesscard/bianji.png',
						tabtype: 'bianji'
					},
					{
						title: '置顶',
						tabImage: 'businesscard/zhiding.png',
						tabtype: 'zhiding'
					},
					{
						title: '递名片',
						tabImage: 'businesscard/dimingpian.png',
						tabtype: 'dimingpian'
					}
				],
				cardData: {},
				meals: null,
				tops: null,
				shareBottomShow: false,
				shareShow: false,
				isCard: true,
				postId: null,
				iscardRelevantInfo: false,
				currentTabType: null,
				cardRelevantId: null
			}
		},
		methods: {
			copy(text){
				//#ifdef H5
					App.clipboard(value);
				//#endif
				
				//#ifndef H5
				uni.setClipboardData({
				    data: text,
				    success: function () {
				       uni.showToast({
				       	title:'复制成功',
						icon:'none'
				       })
				    }
				});
				//#endif
				
			},
			getMyCard() {
				let _this = this;
				App._post_form('&p=citycard&do=myCard', {
					page: 1,
					page_index: 999
				}, res => {
					_this.setData({
						cardData: res.data
					})
				}, false, () => {
					_this.loadlogo = true;
				})
			},
			getcardRelevantInfo() {
				let _this = this;
				App._post_form('&p=citycard&do=cardRelevantInfo', {}, res => {
					console.log('getcardRelevantInfo', res)
					_this.setData(res.data);
				})
			},
			fnclick(cardData, tabType) {
				let _this = this;
				if (tabType === 'dimingpian') {
					_this.shareBottomShow = true;
					// #ifdef H5
					_this.requestShareInfo(cardData.id)
					// #endif
					// #ifndef H5
					_this.mprequestShareInfo(cardData.id)
					// #endif
				}
				if (tabType === 'zhiding' || tabType === 'xufei') {
					_this.iscardRelevantInfo = true;
				}
				if (tabType === 'bianji') {
					App.navigationTo({
						url: `pages/subPages/businesscard/formcard/editformcard?id=${cardData.id}`
					})
				}
				_this.postId = cardData.id;
				_this.currentTabType = tabType;
			},

			creatCard() {
				App.navigationTo({
					url: 'pages/subPages/businesscard/formcard/formcard'
				})
			},
			Submit() {
				let _this = this,
					objid = _this.cardRelevantId,
					cardid = _this.currentPostId,
					currentTabType = _this.currentTabType;
				if (!!objid) {
					App._post_form('&p=citycard&do=renewCityCard', {
						cardid,
						objid,
						type: currentTabType === 'zhiding' ? '2' : '1'
					}, res => {
						uni.showLoading()
						let cityCardData = res.data;
						if (cityCardData.paystatus === 1) {
							_this.setData({
								shareShow: false,
								shareBottomShow: false,
								iscardRelevantInfo: false
							});
							App.navigationTo({
								url: `pages/mainPages/payment/payment?orderid=${cityCardData.orderid}&plugin=citycard`
							})
						} else {
							App.navigationTo({
								url: `pages/subPages/businesscard/carddetail/carddetail?cardid=${cardid}`,
								navType: 'rediRect'
							})
						}
					}, false, () => {
						uni.hideLoading()
					})
				} else {
					App.showError('请选择套餐')
				}
			},
			radioChange(e) {
				this.cardRelevantId = e.detail.value;
			},
			goPost(data) {
				let _this = this;
				console.log(data)
				_this.shareBottomShow = false;
				_this.cardRelevantId = null;
			},
			closeShareBottom() {
				let _this = this;
				_this.shareBottomShow = false;
				_this.cardRelevantId = null;
			},
			// 关闭分享弹框
			closeShareShow() {
				let _this = this;
				_this.shareShow = false;
				_this.shareBottomShow = false;
				_this.cardRelevantId = null;
			},
			shareImgShow() {
				let _this = this;
				_this.shareShow = true;
				_this.shareBottomShow = false;
				_this.cardRelevantId = null;
			},
		},
		computed: {
			currentPostId() {
				return this.postId
			}
		},
		components: {
			shareBottom,
			PopManager,
			Loadlogo,
			TabBars
		},
		onShow() {
			let _this = this;
			_this.getMyCard();
			_this.getcardRelevantInfo();
		},
		onLoad(e) {
			let imgPrefix = uni.getStorageSync('imgPrefix')
			this.tabbarList.map(item=>{
				item.tabImage = imgPrefix + item.tabImage;
			})
			
		}
	}
</script>

<style lang="scss">
	@import '/detailStyle.css';
	.fctabbar-item{
		flex: 0 0 25%;
		text-align: center;
	}
</style>
