<template>
  <div class="dialog">
    <el-dialog
      :model-value="props.flag"
      :append-to-body="props.isBody"
      ref="dialogTk"
      :top="props.top"
      :custom-class="props.customClass"
      :lock-scroll="false"
      :modal="props.modal"
      :before-close="close"
      :close-on-click-modal="false"
      :width="props.width"
      :show-close="props.showFlag"
    >
      <div class="dialog-content">
        <template v-if="props.type == 'del'">
          <div class="airportInfoDialog">
            <div class="title del-title">{{ props.msgTitle }}</div>
            <div class="Delcontent">
              <div class="content del-content">
                <span class="DelIcon"></span>是否确认删除<span
                  class="error l10"
                  >{{ props.delName }}</span
                >？
              </div>
              <div class="Delfoot text-right t30">
                <el-button size="default" type="danger" @click="delRemove"
                  >删除</el-button
                >
                <el-button size="default" @click="delRest">取消</el-button>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="airportInfoDialog dialog-public-background">
            <div class="title">
              <span>{{ props.msgTitle }}</span>
              <el-icon class="icon-close" @click="resetForm">
                <Close style="width: 1em; height: 1em;" />
              </el-icon>
            </div>
            <div class="content">
              <slot />
            </div>
            <div class="foot text-right t30">
              <el-button
                size="default"
                type="primary"
                class="r25 r26"
                @click="submitForm"
                >提交</el-button
              >
              <el-button size="default" class="r26" @click="resetForm"
                >取消</el-button
              >
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Close } from '@element-plus/icons-vue'
const props = defineProps({
  // 弹框开关
  flag: {
    type: Boolean,
    default: false,
  },
  showFlag: {
    type: Boolean,
    default: false,
  },
  // 弹框宽度
  width: {
    type: String,
    default: "400px",
  },
  // 弹框类名
  customClass: {
    type: String,
    default: "",
  },
  // 弹框高度
  top: {
    type: String,
    default: "0vh",
  },
  // 弹框遮罩层
  modal: {
    type: Boolean,
    default: true,
  },
  // 二级弹框标记
  child: {
    type: Boolean,
    default: false,
  },
  isBody: {
    type: Boolean,
    default: true,
  },
  //弹框类型
  type: {
    type: String,
    default: "",
  },
  //弹框-标题
  msgTitle: {
    type: String,
    default: "",
  },
  //弹框-删除-内容
  delName: {
    type: String,
    default: "",
  },
});
const emits = defineEmits([
  "closeDialog",
  "delRemove",
  "delRest",
  "submitForm",
  "resetForm",
]);
const close = () => {
  emits("closeDialog");
};
const delRemove = () => {
  emits("delRemove");
};
const delRest = () => {
  emits("delRest");
};
const submitForm = () => {
  emits("submitForm");
};
const resetForm = () => {
  emits("resetForm");
};
</script>
