<template>
	<view>
		<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap.stop="handleClickCancel"></view>
		<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}" :style="'right: ' + left + 'px; bottom:' + (Number(top)+50) + 'px;'">
			<view class="tui-fab-item-box" :class="{'tui-fab-item-left':lefts && !rights && item.imgUrl}" v-for="(item,index) in btnList"
			 :key="index" @tap.stop="handleClick(item.id)">
				<view :class="[lefts && !rights?'tui-text-left':'tui-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
				<view class="tui-fab-item" :style="{width:widths+'rpx',height:heights+'rpx',background:item.bgColor || bgColor,borderRadius:radius}">
					<view class="tui-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view>
					<image :src="item.imgUrl" class="tui-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image>
				</view>
			</view>
		</view>
		
		<view v-if="CustomerService.wxappcur == 1">
			<button
				id="_drag_button"
				class="drag buttondrag"
				open-type="contact"
				:style="'left: ' + left + 'px; bottom:' + top + 'px;'"
				@touchstart="touchstart"
				@touchmove.stop.prevent="touchmovel"
				@touchend="touchend"
				hover-class="none"
				:class="{transition: isDock && !isMove }"
			>
				<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}"  mode="aspectFit"></image>
			</button>
		</view>
		<view v-else>
			<view v-if="CustomerService.logoloca == 1">
					<view
						id="_drag_button"
						class="drag"
						:style="'left: ' + left + 'px; bottom:' + top + 'px;'"
						@touchstart="touchstart"
						@touchmove.stop.prevent="touchmovel"
						@touchend="touchend"
						@click.stop.prevent="click(-1)"
						:class="{transition: isDock && !isMove }"
					>
						<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}"  mode="aspectFit"></image>
					</view>
			</view>
			
			<view v-if="CustomerService.logoloca == 0">
					<view
						id="_drag_button"
						class="drag"
						:style="'right: ' + left + 'px; bottom:' + top + 'px;'"
						@touchstart="touchstart"
						@touchmove.stop.prevent="touchmover"
						@touchend="touchend"
						@click.stop.prevent="click(-1)"
						:class="{transition: isDock && !isMove }"
					>
						<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}"  mode="aspectFit"></image>
					</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	export default {
		name: 'drag-button',
		props: {
			isDock:{
				type: Boolean,
				default: false
			},
			existTabBar:{
				type: Boolean,
				default: false
			},
			btndata:{
				type:Object,
				default:null
			},
			lefts: {
				type: Number,
				default: 0
			},
			//rpx 当为0时且left不为0，值为auto
			rights: {
				type: Number,
				default: 80
			},
			//rpx bottom值
			bottoms: {
				type: Number,
				default: 100
			},
			//默认按钮 宽度 rpx
			widths: {
				type: Number,
				default: 108
			},
			//默认按钮 高度 rpx
			heights: {
				type: Number,
				default: 108
			},
			//圆角值
			radius: {
				type: String,
				default: "50%"
			},
			//默认按钮背景颜色
			bgColor: {
				type: String,
				default: "#5677fc"
			},
			//字体颜色
			color: {
				type: String,
				default: "#fff"
			},
			//拓展按钮
			// bgColor: "#5677fc",
			// //图标/图片地址
			// imgUrl: "/static/images/fab/fab_reward.png",
			// //图片高度 rpx
			// imgHeight: 60,
			// //图片宽度 rpx
			// imgWidth: 60,
			// //名称
			// text: "名称",
			// //字体大小
			// fontSize: 30,
			// //字体颜色
			// color: "#fff"
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				top:0,
				left:0,
				width: 0,
				height: 0,
				offsetWidth: 0,
				offsetHeight: 0,
				windowWidth: 0,
				windowHeight: 0,
				isMove: true,
				edge: 10,
				text: '按钮',
				CustomerService:'',
				isOpen: false,
				hidden: true,
				timer: null,
				btnList: [{
					bgColor: "#16C2C2",
					//名称
					text: "客服",
					//字体大小
					fontSize: 28,
					id:0,
					//字体颜色
					color: "#fff"
				}
				// , 
				// {
				// 	bgColor: "#FFA000",
				// 	//名称
				// 	text: "链接",
				// 	//字体大小
				// 	fontSize: 28,
				// 	id:2,
				// 	//字体颜色
				// 	color: "#fff"
				// }
				]
			}
		},
		onHide() {
			console.log('进了onhide');
		},
		mounted() {
			const sys = uni.getSystemInfoSync();
			let _this = this;
			//#ifdef APP-PLUS
			let obj =  {
					bgColor: "#64B532",
					//名称
					text: "分享",
					//字体大小
					fontSize: 28,
					id:1,
					//字体颜色
					color: "#fff"};
			this.btnList.push(obj);
			//#endif
			this.windowWidth = sys.windowWidth;
			this.windowHeight = sys.windowHeight;
			this.CustomerService = uni.getStorageSync('CustomerService');
			let btnleftAndbottom = uni.getStorageSync('btnleftAndbottom');
			if(btnleftAndbottom){
				this.left = btnleftAndbottom.left;
				this.top = btnleftAndbottom.top;
			}else{
				this.left = this.CustomerService.logoleft;
				this.top = this.CustomerService.logobottom;
			}
			// #ifdef APP-PLUS
				this.existTabBar && (this.windowHeight -= 50);
			// #endif
			if (sys.windowTop) {
				this.windowHeight += sys.windowTop;
			}
			uni.$on('getFarBtn',function(data){
				_this.getFar();
			})
		},
		methods: {
			getLeft() {
				let val = "auto"
				if (this.lefts && !this.rights) {
					val = this.left + 'rpx'
				}
				return val
			},
			getRight() {
				let val = this.rights + 'rpx'
				if (this.lefts && !this.rights) {
					val = "auto"
				}
				return val
			},
			handleClick: function(index) {
				// this.hidden = false
				// clearTimeout(this.timer)
				// if (index == -1 && this.btnList.length) {
				// 	this.isOpen = !this.isOpen
				// } else {
				// 	this.$emit("click", {
				// 		index: index
				// 	})
				// 	this.isOpen = false
				// }
				// if (!this.isOpen) {
				// 	this.timer = setTimeout(() => {
				// 		this.hidden = true
				// 	}, 200)
				// }
				if(index == 0){
					this.$emit('btnClick');
				}else if(index == 1){
					let AppShareData = uni.getStorageSync('AppShareData');
					console.log('分享数据测试',JSON.stringify(AppShareData));
					// //#ifdef APP-PLUS
					// uni.share({
					//     provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
					//     scene: "WXSceneSession", //分享到聊天界面
					//     type: 5, //分享形式 5:小程序
					//     imageUrl: AppShareData.img,//官方规定分享图比例是5：4,其它尺寸可能显示不全。
					//     title: '欢迎体验uniapp',
					//     miniProgram: {
					//         id: 'gh_59d3d43b1c12', //微信小程序原始id
					//         path: 'pages/mainPages/index/index', //点击链接进入的页面
					//         type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
					//         webUrl: 'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CA%D6%BB%FA%B1%DA%D6%BD%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0' //兼容低版本的网页链接
					//     },
					//     success: ret => {
					//         console.log(JSON.stringify(ret));
					//     }
					// });
					// //#endif
					//#ifdef APP-PLUS
					uni.share({
					    provider: "weixin",
					    scene: "WXSceneSession",
					    type: 0,
					    // href: AppShareData.mpurl,
						href:'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CA%D6%BB%FA%B1%DA%D6%BD%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0',
					    title: AppShareData.title,
					    summary: AppShareData.desc,
					    imageUrl: AppShareData.img,
					    success: function (res) {
					        console.log(JSON.stringify(res));
					        uni.showToast({
					            title: '已分享',
					            duration: 2000
					        });
					    },
					    
					    fail: function (err) {
					    
					        var errrr = JSON.stringify(err);
					        if(errrr){
					            uni.showModal({
					            title: '表单不能留空',
					            content: '请完善所有信息再发起分享',
					            success: function (res) {
					if (res.confirm) {
					        console.log('用户点击确定');
					    } else if (res.cancel) {
					        console.log('用户点击取消');
					    }
					}
					            });
					        }
					    }
					});
					//#endif
				}else{
					this.$emit('btnClick');
				}
			},
			handleClickCancel: function() {
				// if (!this.maskClosable) return;
				//#ifndef APP-PLUS
				this.$emit('btnClick');
				//#endif
				//#ifdef APP-PLUS
				this.isOpen = !this.isOpen
				//#endif
				
			},
			getFar(){
				let btnleftAndbottom = uni.getStorageSync('btnleftAndbottom');
				if(btnleftAndbottom){
					this.left = btnleftAndbottom.left;
					this.top = btnleftAndbottom.top;
				}else{
					this.left = this.CustomerService.logoleft;
					this.top = this.CustomerService.logobottom;
				}
			},
			click(index) {
				//#ifdef APP-PLUS
				this.hidden = false
				clearTimeout(this.timer)
				if (index == -1 && this.btnList.length) {
					this.isOpen = !this.isOpen
					// debugger
				} else {
					this.$emit("click", {
						index: index
					})
					this.isOpen = false
				}
				if (!this.isOpen) {
					this.timer = setTimeout(() => {
						this.hidden = true
					}, 200)
				}
				//#endif
				//#ifndef APP-PLUS
				if(this.CustomerService.wxappcur == 2){
					//#ifdef H5
					App.navigationTo({
						url: this.CustomerService.customerurl
					});
					// #endif
					//#ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
					  extInfo: {url: this.CustomerService.customerurl},
					  corpId: this.CustomerService.enterpriseid,
					  success(res) {
						  
					  }
					})
					//#endif
					
				}else{
					this.$emit('btnClick');
				}
				
				//#endif
				
			},
			touchstart(e) {
				this.$emit('btnTouchstart');
			},
			touchmovel(e){
				this.width = this.btndata.width;
				this.height = this.btndata.height;
				this.offsetWidth = this.btndata.width/2;
				this.offsetHeight = this.btndata.height/2;
				// 单指触摸
				if (e.touches.length !== 1) {
					return false;
				}
				
				this.isMove = true;
				this.left = e.touches[0].clientX - this.offsetWidth - 25;
				
				let clientY = e.touches[0].clientY - this.offsetHeight;
				// #ifdef H5
					clientY += this.height;
				// #endif
				let edgeBottom = this.windowHeight - this.height - this.edge;
				
				// 上下触及边界
				
				if(this.windowHeight < (clientY - 25)){
					this.top = 0
				}else if(clientY < 0){
					return
				}else{
					this.top =this.windowHeight - clientY - 25;
				}
					// this.top =this.windowHeight - clientY - 25
				
				
			},
			touchmover(e) {
				this.width = this.btndata.width;
				this.height = this.btndata.height;
				this.offsetWidth = this.btndata.width/2;
				this.offsetHeight = this.btndata.height/2;
				// 单指触摸
				if (e.touches.length !== 1) {
					return false;
				}
				
				this.isMove = true;
				this.left = this.windowWidth - e.touches[0].clientX - this.offsetWidth - 25;
				
				let clientY = e.touches[0].clientY - this.offsetHeight;
				// #ifdef H5
					clientY += this.height;
				// #endif
				let edgeBottom = this.windowHeight - this.height - this.edge;

				// 上下触及边界
					if(this.windowHeight < (clientY - 25)){
						this.top = 0
					}else if(clientY < 0){
						return
					}else{
						this.top =this.windowHeight - clientY - 25;
					}
				
			},
			touchend(e) {
				if (this.isDock) {
					let edgeRigth = this.windowWidth - this.width - this.edge - 25;
					setTimeout(()=>{
						if (this.left < this.windowWidth / 2 - this.offsetWidth) {
							this.left = -this.edge;
						} else {
							this.left = edgeRigth;
						}
						let btnleftAndbottom = {
							left:this.left,
							top:this.top
						};
						uni.setStorageSync('btnleftAndbottom',btnleftAndbottom);
					},200)
				}
				
				this.isMove = false;
				
				this.$emit('btnTouchend');
			},
		}}
</script>

<style lang="scss">
	.drag {
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: rgba(0, 0, 0, 0.5);
		// box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
		color: $uni-text-color-inverse;
		// width: 80upx;
		// height: 80upx;
		// border-radius: 50%;
		font-size: $uni-font-size-sm;
		position: fixed;
		z-index: 999999;
		
		&.transition {
			transition: left .3s ease,top .3s ease;
		}
		&.transition {
			transition: right .3s ease,bottom .3s ease;
		}
	}
	.buttondrag{
		padding: 0;
		border-radius: 0;
	}
	.tui-fab-icon {
		font-family: "tuifab" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		padding: 10rpx;
	}
	
	.tui-icon-plus:before {
		content: "\e613";
	}
	
	.tui-fab-box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		z-index: 99997;
	}
	
	.tui-fab-right {
		align-items: flex-end;
	}
	
	.tui-fab-btn {
		transform: scale(0);
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		z-index: 999999;
	}
	
	.tui-fab-hidden {
		height: 0;
		width: 0;
	}
	
	
	.tui-fab-item-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 40rpx;
	}
	
	.tui-fab-item-left {
		flex-flow: row-reverse;
	}
	
	.tui-fab-title {
		width: 90%;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-text-left {
		padding-left: 28rpx;
	}
	
	.tui-text-right {
		padding-right: 28rpx;
	}
	
	.tui-fab-img {
		display: block;
	}
	
	.tui-fab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
		transition: all 0.2s linear;
	}
	
	.tui-radius {
		border-radius: 50%;
	}
	
	.tui-active {
		transform: rotate(135deg);
	}
	
	.tui-fab-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.75);
		z-index: 99996;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	
	.tui-visible {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
</style>
