<template>
  <view class="footer flex px-15 py-12 text-center bg-white" :style="elderVarStyle">
    <view v-if="showCancel" :style="buttonWidth" class="button-item button-outline text-primary rounded"
      @click="cancel()">
      {{ cancelText }}
    </view>
    <view v-if="showConfirm" :style="buttonWidth" class="button-item button-primary text-white bg-primary rounded"
      @click="confirm()">
      {{ confirmText }}
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue';
import useElder from '@/hooks/useElder';

const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps({
  showCancel: { type: Boolean, default: true },
  showConfirm: { type: Boolean, default: true },
  cancelText: { type: String, default: '取消' },
  confirmText: { type: String, default: '确定' },
})
const buttonWidth = computed(() => `width: ${100 / (props.showCancel + props.showConfirm)}%`)

function cancel() {
  emits('cancel')
}
function confirm() {
  emits('confirm')
}

const { elderVarStyle } = useElder();

</script>
<style scoped>
.footer {
  position: relative;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

.button-item+.button-item {
  margin-left: 20rpx;
}

.button-outline {
  font-size: var(--text-base);
  height: 44px;
  line-height: 43px;
  border: 1px solid;
}

.button-primary {
  margin-left: 20rpx;
  font-size: var(--text-base);
  height: 44px;
  line-height: 43px;
  border: 1px solid $theme-brown-primary;
}
</style>