<template>
  <div class="common-layout">
    <!-- title 标题和搜索栏 -->
    <header class="header">
      <van-nav-bar
        :class="redirectHeaderStyle"
        :title="$route.meta.title"
        left-arrow
        safe-area-inset-top
        :border="false"
        @click-left="goBack"
      >
        <template #left>
          <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #000" />
        </template>
        <template #right v-if="$route.meta.shareAction">
          <el-icon
            class="nav-layout-right"
            @click="route.meta.shareAction && route.meta.shareFunc()"
            style="font-size: 30px; width: 30px; height: 30px"
          >
            <RiShareForwardBoxFill style="width: 30px; height: 30px" />
          </el-icon>
        </template>
      </van-nav-bar>
    </header>
    <!-- content -->
    <div class="redirect-body" :style="redirectBodyStyle">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { RiShareForwardBoxFill } from 'vue-icons-plus/ri';
import { RouterView, useRoute } from 'vue-router';
import appBridge from '@/assets/js/appBridge';
import { computed } from 'vue';
import type { CSSProperties } from 'vue';

const route = useRoute();
// console.log(route.meta.pureBGC);
/**
 * 控制 body 的 style
 */
const redirectBodyStyle = computed(() => {
  // 背景色控制
  const bgc = route.meta.bgc as string;
  // 是否纯色背景
  const pureBGC = route.meta.pureBGC;
  // style 样式
  const style = {} as CSSProperties;

  if (bgc) style.background = bgc;
  else if (pureBGC) style.background = '#fff';

  return style;
});

/**
 * 控制 header 的 style
 */
const redirectHeaderStyle = computed(() => {
  let css = [];
  if (route.meta.header?.bgc === 'green') css.push('green-header');
  else if (route.meta.header?.pureBGC) {
    console.log('pureBGC');
  } else css.push('navbar-header');
  return css;
});

function goBack() {
  if (window.history.length > 1 && route.name !== 'home') {
    window.history.back();
  } else {
    appBridge.navigateBack();
  }
}

// 处理物理返回键
const handlePopState = () => {
  goBack();
};

// // 组件挂载时添加监听
// onMounted(() => {
//   window.addEventListener('popstate', handlePopState);
// });

// // 组件卸载时移除监听
// onUnmounted(() => {
//   window.removeEventListener('popstate', handlePopState);
// });
</script>

<style scoped lang="scss">
@use '@/assets/css/theme';
@import '@/assets/css/main';

.common-layout {
  overflow: hidden;
  height: 100vh;
  background-color: theme.$nav-header-color;
  color: #333;

  .nav-layout-right {
    :deep(svg) {
      width: 20px !important;
      height: 20px !important;
      stroke-width: 1px !important;
    }
  }
}

.green-header {
  background-color: theme.$theme-color;
}

.redirect-body {
  overflow: scroll;
  width: 100vw;
  height: calc(100vh - var(--sticky-top-height) - 1px);
  background: transparent;
}

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

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

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