<template>
  <view class="head-wrapper" :style="{ top: BarHeight + 'px' }">
    <view class="head-menu">
      <Left class="iconfont" @click="returns" />
      <view class="line"></view>
      <Home class="iconfont" @click="goHome" />
    </view>
    <text style="width: 2000px;text-align: center;">{{ props.title }}</text>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { computed } from "vue";
import { Home, Left } from "@nutui/icons-vue-taro";

const statusBarHeight = Taro.getSystemInfoSync()?.statusBarHeight as number;
const BarHeight = computed(() => statusBarHeight - 7);

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});

const returns = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

const goHome = () => {
  Taro.switchTab({
    url: "/pages/index/index",
  });
};
</script>

<style lang="scss">
.head-wrapper {
  z-index: 999;
  display: flex;
  align-items: center;
  position: fixed;
  left: 30px;
  height: 114px;
}

.head-menu {
  display: flex;
  align-items: center;
  height: 54px;
  width: 140px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 27px;
  .line {
    width: 1px;
    height: 25px;
    background: #fff;
  }
  .iconfont {
    flex: 1;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
  }
}
</style>
