<template>
  <el-dialog
    :model-value="visible"
    title="新增交接事項"
    width="480px"
    @close="close"
  >
    <el-form :model="form" label-width="90px">
      <el-form-item label="工作內容">
        <el-input v-model="form.content" />
      </el-form-item>
      <el-form-item label="持續">
        <el-input v-model="form.continue" />
      </el-form-item>
      <el-form-item label="結案">
        <el-input v-model="form.result" />
      </el-form-item>
      <el-form-item label="備註">
        <el-input v-model="form.remark" type="textarea" :rows="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">加入</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const props = defineProps({ visible: { type: Boolean, default: false } });
const emit = defineEmits(["update:visible", "add"]);
import { reactive } from "vue";
const form = reactive({ content: "", continue: "", result: "", remark: "" });
function reset() {
  form.content = "";
  form.continue = "";
  form.result = "";
  form.remark = "";
}
function close() {
  emit("update:visible", false);
  reset();
}
function confirm() {
  emit("add", { ...form });
  close();
}
</script>
<style scoped></style>
