<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="handleClosed"
  >
    <div class="batch-operation-content">
      <!-- 选中项提示 -->
      <el-alert
        v-if="selectedCount > 0"
        :title="`已选择 ${selectedCount} 项`"
        type="info"
        :closable="false"
        show-icon
      />

      <!-- 操作表单 -->
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        class="operation-form"
      >
        <slot name="form" :form-data="formData" />
      </el-form>

      <!-- 确认提示 -->
      <el-alert
        v-if="confirmMessage"
        :title="confirmMessage"
        type="warning"
        :closable="false"
        show-icon
        class="confirm-alert"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'

  interface Props {
    modelValue: boolean
    title: string
    width?: string | number
    selectedCount?: number
    confirmMessage?: string
    formRules?: FormRules
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
    (e: 'confirm', formData: Record<string, any>): void | Promise<void>
    (e: 'cancel'): void
  }

  const props = withDefaults(defineProps<Props>(), {
    width: '600px',
    selectedCount: 0
  })

  const emit = defineEmits<Emits>()

  const formRef = ref<FormInstance>()
  const formData = ref<Record<string, any>>({})
  const loading = ref(false)

  const visible = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
    }
  })

  const handleConfirm = async () => {
    if (!formRef.value) return

    try {
      await formRef.value.validate()

      loading.value = true
      try {
        await emit('confirm', formData.value)
        visible.value = false
        ElMessage.success('操作成功')
      } catch (error) {
        console.error('批量操作失败:', error)
        ElMessage.error('操作失败')
      } finally {
        loading.value = false
      }
    } catch {
      ElMessage.warning('请检查表单填写')
    }
  }

  const handleCancel = () => {
    visible.value = false
    emit('cancel')
  }

  const handleClosed = () => {
    formRef.value?.resetFields()
    formData.value = {}
  }

  // 暴露方法供父组件调用
  defineExpose({
    formData
  })
</script>

<style scoped lang="scss">
  .batch-operation-content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .operation-form {
      margin-top: 16px;
    }

    .confirm-alert {
      margin-top: 8px;
    }
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
</style>
