<script setup lang="ts">
import { ref} from "vue"
import { useVModel } from "@vueuse/core"
import contentConfig from "./content.config"
import { PageContent } from "/@/components/PageContent";
import { ElMessage } from "element-plus"

const emit = defineEmits(['confirm'])
const props = defineProps<{ visible: boolean }>()

const visible = useVModel(props, 'visible')
const selection = ref<any[]>([])

function confirm(){
  if(selection.value.length === 0 || selection.value.length > 1){
    ElMessage.warning(selection.value.length === 0 ? '至少选择一个项目' : '只能选择一个项目')
    return
  }

  visible.value = false
  emit('confirm', selection.value[0])  
}
</script>

<template>
  <ElDialog 
    v-model="visible" 
    title="项目选择" 
    center
  >
    <div class="flex justify-end mb-[10px]">
      <ElButton 
        type="primary" 
        size="small" 
        @click="confirm"
      >保存</ElButton>
    </div>

    <PageContent 
      :content-config="contentConfig" 
      @selection-change="value => selection = value"
     />
  </ElDialog>
</template>
