<template>
  <up-navbar
    v-bind="$attrs"
    :bgColor="bgColor"
    titleStyle="color:#fff"
    leftIconColor="#fff"
    :left-text="leftText"
    :title="title"
    placeholder
    :autoBack="autoBack"
    :leftIcon="leftIcon"
    @rightClick="rightClick"
    @leftClick="leftClick"
  >
    <template #right>
      <slot></slot>
    </template>
  </up-navbar>
</template>

<script setup>
const emits = defineEmits(['leftClick', 'rightClick'])
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  autoBack: {
    type: Boolean,
    default: true
  },
  color: {
    type: String,
    default: '#fff'
  },
  leftIcon: {
    type: String,
    default: 'arrow-left'
  },
  leftText: {
    type: String,
    default: '返回'
  },
  bgColor: {
    type: String,
    default: '#0055A2'
  }
})

function rightClick() {
  emits('rightClick')
}
function leftClick() {
  emits('leftClick')
}
</script>

<style lang="scss" scoped></style>
