<template>
  <Popup
    v-model:show="popUpVisible"
    :teleport="teleport"
    :position="position"
    :close-on-popstate="true"
    :style="popupStyle"
    v-bind="$attrs"
    @close="onClose"
    @open="onOpen"
  >
    <div class="popup-wrap" data-weiling-mobile-ui-wl-popup>
      <WlHeader
        :title="title"
        :showClose="showRightClose"
        @onClose="onClose"
        @onBack="onBack"
        :showBack="showBack"
        :needAutoBack="needAutoBack"
        v-if="headerVisible"
      >
        <template #header_part_left>
          <slot name="header_part_left" />
        </template>
      </WlHeader>
      <div class="popup-content">
        <slot />
      </div>
    </div>
  </Popup>
</template>

<script lang="ts">
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2023-12-14 17:51:59
 */
export default {
  name: "WlPopup",
};
</script>

<script setup lang="ts">
import { Popup } from "vant";
import { ref, watchEffect, computed } from "vue";
import WlHeader from "@mobileUI/components/WlHeader/src/index.vue";

type TPosition = "top" | "bottom" | "right" | "left" | "center";

type Props = {
  modelValue?: boolean;
  teleport?: string;
  position?: TPosition;
  headerVisible?: boolean;
  title?: string;
  showRightClose?: boolean;
  showBack?: boolean;
  needAutoBack?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  teleport: "body",
  position: "bottom",
  headerVisible: false,
  title: "",
  showRightClose: true,
  showBack: false,
  needAutoBack: true,
});

const popUpVisible = ref(false);

const popupStyle = computed(() => {
  return {
    height: "70%",
  };
});
const emit = defineEmits<{
  (e: "update:modelValue", val: boolean);
  (e: "onClose");
  (e: "onBack");
}>();

const onClose = () => {
  emit("update:modelValue", false);
  emit("onClose");
};
const onOpen = () => {
  emit("update:modelValue", true);
};
const onBack = () => {
  emit("onBack");
};
watchEffect(() => {
  popUpVisible.value = props.modelValue;
});
</script>

<style lang="scss">
.popup-wrap[data-weiling-mobile-ui-wl-popup] {
  height: 100%;
  font-size: j(14);
  display: flex;
  flex-direction: column;

  .popup-content {
    flex: 1;
    @extend %overflow-auto;
  }
}
</style>
