<template>
  <ActionSheet
    v-model:show="actionSheetVisible"
    :cancel-text="cancelText"
    close-on-click-action
    close-on-popstate
    :actions="actions"
    :teleport="teleport"
    @cancel="onClose"
    @click-overlay="onClose"
    @select="onSelect"
  >
    <WlHeader
      :title="title"
      :showClose="showClose"
      :showBack="showBack"
      v-if="headerVisible"
      @onClose="onClose"
    />
    <slot />
  </ActionSheet>
</template>

<script lang="ts">
export default {
  name: "WlActionSheet",
};
</script>

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

let actionSheetVisible = ref(false);

type Props = {
  title?: string;
  cancelText?: string;
  modelValue?: boolean;
  showClose?: boolean;
  showBack?: boolean;
  headerVisible?: boolean;
  actions: TActionSheet[];
  teleport?: string | Element;
};
const props = withDefaults(defineProps<Props>(), {
  title: "",
  cancelText: "取消",
  modelValue: false,
  headerVisible: false,
  showClose: true,
  showBack: false,
  actions: () => [],
  teleport: "",
});

const emit = defineEmits<{
  (e: "update:modelValue", val: boolean);
  (e: "onClose");
  (e: "onSelect", val: TActionSheet);
}>();

const onClose = () => {
  emit("update:modelValue", false);
  emit("onClose");
};

const onSelect = (val: TActionSheet) => {
  emit("onSelect", val);
  onClose();
};

watchEffect(() => {
  actionSheetVisible.value = props.modelValue;
});
</script>
