<template>
  <div class="common-layout">
    <!-- title 标题和搜索栏 -->
    <header class="header">
      <van-nav-bar :title="$route.meta.title" left-arrow safe-area-inset-top @click-left="goBack">
        <template #left>
          <img src="@/assets/img/back.png" alt="" class="back-icon" />
        </template>
      </van-nav-bar>
    </header>
    <!-- content -->
    <RouterView />
  </div>
</template>

<script setup>
import { RouterView, useRouter } from 'vue-router';
import appBridge from '@/assets/js/appBridge';
const router = useRouter();

function goBack() {
  if (window.history.length > 1) {
    router.go(-1);
  } else {
    appBridge.navigateBack();
  }
}
</script>
<style scoped lang="scss">
.common-layout {
  background-color: white;
  color: #333;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #a5d380;

  .title {
    display: flex;
    align-items: end;
    justify-content: center;
  }

  .back-icon {
    width: 18px;
    height: 18px;
  }
}
</style>
