<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    :before-close="handleClose"
  >
    <div class="save-version-dialog">
      <!-- 历史版本表格 -->
      <div class="history-section">
        <h4 class="section-title">历史版本</h4>
        <el-table
          :data="historyList"
          height="200"
          empty-text="暂无历史版本"
          :header-cell-style="{ background: '#f0f7ff', color: '#606266' }"
        >
          <el-table-column
            prop="versionname"
            label="版本名称"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="operator"
            label="操作人"
            width="100"
            align="center"
          />
          <el-table-column
            prop="savetime"
            label="保存时间"
            width="160"
            align="center"
          />
        </el-table>
      </div>

      <!-- 保存版本区域 -->
      <div class="save-section">
        <h4 class="section-title">保存版本</h4>
        <div class="save-input-container">
          <el-input
            v-model="versionName"
            placeholder="请输入版本名称"
            clearable
            class="version-input"
            @keyup.enter="handleSave"
          />
          <el-button
            type="primary"
            @click="handleSave"
            :loading="saving"
            class="save-btn"
          >
            保存
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '保存发现模板'
  },
  historyList: {
    type: Array,
    default: () => []
  },
  versionName: {
    type: String,
    default: ''
  }
})

const emit = defineEmits([
  'update:modelValue',
  'update:versionName',
  'save',
  'close'
])

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

const versionName = computed({
  get: () => props.versionName,
  set: (value) => emit('update:versionName', value)
})

const saving = ref(false)

// 处理保存
const handleSave = async () => {
  if (!versionName.value.trim()) {
    ElMessage.warning('请输入版本名称')
    return
  }

  saving.value = true
  try {
    emit('save', versionName.value.trim())
  } catch (error) {
    console.error('Save error:', error)
  } finally {
    saving.value = false
  }
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}

// 监听对话框显示状态，重置状态
watch(dialogVisible, (newVal) => {
  if (!newVal) {
    saving.value = false
  }
})
</script>

<style scoped lang="scss">
.save-version-dialog {
  .section-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
  }

  .history-section {
    margin-bottom: 20px;
    
    :deep(.el-table) {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      
      .el-table__header-wrapper {
        th {
          background: #f0f7ff;
          font-weight: 600;
          
          .cell {
            font-weight: 600;
          }
        }
      }
      
      .el-table__body-wrapper {
        .el-table__row {
          &:nth-child(even) {
            background-color: #fafafa;
          }
          
          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
    }
  }

  .save-section {
    .save-input-container {
      display: flex;
      gap: 12px;
      align-items: center;
      
      .version-input {
        flex: 1;
        
        :deep(.el-input__inner) {
          height: 36px;
        }
      }
      
      .save-btn {
        height: 36px;
        min-width: 80px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 640px) {
  .save-version-dialog {
    .save-input-container {
      flex-direction: column;
      align-items: stretch;
      
      .save-btn {
        width: 100%;
      }
    }
  }
}
</style>