<script lang="ts" setup>
/**
 * @description 固定底部按钮props
 * @param {boolean} showPrimaryButton 是否显示主按钮
 * @param {boolean} showDefaultButton 是否显示默认按钮
 * @param {string} primaryButtonText 主按钮文案
 * @param {string} defaultButtonText 默认按钮文案
 */
interface Props {
  showPrimaryButton?: boolean
  showDefaultButton?: boolean
  showBorder?: boolean
  primaryButtonText?: string
  defaultButtonText?: string
}

const props = withDefaults(defineProps<Props>(), {
  showBorder: false,
  showPrimaryButton: true,
  showDefaultButton: true,
  primaryButtonText: '确定',
  defaultButtonText: '取消',
})

/**
 * @description 固定底部按钮emits
 * @event clickPrimaryButton 点击主按钮
 * @event clickDefaultButton 点击默认按钮
 */
const emits = defineEmits(['clickPrimaryButton', 'clickDefaultButton'])
</script>

<template>
  <div class="fixed-bto-button" :style="{ 'border-top': showBorder ? '1px solid rgba(234, 235, 234, 0.5)' : 'none' }">
    <div v-if="showDefaultButton" class="default" @click="() => emits('clickDefaultButton')">
      {{ props.defaultButtonText }}
    </div>
    <div v-if="showPrimaryButton" class="primary" @click="() => emits('clickPrimaryButton')">
      {{ props.primaryButtonText }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fixed-bto-button {
  width: 375px;
  // height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 0px rgba(224, 224, 224, 0.6);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 18px 15px;
  z-index: 99;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;

    &:active {
      opacity: 0.9;
    }
  }
  .default {
    width: 165px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #16a39a;
    font-family:
      alir,
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #16a39a;
    line-height: 22px;
    text-align: center;
    font-style: normal;
    margin: 0 8px;
  }
  .primary {
    width: 165px;
    height: 44px;
    background: #16a39a;
    border-radius: 22px;
    font-family:
      alir,
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 19px;
    text-align: center;
    font-style: normal;
    margin: 0 8px;
  }
}
</style>
