<template>
  <el-dialog
    :visible.sync="visible"
    :width="width"
    :custom-class="'custom-dialog ' + type"
    :close-on-click-modal="!closeOnModalClick"
    :show-close="!closeOnModalClick"
    @close="handleCancel"
  >
    <!-- 标题区域 -->
    <template #title>
      <div class="dialog-header">
        <svg-icon style="width: 24px; height: 24px" :icon-class="type" />
        <span class="header-title">{{ title }}</span>
      </div>
      <div
        class="custom-close"
        @mouseover="isHover = true"
        @mouseleave="isHover = false"
        @click="handleCancel"
      >
        <svg-icon
          :icon-class="isHover ? 'close-hover' : 'close'"
          class="close-icon"
        />
      </div>
    </template>

    <!-- 内容区域 -->
    <div class="dialog-content">
      <slot>{{ content }}</slot>
    </div>

    <!-- 按钮区域 -->
    <template #footer>
      <el-button
        v-if="type === 'danger'"
        class="custom-btn"
        style="color: #333333; background-color: #f1f1f1; border: none"
        @click="handleCancel"
        >取消</el-button
      >
      <el-button type="primary" @click="handleConfirm">{{
        confirmText
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'MessagePopUp',
  props: {
    type: {
      type: String,
      default: 'info',
      validator: (v) => ['info', 'success', 'error', 'danger'].includes(v)
    },
    title: {
      type: String,
      default: '提示信息'
    },
    width: {
      type: String,
      default: '500px'
    },
    content: {
      type: String,
      default: ''
    },
    //是否禁止取消
    closeOnModalClick: {
      type: Boolean,
      default: false
    },
    conFirmText: {
      type: String,
      default: ''
    }
  },
  computed: {
    confirmText() {
      // 优先使用传入的confirmText
      return this.conFirmText || (this.type === 'danger' ? '确定' : '我知道了')
    }
  },
  data() {
    return {
      visible: false,
      isHover: false
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    handleConfirm() {
      this.$emit('confirm', 'confirm')
      this.visible = false
    },
    handleCancel() {
      if (this.closeOnModalClick) return
      this.$emit('confirm', 'cancel')
      this.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  border-radius: 12px;
  margin: 35% auto;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 33vh !important;
}
::v-deep .el-dialog__header {
  padding: 24px;
}
::v-deep .el-dialog__body {
  padding: 0 24px 24px 60px;
}
/* 添加圆角 */
:deep(.custom-dialog) {
  border-radius: 8px !important;
  margin: 20px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 90% !important;
    margin: 20% auto !important;
  }
  ::v-deep .el-dialog__header {
    padding: 16px;
  }
  ::v-deep .el-dialog__body {
    padding: 0 16px 16px 40px;
  }
  ::v-deep .el-dialog__footer {
    padding: 0 16px 16px;
    text-align: end;
  }
  .dialog-header {
    padding-bottom: 8px;
    .header-title {
      font-size: 15px;
    }
  }
  .dialog-content {
    font-size: 13px;
    line-height: 20px;
  }
  .custom-close {
    right: 16px;
    top: 16px;
  }
  .el-button {
    min-width: 80px;
    padding: 8px 15px;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  .header-title {
    margin-left: 12px;
  }
}
.header-icon {
  font-size: 20px;
  margin-right: 8px;
}

.dialog-content {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.el-button {
  min-width: 88px;
}
::v-deep .el-dialog__header {
  position: relative; /* 为绝对定位提供参考 */
}
::v-deep .el-dialog__headerbtn {
  display: none !important;
}

.custom-close {
  position: absolute;
  right: 24px;
  top: 24px;
  cursor: pointer;
  z-index: 2000;
  transition: transform 0.3s;

  .close-icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}
</style>
