<template>
  <el-dialog
    v-model="dialogVisible"
    :width="width"
    :modal="false"
    :close-on-click-modal="false"
    :center="true"
    :show-close="false"
    top="20vh"
    @closed="handleClosed"
  >
    <template #header>
      <div class="dialog-header">
        <SvgIcon icon-class="JingGao" size="20px" color="#ff6712" />
        <span>{{ title }}</span>
        <button class="dialog-close-btn" @click="handleCancel">
          <SvgIcon icon-class="close" size="18px" />
        </button>
      </div>
    </template>
    <slot>
      <span>{{ content }}</span>
    </slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">{{ cancelText }}</el-button>
        <el-button class="confirm-btn" type="danger" :loading="loading" @click="handleConfirm">
          {{ confirmText }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

interface Props {
  modelValue: boolean
  title?: string
  content?: string
  width?: string | number
  confirmText?: string
  cancelText?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '确认删除',
  content: '删除后，该操作无法恢复！',
  width: '400px',
  confirmText: '删除',
  cancelText: '取消'
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
}>()

const loading = ref(false)
const dialogVisible = ref(props.modelValue)

// 监听 v-model 变化
watch(
  () => props.modelValue,
  val => {
    dialogVisible.value = val
  }
)

// 监听对话框显示状态变化
watch(dialogVisible, val => {
  emit('update:modelValue', val)
  // 当对话框关闭时，重置 loading 状态
  if (!val) {
    loading.value = false
  }
})

// 确认删除
const handleConfirm = async () => {
  loading.value = true
  emit('confirm')
}

// 取消
const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}

// 对话框关闭后重置 loading 状态
const handleClosed = () => {
  loading.value = false
}

// 暴露方法供外部调用
defineExpose({
  setLoading: (val: boolean) => {
    loading.value = val
  },
  close: () => {
    dialogVisible.value = false
  }
})
</script>

<style scoped lang="scss">
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;

  .dialog-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: auto;
    transition: transform 0.3s ease;

    &:hover {
      transform: rotate(360deg);
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .el-button:not(.confirm-btn) {
    background: #ffffff;
    border-color: #dcdfe6;
    color: #000000;

    &:hover {
      background: #f5f5f5;
      border-color: #c0c0c0;
    }
  }
}

.confirm-btn {
  --el-button-bg-color: #ff6712;
  --el-button-border-color: #ff6712;
  --el-button-hover-bg-color: #e55a0f;
  --el-button-hover-border-color: #e55a0f;
}
</style>
