<template>
	<view class="" v-if="Show">
		<view class="cu-modal" :class="{ show: showMask }" @tap="hideMask"></view>
		<!-- 悬浮按钮菜单 -->
		<view class="shopro-float-btn">
			<button class="wechat-btn u-reset-button" @tap="onBtn">
				<image class="wechat_img" src="@/static/report/search_gray_icon.png" mode="widthFix"></image>
			</button>
		</view>
		<u-modal :title="title+'搜索'" :show="showModal" showCancelButton closeOnClickOverlay @cancel="cancel" @confirm="confirm"
			@close="cancel">
			<u--input v-model="search_value" :value="search_value" :placeholder="'请输入'+title+'名称'" border="surround"
				clearable></u--input>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "floatBtn",
		components: {},
		data() {
			return {
				search_value: '', //输入的文本
				showBtnList: true, //列表弹出
				modalImg: '', //子项图片弹出
				showModal: false, //modal层
				showMask: false,
				platform: this.$platform.get(),
				Show:this.show
			};
		},
		props: {
			title: {
				type: String, //参数的类型
				default: "人员" //参数的默认值
			},
			show: {
				type:Boolean, //参数的类型
				default:true //参数的默认值
			}
		},
		computed: {

		},
		created() {},
		methods: {
			cancel() {
				this.showModal = false;
				this.search_value = '';
			},
			hideMask() {
				this.showMask = false;
			},
			confirm() {
				let search_value = this.search_value;
				this.cancel();
				this.$emit('onBtnAction', search_value);

			},
			// 点击悬浮按钮
			onBtn() {
				let type = 'search';
				// this.$emit('onBtnAction',type);
				this.showModal = true;
			},
		}
	};
</script>

<style lang="scss">
	.shopro-float-btn {
		position: fixed;
		bottom: calc(var(--window-bottom) + 200rpx);
		right: 30rpx;
		z-index:99;
		.float--active {
			position: absolute;
			bottom: 80rpx;
			right: 0;
			left: 0;
			margin: 0 auto;
			z-index: 1001;
			transform: scale(1);
			transition: all 0.2s linear;
		}

		.float-list-box {
			position: absolute;
			z-index: 1001;
			bottom: 0;
			right: 0;
			left: 0;
			margin: 0 auto;
			transform: scale(0);
			transform-origin: bottom;
			opacity: 0;
			transition: all 0.2s linear;
		}

		.btn-item {
			margin-bottom: 20rpx;

			.btn-img {
				width: 60rpx;
				height: 60rpx;
			}

			.btn-name {
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				white-space: nowrap;
			}
		}

		.wechat-btn {
			box-shadow: 0px 0px 20px 4px rgba(199, 199, 199, 0.22);
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;

			.wechat_img {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.img-box {
		position: relative;
		width: 610rpx;

		.modal-img {
			width: 100%;
			will-change: transform;
			height: 830rpx;
		}
	}

	/* ==================
	         模态窗口
	 ==================== */

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
</style>