<template>
	<!-- <view class="float-container">
		<view v-for="(item,index) of props.type" :key="index">
			<view class="sub-btn" :style="getPosition(index)" v-if="item === 'defaultPopup'"
				:class="{active: isOpen}" @click.stop="handleClick('defaultPopup')">
				<span>{{ t('public.mrz') }}</span>
			</view>
			<view class="sub-btn" :style="getPosition(index)" v-if="item === 'scanRecord'"
				:class="{active: isOpen}" @click.stop="handleClick('scanRecord')">
				<span>{{ t('public.smjl') }}</span>
			</view>
		</view>
		<view class="main-btn" :class="{active: isOpen}" @click.stop="toggleMenu()">＋</view>
	</view> -->

	<uni-fab :show="state.show" ref="fab" :pattern="state.pattern" :content="state.content"
		:horizontal="state.horizontal" :vertical="state.vertical" :direction="state.direction" @trigger="trigger"
		@fabClick="fabClick" />
</template>

<script lang="ts" setup>
	import { reactive, ref, defineEmits, defineProps, computed, watch } from 'vue';
	import i18n from '../../locale/index'
	import { useI18n } from 'vue-i18n'
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const emit = defineEmits(['scanRecord', 'defaultPopup']);
	const props = defineProps({
		type: {
			type: Array,
			default: () => {
				return ['scanRecord', 'defaultPopup']
			}
		}
	})
	const state = reactive({
		show: false,
		horizontal: 'right',
		vertical: 'bottom',
		direction: 'horizontal',
		pattern: {
			color: '#7A7E83',
			backgroundColor: '#fff',
			selectedColor: '#007AFF',
			buttonColor: '#007AFF',
			iconColor: '#fff'
		},
		content: [
			{
				iconPath: '../../static/icons/mr.png',
				selectedIconPath: '../../static/icons/mr-ac.png',
				text: computed(() => t('public.mrz')),
				emitText: 'defaultPopup',
				active: false
			},
			{
				iconPath: '../../static/icons/jl.png',
				selectedIconPath: '../../static/icons/jl-ac.png',
				text: computed(() => t('public.smjl')),
				emitText: 'scanRecord',
				active: false
			},
		]
	})
	watch(() => props.type, () => {
		state.content.forEach((item:any,index:any) => {
			if(props.type.indexOf(item.emitText) === -1){
				state.content.splice(index,1)
			}
		})
	}, { immediate: true, deep: true })
	const trigger = (e : any) => {
		state.show = false
		console.log(e)
		console.log(e.item.emitText);
		emit(e.item.emitText)
		
	}
	const fabClick = (e : any) => {
		console.log(e)
	}
</script>

<style scoped lang="scss">
	:deep(.uni-fab) {
		box-shadow: 0 1px 5px 2px #efeaea !important;
	}

	:deep(.uni-fab__content--other-platform) {
		box-shadow: 0 1px 5px 2px #e3e3e3 !important;
	}

	:deep(.uni-fab__item) {
		margin: 0 8rpx;
	}
</style>