<template>
	<view class="fixed-wrap" :style="{ '--num': `${numValue}px` }">
		<view class="fixed-btn" :class="[type]" id="targetRef">
			<div class="btn">
				<u-button type="primary" :color="confirmColor" :shape="shape" size="large" @click="emits('confirm')">{{ confirmText }}</u-button>
			</div>
			<div class="btn" v-if="showCancel">
				<u-button :shape="shape" size="large" @click="emits('cancel')">取消</u-button>
			</div>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance, computed } from 'vue';
// import { isMainShop } from '@/store/account.js';

const props = defineProps({
	type: {
		type: String,
		default: 'vertical' // horizontal横向 vertical竖向
	},
	isOpenPermission: {
		type: Boolean,
		default: true
	},
	confirmText: {
		type: String,
		default: '保存'
	},
	confirmColor: {
		type: String,
		default: '#3C9CFF'
	},
	showCancel: {
		type: Boolean,
		default: false
	},
	shape: {
		type: String,
		default: 'circle' // squre circle
	}
});

// const isShow = computed(() => {
// 	if (props.isOpenPermission) {
// 		return isMainShop();
// 	}
// 	return true;
// });

const numValue = computed(() => {
	let num = 0;
	if (props.type == 'vertical' && props.showCancel) {
		num = 63;
		return num;
	}
	if (props.type == 'horizontal') {
		num = 0;
		return num;
	}
	return num;
});

const emits = defineEmits(['confirm', 'cancel']);
</script>

<style scoped lang="scss">
.fixed-wrap {
	--height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
	width: 100%;
	height: var(--height);
	.fixed-btn {
		width: 100%;
		height: var(--height);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
		background-color: #fff;
		&.horizontal {
			display: flex;
			gap: 28upx;
			.btn {
				flex: 1;
			}
		}
		.btn {
			&:first-child {
				margin-bottom: 14px;
			}
		}
	}
}
</style>
