<template>
  <el-dialog
    v-model="show" align-center destroy-on-close title="场馆照片"
    width="800"
  >
    <el-form-item label="场馆照片" label-width="120" prop="formImage" required>
      <image-upload v-model="formImage" :limit="3" />
    </el-form-item>
    <div style="text-align: center;">
      <el-button class="btn" round @click="show=false">取消</el-button>
      <el-button class="btn" round type="primary" @click="handelNext">下一步</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import ImageUpload from '@/components/ImageUpload/index.vue'

const emit = defineEmits(['handelNext'])
const show = ref(false)
const formImage = ref([])
const { proxy } = getCurrentInstance()

function open() {
  show.value = true
}

function handelNext() {
  if (formImage.value.length === 0) {
    return proxy.$modal.msgError('请上传1～3张场馆照片')
  }
  emit('handelNext', formImage.value)
  show.value = false
}

defineExpose({ open })
</script>

<style scoped>
.btn {
  width: 200px;
  height: 38px;
}
</style>