<template>
  <view class="qn-footer">
    <view
      :class="{ 'qn-footer--fixed': fixed, 'qn-footer--shadow': shadow, 'qn-footer--border': border }"
      class="qn-footer__content"
      :style="{ height: height }"
    >
      <slot />
    </view>
    <view class="qn-footer__placeholder" v-if="fixed">
      <view class="qn-footer__placeholder-view" :style="{ height: height }" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    fixed: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '120rpx'
    },
    shadow: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.qn-footer__content {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  padding: 16rpx 0;
  margin-top: 24rpx;
}
.qn-footer--fixed {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
}
.qn-footer--shadow {
  /* #ifndef APP-NVUE */
  box-shadow: 0 -1px 6px #ccc;
  /* #endif */
}

.qn-footer--border {
  border-top-width: 1rpx;
  border-top-style: solid;
  border-top-color: #eee;
}
.qn-footer__placeholder-view {
  margin-top: 24rpx;
}
</style>
