<template>
  <view class="layout">
    <view class="navbar">
      <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
      <view
        :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
        class="titleBar"
      >
        <view class="search">
          <image :src="commonEnum.BACK" class="left-icon" @click="goBack"></image>
        </view>
        <view class="title">{{ title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {
  getStatusBarHeight,
  getTitleBarHeight,
  getNavBarHeight,
  getLeftIconLeft,
} from '@/utils/system.js'

import commonEnum from '../../enum/commonEnum'
import { navigateBack } from '../../utils/router'

defineProps({
  title: {
    type: String,
    default: '壁纸',
  },
})

function goBack() {
  navigateBack(1)
  console.log('666')
}
</script>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    .statusBar {
    }

    .titleBar {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 30rpx;

      .title {
        font-size: 36rpx;
        font-weight: 400;
        color: #3d3d3d;
      }

      .search {
        position: absolute;
        left: 0;
        width: 220rpx;
        height: 50rpx;
        margin-left: 10rpx;
        color: #3d3d3d;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        //background: black;

        .left-icon {
          margin-left: 60rpx;
          width: 18rpx;
          height: 32rpx;
        }
      }
    }
  }

  .fill {
  }
}
</style>
