<template>
	<view>
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap="show = false" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :class="{ show: show }">
			<view class="click-btn" v-if="!show" @tap="show = !show" draggable="true">

				<!-- <view>&lt;&nbsp;</view> -->
				<uni-icons type="left" size="26" color="#645555"></uni-icons>
			</view>
			<view class="nav-box" v-if="show" style="max-width: 320px;">
				<view class="click-btn click-btn-right" @tap="show = !show" draggable="true">

					<!-- <view>&gt;&nbsp;</view> -->
					<uni-icons type="right" size="26" color="#645555"></uni-icons>
				</view>
				<view class="nav-box-list">
				<view class="nav-btn" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn)">
					<view class="nav-icon">
						<image class="icon" :src="btn.iconPath"></image>
					</view>
					<view class="nav-text">{{ btn.text }}</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		btnList: {

			default: {},
		},
	},
	data() {
		return {
			show: false, // 是否显示
			deviationTop: 0, // 偏移量
			windowHeight: uni.getSystemInfoSync().windowHeight, // 视图高度
			// btnList1: [
			// 	// 所有按钮
			// 	{
			// 		text: '首页',
			// 		icon: '/static/report.png',
			// 		type: 1,
			// 	},
			// 	{
			// 		text: '列表',
			// 		icon: '../../static/icon-add.png',
			// 		type: 2,
			// 	},
			// 	{
			// 		text: '列表详情',
			// 		icon: '../../static/icon-visit.png',
			// 		type: 3,
			// 	},
			// 	{
			// 		text: '列表详情',
			// 		icon: '../../static/icon-visit.png',
			// 		type: 3,
			// 	},
			// 	{
			// 		text: '列表详情',
			// 		icon: '../../static/icon-visit.png',
			// 		type: 3,
			// 	},
			// 	{
			// 		text: '列表详情',
			// 		icon: '../../static/icon-visit.png',
			// 		type: 3,
			// 	},
			// 	{
			// 		text: '列表详情',
			// 		icon: '../../static/icon-visit.png',
			// 		type: 3,
			// 	},
			// ],
		}
	},
	methods: {
		// 点击按钮
		clickBtn: function (type) {
			// console.log(`123`, type)
			this.$emit('trigger', type)
		},
		// 拖动开始，记录一下偏移量
		touchstart: function (e) {
			var touch = e.touches[0] || e.changedTouches[0]
			this.deviationTop = touch.clientY - this.top
			// console.log(this.deviationTop);
		},
		// 上下拖动时
		touchmove: function (e) {
			var touch = e.touches[0] || e.changedTouches[0]
			var top = touch.clientY
			top = top - this.deviationTop
			if (top < 0) {
				top = 0
			}
			if (top > this.windowHeight - 40) {
				top = this.windowHeight - 40
			}
			this.top = top
			return false
		},
	},
}
</script>

<style>
/* 遮罩 */
.mask {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99;
	/* background: rgba(248, 248, 248, 0.8); */
}

/* 总盒子 */
.major-box {
	border: 1px 0 solid;
	z-index: 100;
	position: fixed;
	bottom: 5%;
	right: 0;
	transition: left 0.5s;
	overflow: hidden;
}

.click-btn,
.nav-box {
	float: left;
}

/* 按钮样式 */
.nav-box {
	background-color: #fff;
	border-radius: 0 0 0 5px;
	padding: 5px 0;
}

.click-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	min-height: 40px;
	height: 100%;
	background-color: #d8d7d7;
	color: #fff;
	opacity: 0.8;
	text-align: center;
	border-radius: 50px 0 0 50px;
	padding: 6px 0;
	font-weight: 700;

}

.click-btn uni-view {
	line-height: 40px;
	font-size: 15px;
}

.click-btn view {
	padding-left: 8px;
}

.click-btn-right {
	background-color: #d8d7d7;
	margin-left: 5px;

}

/* 按钮盒子 */
.nav-box {
	display: flex;
	
	text-align: center;
	align-items: center;

	background-color: #d8d7d7;
	color: #000;
	font-size: 12rpx;
	text-align: center;
	border-radius: 50px 0 0 50px;
}
.nav-box-list{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	align-items: center;
	gap: 8px 0;
	background-color: #d8d7d7;
	color: #000;
	font-size: 12rpx;
	text-align: center;
}

.nav-btn {
	/* flex: 1; */
	border: 0px #000 solid;
	min-width: 55px;
	
}

.icon {
	margin: 0 auto;
	width: 20px;
	height: 20px;
}

.nav-text {
	font-size: 12px;
}
</style>
