<template>
  <WlHeader
    :showBack="showBack"
    :showClose="showClose"
    :needAutoBack="false"
    @onBack="onBack"
    @onClose="onClose"
  >
    {{ title }}
    <template
      #header_part_right
      v-if="showCheckAll"
    >
      <span
        @click="onChooseAll"
        :class="rightTextClass"
      >{{ leftText }}</span>
    </template>
  </WlHeader>
</template>

<script lang="ts">
export default {
  name: "Header",
};
</script>
<script lang="ts" setup>
import { computed } from "vue";
import WlHeader from "@mobileUI/components/WlHeader/src/index.vue";

type Props = {
  title?: string;
  showBack?: boolean;
  showClose?: boolean;
  isAllChecked?: boolean;
  showCheckAll?: boolean;
  isMultiple?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  title: "",
  showBack: false,
  showClose: false,
  isAllChecked: false,
  showCheckAll: false,
  isMultiple: false,
});

const emit = defineEmits<{
  (e: "onBack");
  (e: "onClose");
  (e: "onChooseAll", val: Boolean);
}>();

const leftText = computed(() => {
  if (!props.isMultiple) return "";
  if (props.isAllChecked) return "取消全选";
  return "全选";
});

const rightTextClass = computed(() => {
  return {
    "uno-w-80 uno-fs-16 absolute uno-r-0 cursor-pointer inline-flex shrink-0 justify-center": true,
    "color-theme-color": props.isAllChecked,
  };
});

const onBack = () => emit("onBack");

const onClose = () => emit("onClose");

const onChooseAll = () => emit("onChooseAll", !props.isAllChecked);
</script>
