<template>
  <view class="bottom-wrap">
    <view class="bottomBar">
      <view class="barBox">
        <!-- 自定义底部按钮 -->
        <slot>
          <!-- 默认显示 -->
          <view class="cancel" v-if="!isLastRecord" @click="leftClick">{{leftBtnText}}</view>
          <view class="save" @click="rightClick">{{rightBtnText}}</view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
  const emits = defineEmits(['leftClick', 'rightClick'])
  defineProps({
    leftBtnText: {
      type: String,
      default: '修改上次记录'
    },

    rightBtnText: {
      type: String,
      default: '确认添加'
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    borderTop: {
      type: String,
      default: '0rpx'
    },
    zIndex: {
      type: Number,
      default: 88
    },
    isLastRecord: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: '188rpx'
    }
  })
  const leftClick = () => {
    emits('leftClick')
  }
  const rightClick = () => {
    emits('rightClick')
  }
</script>

<style lang="scss">
  .bottomBar {
    position: fixed;
    z-index: v-bind(zIndex);
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    bottom: 0;
    height: v-bind(height);
    width: 750rpx;
    border-top: v-bind(borderTop);
    background-color: v-bind(bgColor);

    .barBox {
      @include flexcenter();
      @include wrapPadding(16rpx, 16rpx);

      @mixin commonBtn {
        @include flexCj(center);
        width: 328rpx;
        height: 88rpx;
        border-radius: 28rpx;
        font-size: 32rpx;
        font-weight: 700;
      }

      .cancel {
        @include commonBtn();
        margin-right: 30rpx;
        background: #ffffff;
      }

      .save {
        @include commonBtn();
        color: #fff;
        background: #15B959;
      }
    }
  }
</style>