<template>
  <view class="header">
    <view class="back-button" @click="goBack">
      <image style="width: 60rpx; height: 60rpx" src="/src/static/icon/Left.svg"></image>
    </view>
    <view class="header-title">{{ title }}</view>
    <view class="header-delete" v-if="isShow" @click="handleDelete">
      <image class="w-[40rpx] h-[40rpx]" src="/src/static/icon/fi-rr-trash.svg"></image>
    </view>
    <view class="header-delete" v-else>
      <image class="w-[40rpx] h-[40rpx]"></image>
    </view>
  </view>
</template>

<script setup>
  const props = defineProps({
    title: {
      type: String,
      required: true,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  })
  // 定义事件
  const emit = defineEmits(['deleteBaby'])
  const handleDelete = () => {
    emit('deleteBaby')
  }
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    height: 88rpx;
    padding: 12rpx 32rpx;
    background-color: white;
  }
  .back-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  .header-delete {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
