<template>
  <div :class="`uno-fs-16 uno-h-44 relative font-medium box-border text-base-color bg-white flex-between ${needBottomBorder ? 'border-bottom' : ' '
    }`">
    <div class="z-2 flex uno-min-w-44 uno-max-w-88">
      <slot name="header_part_left">
        <div
          class="box-content flex-middle-center cursor-pointer uno-h-44 uno-w-44"
          @click="onBackPage"
          v-show="showBack"
        >
          <WlSvgIcon
            type="arrowTipLeft"
            width="22"
            height="22"
            color="#000"
          />
        </div>
      </slot>
    </div>
    <div class="uno-elli-1 z-1 box-border flex-middle-center absolute text-center uno-l-44 uno-r-44">
      <slot>
        {{ title }}
      </slot>
    </div>
    <div class="relative z-2 flex-middle-center uno-min-w-44">
      <slot name="header_part_right">
        <div
          class="box-content flex-middle-center cursor-pointer uno-h-44 uno-w-44"
          @click="onClose"
          v-show="showClose"
        >
          <WlSvgIcon
            type="close"
            width="22"
            height="22"
            color="#000"
          />
        </div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2024-03-18 19:32:05
 */
export default {
  name: "WlHeader",
};
</script>

<script lang="ts" setup>
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";

type Props = {
  title?: string;
  showBack?: boolean;
  showClose?: boolean;
  needAutoBack?: boolean;
  needBottomBorder?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  title: "",
  showBack: false,
  showClose: false,
  needAutoBack: true,
  needBottomBorder: false,
});

const emit = defineEmits<{
  (e: "onBack"): void;
  (e: "onClose"): void;
}>();

const onBackPage = () => {
  if (props.needAutoBack) {
    history.back();
  } else {
    emit("onBack");
  }
};

const onClose = () => {
  emit("onClose");
};
</script>
