<template>
    <up-action-sheet
        :actions="getActions"
        :title="title"
        :description="description"
        :cancelText="cancelText"
        :round="round"
        :show="modelValue"
        :closeOnClickAction="true"
        :closeOnClickOverlay="true"
        @select="handleSelect"
        @close="handleClose"
    ></up-action-sheet>
</template>

<script setup>
import { computed } from 'vue'

const es = defineEmits(['update:modelValue', 'select', 'close'])
const ps = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    labelField: {
        type: String,
        default: 'label'
    },
    valueField: {
        type: String,
        default: 'value'
    },
    options: {
        type: Array,
        default: () => {
            return []
        }
    },
    title: {
        type: String,
        default: ''
    },
    description: {
        type: String,
        default: ''
    },
    cancelText: {
        type: String,
        default: '取消'
    },
    round: {
        type: [String, Number],
        default: 10
    }
})
const getActions = computed(() => {
    return ps.options.map((item) => {
        return {
            ...item,
            name: item[ps.labelField]
        }
    })
})
const handleSelect = (data) => {
    es('update:modelValue', false)
    es('select', data[ps.valueField], data)
}
const handleClose = () => {
    es('update:modelValue', false)
    es('close')
}
</script>
<style lang="scss" scoped></style>
