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


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


function onConfirm(){
  if(selected.value.length === 0){
    ElMessage.warning('请选择一条数据')
    return
  }

  if(selected.value.length > 1){
    ElMessage.warning('只能选择一条数据')
    return
  }


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

<template>
  <ElDialog class="relative" top="10px" v-model="visible" title="选择商品" center>
    <PageContainer
      v-if="visible"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      @contentSelectChange="value => selected = value"
      isPageStart
    />

    <ElButton class="absolute right-[36px] bottom-[46px]" type="primary" @click="onConfirm">
      保存
    </ElButton>
  </ElDialog>
</template>
