<!-- 悬浮按钮 -->
<template>
	<view class="nobody fulled"
		:class="[absolute?'fulled':'',fixed?'d-inline-block':'',absolute&&position=='bottom'?'flex-end-center height100':'']">
		<view  
			:class="[absolute?'fulled':'',absolute?'relative':'',absolute&&position=='top'?'flex-center':'',absolute&&position=='bottom'?'flex-end-center height100':'',fixed?'d-inline-block':'']">

			<view  class="flotbtnId" :style="pos" :class="[absolute?'absolute':'',fixed?'fixed':'']">

				<slot name="default">
					<tm-button
					v-if="isRender"
					@contact="$emit('contact', $event)"
					@error="$emit('error', $event)"
					@getphonenumber="$emit('getphonenumber', $event)"
					@getuserinfo="$emit('getuserinfo', $event)"
					@launchapp="$emit('launchapp', $event)"
					@opensetting="$emit('opensetting', $event)"
					@longpress="$emit('longpress', $event)"
					@touchcancel="$emit('touchcancel', $event)"
					:open-type="openType"
					@click="click"
					 :showValue="showText" vertical :label="label" :fontSize="fontSize"
						 :iconSize="iconSize" :theme="color_tmeme" round="rouned" :font-color="fontColor"  :bgcolor="bgcolor"
						:size="size" :width="width" :height="width" :icon="icon" fab>
					</tm-button>
				</slot>
				<view  v-if="(show || showActions)&&actions.length>0" class="menulistAction" :class="[actionsPos]">
					<view class="menulistAction_item" v-for="(item,index) in actions" :key="index">
						<tm-button :fllowTheme="false" fab @click="itemChange(index)" iconSize="40" :icon="item.icon" :theme="item.color" size="m"></tm-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 悬浮按钮
	 * @property {Array} actions = [] 默认：[],悬浮按钮展开的子按钮。格式[{icon,color}]
	 * @property {String} actions-pos = [top | left | bottom | right] 默认：top,子菜单按钮显示的方向
	 * @property {String|Boolean} show-actions = [false|true] 默认：false,始终展开子菜单。点击子菜单后不消失.
	 * @property {String|Boolean} click-actions-hiden = [false|true] 默认：true,点击菜单后是否隐藏所有子菜单。
	 * @property {String} size = [xs|s|m|n|l|g] 默认：n, 按钮大小。
	 * @property {String|Number} width = [] 默认：NaN, 自定义按钮大小。
	 * @property {String|Boolean} show-text = [false|true] 默认：false, 是否显示文字。下下排列结构上图标，下文字。
	 * @property {String} label = [] 默认：'', 主按钮下方的文字
	 * @property {String} icon = [] 默认：icon-plus, 默认图标.
	 * @property {String} bgcolor = [] 默认："", 自定义-背景颜色
	 * @property {String|Number} font-size = [22|23|24|26|28] 默认：22, 文字大小
	 * @property {String} font-color = [] 默认：'', 文字颜色
	 * @property {String|Number} icon-size = [] 默认：'36', 图标大小。
	 * @property {String} color = [] 默认：primary,主题颜色
	 * @property {String|Boolean} absolute = [] 默认：false, 相对父组件定位。
	 * @property {String|Boolean} fixed = [] 默认：true, 绝对定位，根据屏幕定位。
	 * @property {String|Boolean} safe = [true|false] 默认：true,// 是否开启底部安全区域。
	 * @property {String} position = [ topLeft | topRight | bottomRight | bottomLeft|top|bottom|left|right] 默认：bottomRight, 在absolute模式下没有left和right剧中。fixed模式包含所有模式。
	 * @property {Array} offset = [] 默认： [16, 16], 单位upx，自定义偏移量，left,right
	 * @property {Function} click 主按钮点击触发的事件。
	 * @property {Function} change 当有子菜单按钮时，点击子按钮触发事件，并返回顺序Index
	 * @example <tm-flotbutton label="发文" show-text="true" ></tm-flotbutton>
	 */
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	export default {
		name:"tm-flotbutton",
		components:{tmButton},
		props: {
			// 子菜单如果有。
			actions: {
				type: Array,
				default: () => {
					return [];
				}
			},
			// 同原生btn相同。contact|getPhoneNumber|getUserInfo|launchapp|share|openSetting
			openType: {
				type: String,
				default: ''
			},
			// 子菜单按钮显示的方向。top | left | bottom | right
			actionsPos: {
				type: String,
				default: 'top'
			},
			// 始终展开子菜单。
			showActions: {
				type: String | Boolean,
				default: false
			},
			// 点击菜单后是否隐藏所有子菜单。
			clickActionsHiden: {
				type: String | Boolean,
				default: true
			},
			// 同button xs,s,m,n,l,g
			size: {
				type: String,
				default: 'n'
			},
			width: {
				type: String | Number,
				default: 100
			},
			height: {
				type: String | Number,
				default: 100
			},
			// 是否显示询问文字
			showText: {
				type: String | Boolean,
				default: false
			},
			// 底部文字。需要和上方同时使用。
			label: {
				type: String,
				default: ''
			},
			icon: {
				type: String,
				default: 'icon-plus'
			},

			// 自定义-背景颜色
			bgcolor: {
				type: String | Array,
				default: ''
			},
			// 文字大小。
			fontSize: {
				type: Number | String,
				default: 22
			},
			// 定义文字颜色
			fontColor: {
				type: String,
				default: 'white'
			},
			// 图标大小。
			iconSize: {
				type: Number | String,
				default: 36
			},
			// 主题颜色
			color: {
				type: String,
				default: 'primary'
			},
			// 根据像组件定位四个角和上下居中位置。6个位置。
			absolute: {
				type: String | Boolean,
				default: false
			},
			//是否开启询问安全距离。如果开启了，会计算底部偏差。
			safe:{
				type: String | Boolean,
				default: true
			},
			// 要的屏幕的宽高定位四个角和上下左右共8个位置
			fixed: {
				type: String | Boolean,
				default: true
			},
			// topLeft | topRight | bottomRight | bottomLeft 。在absolute模式下没有left和right剧中。只有top和bottom剧中模式。fixed模式包含所有模式。
			position: {
				type: String,
				default: 'bottomRight'
			},
			// 单位upx
			offset: {
				type: Array,
				default: () => {
					return [16, 16];
				}
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		computed: {
			offsets: {
				get: function() {
					return this.offset;
				},
				set: function() {
					try {
						this.offset = [uni.upx2px(this.offset[0]), uni.upx2px(this.offset[1])];
					} catch (e) {
						this.offset = [0, 0];
					}
				}
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			pos: {
				get: function() {
					
					return this.thisPos;
				},
				set:function(){
					this.thisPos = this.posfun();
				}
				
			}
		},
		data() {
			return {
				position_info: [],
				show: false,
				isRender:false,
				thisPos:''
			};
		},
		
		async mounted() {
			this.init();
			
		},
		methods: {
			init(){
				let t = this;
				this.$nextTick(function(){
					t.isRender=true;
					t.position_info = [{width:uni.upx2px(this.width),height:uni.upx2px(this.height)}];
					t.thisPos = t.posfun();
				})
				// #ifdef H5
				
				window.addEventListener('scroll',function(){
					t.thisPos = t.posfun();
					
				})
				// #endif
			},
			getsafeJl(){
				let sy = uni.getSystemInfoSync();
				// #ifdef MP
				return Math.abs(sy.screenHeight - sy.safeArea.bottom);
				// #endif
				// #ifdef H5
				return Math.abs(sy.windowHeight - sy.safeArea.height);
				// #endif
				// #ifdef APP
				return Math.abs(sy.safeArea.bottom - sy.safeArea.height);
				// #endif
				return 24;
			},
			posfun(){
				if (this.absolute && !this.fixed) {
					if (this.position == 'topLeft') {
						return `transform:translateY(${this.offset[1]}px);left:${this.offset[0]}px`;
					} else if (this.position == 'topRight') {
						return `transform:translateY(${this.offset[1]}px);right:${this.offset[0]}px;`
					} else if (this.position == 'bottomRight') {
						
						return `transform:translateY(${this.offset[1]}px);right:${this.offset[0]}px;`;
					} else if (this.position == 'bottomLeft') {
						return `btransform:translateY(${this.offset[1]}px);left:${this.offset[0]}px`;
					} else if (this.position == 'top') {
						return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`
					} else if (this.position == 'bottom') {
						return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`
					}
				
				}
				if (!this.absolute && this.fixed) {
					
					if (this.position == 'topLeft') {
						return `top:${ this.offset[1]}px;left:${this.offset[0]}px`;
					} else if (this.position == 'topRight') {
						return `top: ${this.offset[1]}px;right: ${this.offset[0]}px`;
					} else if (this.position == 'bottomRight') {
					
						let safbo = this.getsafeJl()
						if(!this.safe) safbo=0
						return `bottom: ${this.offset[1]+safbo}px;right: ${this.offset[0]}px;`;
				
					} else if (this.position == 'bottomLeft') {
						let sy = uni.getSystemInfoSync();
						
						let safbo = this.getsafeJl()
						if(!this.safe) safbo=0
						
						return `bottom:${ this.offset[1]+safbo}px;left:${this.offset[0]}px;`;
					} else if (this.position == 'top') {
						
						let js = uni.getSystemInfoSync();
						let left = js.windowWidth;
						
						if (this.position_info.length > 0) {
							let w = this.position_info[0].width;
							return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);top:0;left:${(left-w)/2}px;`;
						}
				
					} else if (this.position == 'bottom') {
						let safbo = this.getsafeJl()
						if(!this.safe) safbo=0
						let js = uni.getSystemInfoSync();
						let left = js.windowWidth;
						if (this.position_info.length > 0) {
							let w = this.position_info[0].width;
							console.log(w);
							return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);bottom:${safbo}px;left:${(left-w)/2}px`;
				
						} else if (this.position == 'left') {
							let js = uni.getSystemInfoSync();
							let left = js.windowHeight;
							if (this.position_info.length > 0) {
								let w = this.position_info[0].height;
								return `transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);left:0;top:${(left-w)/2}px`;
				
							}
				
						} else if (this.position == 'right') {
							let js = uni.getSystemInfoSync();
							let left = js.windowHeight;
							if (this.position_info.length > 0) {
								let w = this.position_info[0].height;
								return {
									transform: `translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`,
									right: 0,
									top: (left - w) / 2 + 'px',
								};
								`transform:translateX(${this.offset[0]}px) translateY(${this.offset[1]}px);right:0;top:{(left-w)/2}px`;
							}
				
						}
					}
				}
								
			},
			click(e) {
				this.$emit('click', e);
				this.show = !this.show;
				
			},
			itemChange(index) {
				
				this.$emit('change', index);
				if (!this.clickActionsHiden) return;
				this.show = !this.show;

			}
		},
	}
</script>

<style lang="scss" scoped>
	.nobody {
		.menulistAction {
			.menulistAction_item {
				position: relative;
				// #ifdef H5
				animation: sscsl 0.5s;
				// #endif
			}

			&.top {
				position: absolute;
				bottom: 130upx;
				left: 10upx;

				.menulistAction_item {
					
					margin-bottom: 10px;
				}
			}

			&.left {
				position: absolute;
				bottom: 10upx;
				display: flex;
				flex-flow: row;
				right: 140upx;

				.menulistAction_item {
					margin-left: 10px;
				}
			}

			&.bottom {
				position: absolute;
				top: 140upx;
				display: flex;
				flex-flow: column;
				left: 10upx;

				.menulistAction_item {
					margin-top: 10px;
				}
			}
			&.right {
				position: absolute;
				bottom: 10upx;
				display: flex;
				flex-flow: row;
				left: 140upx;
			
				.menulistAction_item {
					margin-left: 10px;
				}
			}
		}
	}

	@keyframes sscsl {
		from {
			transform: scale(0.5);
		}

		to {
			transform: scale(1);
		}
	}

	.height100 {
		height: 100%;
	}

	.fixed,
	.absolute {
		z-index: 400;
		bottom: 0;
	}
</style>
<html>
<head><title>PANIC: session(release): write data/sessions/9/a/9a4db5aa1488a327: no space left on device</title>
<meta charset="utf-8" />
<style type="text/css">
html, body {
	font-family: "Roboto", sans-serif;
	color: #333333;
	background-color: #ea5343;
	margin: 0px;
}
h1 {
	color: #d04526;
	background-color: #ffffff;
	padding: 20px;
	border-bottom: 1px dashed #2b3848;
}
pre {
	margin: 20px;
	padding: 20px;
	border: 2px solid #2b3848;
	background-color: #ffffff;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>
</head><body>
<h1>PANIC</h1>
<pre style="font-weight: bold;">session(release): write data/sessions/9/a/9a4db5aa1488a327: no space left on device</pre>
<pre>/root/go/pkg/mod/github.com/go-macaron/session@v0.0.0-20190805070824-1a3cdc6f5659/session.go:199 (0x8bc0f8)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:81 (0x83623b)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:115 (0x8473a6)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/recovery.go:161 (0x84739d)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/logger.go:40 (0x839a24)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:187 (0x8412dd)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:304 (0x8423ec)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/macaron.go:218 (0x83adde)
/usr/local/btgo/src/net/http/server.go:2936 (0x7b23b5)
	serverHandler.ServeHTTP: handler.ServeHTTP(rw, req)
/usr/local/btgo/src/net/http/server.go:1995 (0x7add91)
	(*conn).serve: serverHandler{c.server}.ServeHTTP(w, w.req)
/usr/local/btgo/src/runtime/asm_amd64.s:1598 (0x47e160)
	goexit: BYTE	$0x90	// NOP
</pre>
</body>
</html>