<template>
	<view>
		<view class="mask fid-all col_e" @click="close" v-if="isShow">
			<view class="share-page col_c yup">
				<view class="share-title row_c">
					<text name="share-title-t">分享至</text>
				</view>
				<view class="share-list row_a">
					<view class="share-box col_b ree" v-for="(item,index) of shareList" :key="index" @click.stop="selectChannel(index)">
						<image :src="item.icon" mode="" class="share-img"></image>
						<view class="share-name row_c">
							<text class="share-name-t ">{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="share-btn row_c" @click="close">
					<text class="share-btn-text">取消</text>
				</view>
			</view>
		</view>
		<u-popup :show="showChannelPopup" :round="10" :custom-style="{width: '80%', maxWidth: '300px'}" mode="center" @close="closeChannel">
		  <view class="channel-popup col_e">
		    <text class="channel-title">以下内容已复制到剪切板</text>
			<view class="channel-content">
				<text class="content-text">{{content}}</text>
			</view>
		    <view class="channel-button row_c" @click="share">
		      <image class="uni-image" :src="shareBtn.icon" />
		      <text class="button-text">{{shareBtn.title}}</text>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				shareList: [{
				    icon: '/static/icon/weixin@2x.png',
				    name: '微信'
				}, {
				    icon: '/static/icon/pengyouquan@2x.png',
				    name: '朋友圈'
				}, {
				    icon: '/static/icon/qq-2@2x.png',
				    name: 'QQ好友'
				}, {
				    icon: '/static/icon/QQkongjian@2x.png',
				    name: 'QQ空间'
				}, {
				    icon: '/static/icon/shuyi_lianjie@2x.png',
				    name: '复制链接'
				}],
				showChannelPopup: false,
				shareBtn: {
				    index: null,
				    icon: "",
				    title: ""
				}
			}
		},
		props:{
			isShow:{
				type:Boolean,
				default:false,
			}
		},
		async created() {
		  await this.$onLaunched
		  let url = getApp().globalData.share.url
		  const code = getApp().globalData.share.code
		  if (code) {
		   	url += (url.indexOf('?') !== -1 ? '&code=' : '?code=') + code
		  }
		  this.content = this.title || getApp().globalData.share.content
		  this.content += this.url || url
		},
		onLoad() {
			
		},
		methods: {
			close(){
				this.isShow = false
				this.$emit('close')
			},
			click(e){
				this.isShow = false
				this.$emit('click',e)
				this.$emit('close')
			},
			closeChannel: function() {
			  this.showChannelPopup = false
			},
			selectChannel: function(index) {
			  switch(index) {
			    case 0:
			    case 1:
			      this.shareBtn = {
			        index: index,
			        icon: '/static/icon/weixin2@2x.png',
			        title: '打开微信发送给好友'
			      }
			      this.showChannelPopup = true
			      break
			    case 2:
			    case 3:
			      this.shareBtn = {
			          index: index,
			          icon: '/static/icon/qq2@2x.png',
			          title: '打开QQ发送给好友'
			      }
			      this.showChannelPopup = true
			      break
			    case 4:
			      uni.showToast({
			          icon: "none",
			          title: "分享链接已复制",
			          duration: 3000
			      })
			      break
			  }
			  this.close()
			  uni.setClipboardData({
			    data: this.content,
			    showToast: false
			  })
			},
			share: function() {
				console.log("share")
			  switch(this.shareBtn.index) {
			    case 0:
			    case 1:
				  plus.runtime.openURL('weixin://');
			      break
			    case 2:
			    case 3:
				  plus.runtime.openURL('mqq://');
			      break
			  }
			  this.closeChannel()
			}
		}
	}
</script>

<style>
	@import "uni.scss";
	.mask{
	 background-color: rgba(0, 0, 0, .6);
	 width: 750rpx;
	}
	
	.share-page {
	  width: 750rpx;
	  padding: 0 30rpx 40rpx;
	  background-color: #fff;
	  border-radius: 20rpx 20rpx 0 0;
	  
	}
	
	.share-title {
	 width: 690rpx;
	 height: 80rpx;
	}
	.share-title-t{
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}
	
	.share-list {
		margin-top: 30rpx;
	width: 690rpx;
	height: 110rpx;
	}
	
	.share-box  {
		width: 100rpx;
	height: 110rpx;
	}
	
	.share-img{
	 width: 60rpx;
	 height: 60rpx;
	}
	
	.share-name {
	width: 100rpx;
	height: 36rpx;
	}
	
	.share-name-t {
	 font-size: 28rpx;
	 color: #333;
	 font-weight: 400;
	}
	
	.share-btn {
		margin-top: 50rpx;
		border-radius: 30rpx;
	 width: 600rpx;
	 height: 60rpx;
	 border: #999 1px solid;
	}
	.share-btn-text{
		font-size: 30rpx;
		color: #666;
	}
	

	.yup{
		animation: yup .3s;
	}
	
	@-webkit-keyframes yup{
		0%{-webkit-transform:translateY(200%);}
		100%{-webkit-transform:translateY(0%);}
	}

	
	@keyframes yup{
		0%{transform:translateY(200%);}
		100%{transform:translateY(0%);}
	}
	
	.channel-title {
	  padding: 15px 20px;
	  font-size: 16px;
	  font-weight: bold;
	  text-align: center;
	}
	
	.channel-content {
		padding: 0 20px;
		max-width: 200px;
	}
	
	.content-text {
	  font-size: 13px;
	}
	
	.channel-button {
	  padding-left: 10px;
	  padding-right: 10px;
	  max-width: 200px;
	  height: 40px;
	  margin: 15px auto 20px;
	  background-color: #09a96a;

	  border-radius: 20px;
	}
	
	.button-text {
		color: #fff;
		font-size: 15px;
	}
	
	.uni-image {
	  width: 20px;
	  height: 20px;
	  margin-right: 5px;
	}
	.channel-popup {
	}
</style>
