<template>
  <el-dialog v-model="dialogVisible" title="测试函数式弹窗" width="50%" draggable overflow>
    <span>{{ props.content }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">Cancel</el-button>
        <el-button type="primary" @click="handleSubmit"> Submit </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from "vue";
// 注意: 需要按需引入使用到的第三方UI组件
import { ElDialog, ElButton } from "element-plus";
const props = withDefaults(
  defineProps<{
    show?: boolean; // moadl开关
    content?: string; // 内容
  }>(),
  {}
);
const emits = defineEmits(["submit", "cancel"]);
const state = reactive({
  dialogVisible: props.show
});
const { dialogVisible } = toRefs(state);
/** submit */
const handleSubmit = () => {
  // 回调
  emits("submit", { action: "submit", msg: "submit back" });
  // 关闭弹窗
  dialogVisible.value = false;
};
/** cancel */
const handleCancel = () => {
  // 回调
  emits("cancel", { action: "cancel", msg: "cancel back" });
  // 关闭弹窗
  dialogVisible.value = false;
};
</script>
