""" @author: yy @desc：modal @date: 2025-07-25 01:34:20 """
<template>
  <el-dialog
    v-if="dialogFormVisible"
    v-model="dialogFormVisible"
    :title="title"
    :width="width"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="showClose"
    :destroy-on-close="destroyOnClose"
    :custom-class="`custom-dialog ${hideHeader ? 'hide-header-dialog' : ''}`"
    v-bind="$attrs"
  >
    <slot name="title"></slot>
    <slot></slot>
    <template #footer v-if="footer">
      <div class="dialog-footer">
        <el-button class="cancel" @click="dialogFormVisible = false">{{ cancelTitle }}</el-button>
        <el-button v-if="showOkButton" type="primary" :loading="okLoading" @click="handleOk">{{ okTitle }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed } from "vue"

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  hideHeader: {
    type: Boolean,
    default: false
  },
  // 是否有footer
  footer: {
    type: Boolean,
    default: true
  },
  // 是否有footer
  showClose: {
    type: Boolean,
    default: false
  },
  showOkButton: {
    type: Boolean,
    default: true
  },
  okTitle: {
    type: String,
    default: "保存"
  },
  cancelTitle: {
    type: String,
    default: "取消"
  },
  width: {
    type: String,
    default: "80%"
  },
  loading: {
    type: Boolean,
    default: false
  },
  // 是否销毁
  destroyOnClose: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(["update:visible", "update:loading", "ok"])

const dialogFormVisible = computed({
  get() {
    return props.visible
  },
  set(val) {
    emit("update:visible", val)
  }
})
const okLoading = computed({
  get() {
    return props.loading
  },
  set(val) {
    emit("update:loading", val)
  }
})

const handleOk = () => {
  emit("ok")
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  .cancel {
    background-color: #fff;
    border: 1px solid #017359;
    color: #017359;
    &:hover {
      color: #fff !important;
      background-color: rgba(15, 142, 135, 0.5) !important;
      border-color: rgba(15, 142, 135, 0.5) !important;
    }
  }
}
</style>
<style lang="scss">
.custom-dialog {
  .el-dialog__header {
    background-color: #fff !important;
    .el-dialog__title {
      font-weight: 400;
      font-size: 20px !important;
      color: #000000 !important;
    }
  }
}
.hide-header-dialog {
  .el-dialog__header {
    display: none !important;
  }
}
</style>
