<template>
    <view class="search-footer" >
      <view class="search-container" >
        <view class="student-count" >已选择: {{babyIds.length}}</view>
        <view class="submit-btn" @click="$emit('open-submit-dialog')">
          提交晋级名单
        </view>
      </view>
    </view>
</template>

<script>
export default {
  name: 'search-footer',
  props: {
    babyIds: {
      type: Array,
      require: true
    }
  }
}
</script>

<style lang="less" scoped>
.search-footer {
  width: 100vw;
  height: 172rpx;
  background: #FFFFFF;
  border-top: 2rpx solid rgba(246, 246, 246, 1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 32rpx;
  padding-top: 18rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  // padding-bottom: constant( safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
  // padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  .search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
  }
  .student-count {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .submit-btn {
    width: 292rpx;
    height: 80rpx;
    background: #1677FF;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>