<script setup>
import { computed } from 'vue'

import LinkForm from './LinkForm.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  link: {
    type: Object,
    default: () => ({}),
  },
  mode: {
    type: String,
    default: 'create',
  },
})

const emit = defineEmits(['update:modelValue', 'submit'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

const title = computed(() => (props.mode === 'edit' ? '编辑书签' : '新增书签'))

function handleSubmit(payload) {
  emit('submit', payload)
  visible.value = false
}

function handleCancel() {
  visible.value = false
}
</script>

<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" :title="title" width="560px" destroy-on-close>
    <LinkForm :model-value="link" :mode="mode" @submit="handleSubmit" @cancel="handleCancel" />
  </el-dialog>
</template>

