<script setup lang="ts">
import HeaderBtn from './HeaderBtn.vue'
import { useRouter } from 'vue-router';
// 定义参数
interface HeaderProps  {
  showHomeBtn?: boolean
  showBackBtn?: boolean
  customHomeHandler?: boolean
  customBackHandler?: boolean
}
// 定义事件
type EmitHandler = {
  (e: 'toHome') : void, 
  (e: 'toBack') : void
}

// 获取事件
const emits = defineEmits<EmitHandler>()
// 参数获取
const props = withDefaults(defineProps<HeaderProps>(), {
  showHomeBtn: true, // 显示回到首页按钮
  showBackBtn: true, // 显示返回按钮
  customHomeHandler: false, // 自定义HomeHandler
  customBackHandler: false // 自定义BackHandler
})
const $router = useRouter()
const clickHandlerOfHome = function () {
  if (props.customHomeHandler) {
    emits("toHome")
  } else {
    console.log("datav-header: 返回首页")
    $router.push("/")
  }
}
const clickHandlerOfBack = function () {
 if (props.customBackHandler) {
    emits("toBack")
  } else {
    console.log("datav-header: 返回上一部")
    if ($router.currentRoute.value.fullPath !== '/') {
      $router.back()
    }
  }
}
</script>

<template>
  <div id="datav-header">
      <!-- 返回首页 -->
      <HeaderBtn @click="clickHandlerOfHome" id="homeBtn" v-if="props.showHomeBtn">
        <template #icon>
          <img id="home" src="/images/home.png" />
        </template>
      </HeaderBtn>
      <!-- 返回上一层  -->
      <HeaderBtn @click="clickHandlerOfBack" id="backBtn" v-if="props.showBackBtn">
        <template #icon>
          <img  id="back" src="/images/back.png" />
        </template>
      </HeaderBtn>
  </div>
</template>

<style scoped lang="less">
@import url('@/assets/css/common.less');

#datav-header {
  .flex(space-between, flex-start);
  background: url("@/assets/images/header.png") no-repeat center center;
  background-size: 90% 100%;
  // 居中
  margin: 0 auto;
  width: 98.3vw;
  height: 12.2vh;

  :deep(#homeBtn) {
    margin-top: 1vh;
    margin-left: -.7vw;
    #home  {
      width: 2.1vw;
      height: 3.5vh;
      margin-left: -0.2vw;
    }
  }
    :deep(#backBtn) {
    margin-top: 1vh;
    margin-left: -.7vw;
    #back {
      width: 2.6vw;
      height: 4vh;
    }
  }
}
</style>
