<template>
  <view>
    <view v-if="systemInfo" :style="{ marginTop: systemInfo.safeAreaInsets?.top + 'px' }">
      <view
        v-if="mini"
        class="h-12 pt-1 pos-relative flex flex-justify-between flex-items-center text-4 font-bold custom-color-black"
      >
        <view class="ml-4 line-clamp-1 max-w-60 break-all">
          {{ title }}
        </view>
        <view class="mr-3 border-1 border-solid border-[#ebebeb] w-25 h-7 rounded-4">
          <view class="flex flex-items-center flex-justify-around px-2 h-7">
            <image class="w-6 h-6" src="/static/images/icon_nav_more.png"></image>
            <view class="h-4 w-0.25 bg-[#ebebeb]"></view>
            <image class="w-6 h-6" src="/static/images/icon_nav_close.png"></image>
          </view>
        </view>
      </view>
      <view
        v-else
        class="h-12 pt-1 pos-relative flex flex-justify-center flex-items-center text-4 font-bold custom-color-black"
      >
        <image
          v-if="haveBack"
          :src="backUrl"
          class="pos-absolute left-3 h-5 w-5"
          @click="back"
        ></image>
        <view class="flex flex-items-center">
          <view class="line-clamp-1 max-w-60 break-all">
            {{ title }}
          </view>
        </view>
        <view
          v-if="rightButtonText"
          class="text-3.5 font-normal pos-absolute right-5"
          @click="rightButton"
        >
          {{ rightButtonText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { useBasicStore } from '@/store'

  const $basic = useBasicStore()

  const systemInfo = ref(null)

  defineProps({
    mini: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: null
    },
    haveBack: {
      type: Boolean,
      default: true
    },
    backUrl: {
      type: String,
      default: '/static/images/icon_back.png'
    },
    rightButtonText: {
      type: [String, null],
      default: null
    }
  })

  const emits = defineEmits(['back', 'rightButton'])

  const back = () => {
    uni.navigateBack()
    emits('back')
  }

  const rightButton = () => {
    emits('rightButton')
  }

  onMounted(async () => {
    systemInfo.value = await $basic.getSystemInfo()
  })
</script>
