<template>
	<view class="fixed-wrap" :style="{ '--num': showCancel ? '63px' : '0px' }">
		<view class="fixed-btn" id="targetRef">
			<div class="btn">
				<u-button type="primary" :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 } from 'vue';

const props = defineProps({
	confirmText: {
		type: String,
		default: '保存'
	},
	showCancel: {
		type: Boolean,
		default: false
	},
	shape: {
		type: String,
		default: 'circle' // squre circle
	}
});

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: 99;
		padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
		background-color: #fff;
		.btn {
			&:first-child {
				margin-bottom: 14px;
			}
		}
	}
}
</style>
