<template>
    <WlActionSheet
        cancel-text="取消"
        v-model="State.actionSheetVisible"
        :actions="State.actionsheetData"
        :headerVisible="false"
        @select="onActionsheetChange"
        @onClose="onCancel"
    />
</template>
  
<script lang="ts">
export default {
    name: "OperationActionSheet",
}
</script>
  
<script setup lang="ts">
/**
 * 管理分组的actionsheet
 */
import { reactive, watchEffect } from "vue";
import { TActionSheet } from "@mobileUI/typings/WlActionSheet";
import WlActionSheet from "@mobileUI/components/WlActionSheet";
type Props = {
    modelValue?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
})

const State = reactive<{
    actionsheetData: Array<TActionSheet>;
    actionSheetVisible: boolean;
}>({
    actionsheetData: [
        {
            name: "编辑",
            value: "edit",
        },
        {
            name: "删除",
            value: "delete",
        },
    ],
    actionSheetVisible: false
});

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

const onCancel = () => {
    emit("update:modelValue", false);
    State.actionSheetVisible = false;
};

const onActionsheetChange = (item: TActionSheet) => {
    onCancel();
    emit("onChange", item);
};

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