<template>
  <div class="header" :class="{
      'header-border-bottom':border
  }" :style="background ? 'background:'+background : 'background: transparent;'">
    <!-- <m-icon type="fanhui" @click="onClickLeft" /> -->
    <div class="left">
      <img v-if="mode=='black'" @click="onClickLeft" class="left-arrow" src="./leftArrow_black.png" />
      <img v-if="mode=='white'" @click="onClickLeft" class="left-arrow" src="./leftArrow_white.png" />
    </div>

    <span :style="{
      color:mode
    }" class="title">{{ title }}</span>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const props = defineProps({
  title: String,
  border: Boolean,
  background:String,
  mode:{
    type:String,
    default:'black'
  }
});
const router = useRouter();
const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.header-border-bottom {
  border-bottom: 2px solid #e8e8e8;


}
.header {
  position: sticky;
  top: 0;
  font-size: 30px;
  padding: 20px;

  z-index: 999;
  .left {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    .left-arrow {
      width: 18px;
      height: 34px;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
  }
}
</style>
