<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    custom-class="editRowDialog"
    fullscreen
    align-center
    append-to-body
    :show-close="false"
  >
      <check
          v-if="visible"
          @onClose="onClose"
          :addRowData="addRowData"
          @confirm="onConfirm"
         :id="id"
      />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits , watch } from 'vue'
import check from '@/views/Photography/check'


const props = defineProps({
  id:{
    type: Number||String,
    default: 0
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  addRowData:{
    type: Object,
    default: () => {
      return { }
    }
  }
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm'): void
}>()

const visible = ref(props.modelValue)

// 监听visible变化
watch(() => visible.value, (newVal) => {
  console.log(visible.value)
  emit('update:modelValue', newVal)
})

const onClose = ()=>{
  console.log('onClose')
  visible.value = false;
}
const onConfirm = ()=>{
  console.log('onConfirm')
  emit('confirm')
  onClose()
}

</script>
<style lang="scss">
.editRowDialog {
  .el-dialog__body { background: rgba(0,0,0,.5)}
  .check-wrap {
    border-radius: 10px;
    overflow: hidden;
  }
}

</style>

<style lang="scss" scoped>

</style>
