<template>
    <div class="mt-5" v-if="selectData.length">
        <el-table ref="tableDataRef" :data="selectData">
            <el-table-column property="name" label="服务区名称" width="240">
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                    <div class="flex">
                        <el-button type="primary" link @click="handleDeleteItem(scope.$index)"
                            :disabled="disabled">移除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { computed, withDefaults } from 'vue'

const props = withDefaults(
    defineProps<{
        modelValue: any
        disabled: boolean
    }>(),
    {
        modelValue: [],
        disabled: false
    }
)
const emit = defineEmits(['update:modelValue'])

const selectData: any = computed(() => {
    return props.modelValue || []
})
const handleDeleteItem = (index: number) => {
    selectData.value.splice(index, 1)
    emit('update:modelValue', selectData.value)
}
</script>

<style lang="scss" scoped></style>

