<template>
	<view class="card_wrap">
		<!-- 无名片 -->
		<view class="layer_center no_card" v-if="!isHave">
			<view class="no_card_pic">
				<image src="../../static/no_card.png" mode=""></image>
			</view>
			<view class="add_card">
				<view class="add_card_btn" @click="addCard()">
					发布我的名片
				</view>
			</view>
		</view>
		<!-- 有名片 -->
		<view class="content" v-else>
			<view class="detail_top">
				<!-- 公司名称 -->
				<view class="company_name">{{cardDetail.company_name}}</view>
				<!-- 名片正反面 -->
				<view>
					<image class="card_pic" :src="cardDetail.front_image" mode=""></image>
					<view class="card_tips">名片正面</view>
				</view>
				<view>
					<image class="card_pic" :src="cardDetail.reverse_image" mode=""></image>
					<view class="card_tips">名片反面</view>
				</view>
			</view>
			<!-- 公司简介 -->
			<view class="company_intro">
				<view class="company_title_wrap"><view class="company_title">公司简介</view></view>
				<view class="company_detail">
					<view class="company_detail_box">
						<view class="">
							{{cardDetail.brief}}
						</view>
						<view class="company_pic_wrap flex_wrap_no">
							<view class="company_pic_single" @click="showImg(item)" v-for="(item, index) in cardDetail.brief_images" :key="index"><image :src="item" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 经营范围 -->
			<view class="company_intro">
				<view class="company_title_wrap"><view class="company_title">经营范围</view></view>
				<view class="company_detail">
					<view class="company_detail_box">
						<view class="">
							{{cardDetail.scope}}
						</view>
						<view class="company_pic_wrap flex_wrap_no">
							<view class="company_pic_single" @click="showImg(item)" v-for="(item, index) in cardDetail.scope_images" :key="index"><image :src="item" mode=""></image></view>
						</view>
						<!-- 刷新名片 -->
						<view class="refresh_card flex_column_nojustify" @click="refreshCard()">
							<image class="refresh_icon" src="../../static/refresh.png" mode=""></image>
							<view class="refresh_tips">刷新名片</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="company_intro">
				<view class="company_title_wrap"><view class="company_title">联系方式</view></view>
				<!-- 地址 -->
				<view class="contact_code">
					<view class="layer_nobetween">
						<!-- 二维码 -->
						<view class="qr_code" @click="showImg(cardDetail.wechat_image)"><image :src="cardDetail.wechat_image" mode=""></image></view>
						<!-- 姓名 地址 -->
						<view class="contact_r flex_star_between">
							<view class="">联系人：{{cardDetail.name}}</view>
							<view class="" @click="callPhone()" v-if="cardDetail.phone">电话：{{cardDetail.phone}}</view>
							<view class="" v-if="cardDetail.site">地址：{{cardDetail.site}}</view>
						</view>
					</view>
				</view>
				<!-- 各种联系方式 -->
				<view class="contact_single layer_between" v-if="cardDetail.fax">
					<view class="layer_between">
						<image class="contact_icon" src="../../static/phone.png" mode=""></image>
						传真
					</view>
					<view class="" @click="copyEmail()">{{cardDetail.fax}}</view>
				</view>
				<view class="contact_single layer_between" v-if="cardDetail.mobile">
					<view class="layer_between">
						<image class="contact_icon" src="../../static/tel.png" mode=""></image>
						手机号
					</view>
					<view class="" @click="callTel()">{{cardDetail.mobile}}</view>
				</view>
				<view class="contact_single layer_between" v-if="cardDetail.qq">
					<view class="layer_between">
						<image class="contact_icon" src="../../static/qq.png" mode=""></image>
						QQ
					</view>
					<view class="" @click="copyQQ()">{{cardDetail.qq}}</view>
				</view>
				<view class="contact_single no_bottom layer_between" v-if="cardDetail.wechat">
					<view class="layer_between">
						<image class="contact_icon" src="../../static/weixin.png" mode=""></image>
						微信
					</view>
					<view class="" @click="copyWx()">{{cardDetail.wechat}}</view>
				</view>
			</view>
			<!-- 图片放大 -->
			<view class="tx_mask" v-if="isShowImg" @click="closDialog()"></view>
			<view class="mask_content" v-if="isShowImg" @click="closDialog()" @longpress="saveImg()">
				<image :src="img" mode="widthFix"></image>
			</view>
			<!-- 编辑名片 -->
			<view class="layer_between editor_btn">
				<view class="refresh_time">
					上次刷新时间：{{cardDetail.refresh_time}}
				</view>
				<view class="editor_card" @click="toEditor()">编辑我的名片</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from "../../App.vue";
	export default {
		data() {
			return {
				// 是否有名片
				isHave:false,
				// 我的名片详情
				cardDetail:"",
				token:"",
				// 图片放大
				isShowImg:false,
				img:"",
			}
		},
		methods: {
			// 图片放大
			showImg(img){
				console.log(111)
				this.isShowImg = true
				this.img = img
			},
			closDialog(){
				this.isShowImg = false
			},
			saveImg(){
				let t = this ;
				uni.downloadFile({
					url: t.img,
					success: function(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									icon: 'none',
									duration: 1500
								});
								t.isShowImg = false
							},
							fail: function(err) {
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
									"saveImageToPhotosAlbum:fail:auth denied") {
									uni.showToast({
										title: '需要您授权保存相册',
										icon:none,
										duration: 1500,
										success: modalSuccess => {
											uni.openSetting({
												success(settingdata) {
													if (settingdata.authSetting['scope.writePhotosAlbum']) {
														uni.showToast({
															title: '获取权限成功',
															icon: 'none',
															duration: 1500
														});
													} else {
														uni.showToast({
															title: '获取权限失败',
															icon: 'none',
															duration: 1500
														});
													}
												},
												fail(failData) {
													console.log("failData", failData)
												},
												complete(finishData) {
													console.log("finishData", finishData)
												}
											})
										}
									})
								}
							},
						});
					}
				});
			},
			// 刷新名片
			refreshCard(){
				let url = "/api/goods/refresh";
				App.post(url)
				.then(res=>{
					this.getMyCard()
				})
			},
			// 发布我的名片
			addCard() {
				if(this.token){
					uni.navigateTo({
						url:"/pages/card/addCard"
					})
				}else{
					uni.navigateTo({
						url:"/pages/start/start"
					})
				}
			},
			// 获取我的名片详情
			getMyCard(){
				let url = "/api/goods/my_goods";
				App.post(url)
				.then(res=>{
					this.cardDetail = res;
					if(this.cardDetail){
						this.isHave = true
					}
				})
			},
			// 去编辑页
			toEditor(){
				uni.navigateTo({
					url:"/pages/card/editorCard"
				})
			},
			// 拨打电话
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.cardDetail.mobile
				})
			},
			// 拨打手机号
			callTel(){
				uni.makePhoneCall({
					phoneNumber:this.cardDetail.mobile
				})
			},
			// 复制传真号
			copyEmail(){
				uni.setClipboardData({
				    data: this.cardDetail.fax,
				    success: function () {
				        uni.showToast({
				        	title:"复制成功",
							icon:'success'
				        })
				    }
				});
			},
			// 复制qq号
			copyQQ(){
				uni.setClipboardData({
				    data: this.cardDetail.qq,
				    success: function () {
				        uni.showToast({
				        	title:"复制成功",
							icon:'success'
				        })
				    }
				});
			},
			// 复制微信号
			copyWx(){
				uni.setClipboardData({
				    data: this.cardDetail.wechat,
				    success: function () {
				        uni.showToast({
				        	title:"复制成功",
							icon:'success'
				        })
				    }
				});
			},
		},
		onShow() {
			this.token = uni.getStorageSync("token");
			// 获取我的名片详情
			if(this.token){
				this.getMyCard();
			}
		},
		onLoad() {
			
		},
		onShareAppMessage: function (res) {
		    var that = this;
		   
		   
		        // 来自页面内转发按钮
		        return {
		          title: '分享',
		          path: "/pages/card/card"
		          
		        }
		      
		  }
	}
</script>

<style>
	@import url("../../style/card");
	@import url('../../style/cardDetail');
</style>