<template>
  <Dialog v-model="dialogVisible" title="配置器械" width="800px" :enableModalClose="false">
    <!-- 使用 el-form 包装表格，实现统一验证 -->
    <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="submitLoading">
      <!-- 搜索栏和按钮区域 -->
      <div class="search-bar">
        <el-input v-model="searchKeyword" class="!w-240px" clearable placeholder="搜索器械名称"
          @input="filterEquipmentOptions">
          <template #append>
            <el-button @click="handleSearch">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
          </template>
        </el-input>

        <el-button type="primary" @click="addNewRow" class="add-btn">
          <Icon class="mr-5px" icon="ep:plus" />
          新增一行
        </el-button>
      </div>

      <!-- 动态表单表格 -->
      <div class="equipment-table">
        <el-table :data="formData.rows" style="width: 100%" empty-text="暂无器械配置，请点击上方按钮添加">
          <!-- 器械名称列 -->
          <el-table-column label="器械名称" min-width="200">
            <template #default="{ row, $index }">
              <el-form-item :prop="`rows[${$index}].name`" :rules="formRules.name" class="table-form-item">
                <el-select v-model="row.name" filterable allow-create default-first-option placeholder="选择或输入器械名称"
                  style="width: 100%" @change="handleEquipmentChange(row, $index)">
                  <el-option v-for="item in filteredEquipmentOptions" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 器械类型列 -->
          <el-table-column label="器械类型" min-width="150">
            <template #default="{ row, $index }">
              <el-form-item :prop="`rows[${$index}].type`" :rules="formRules.type" class="table-form-item">
                <el-select v-model="row.type" placeholder="选择类型" :style="{ width: '150px' }">
                  <el-option v-for="item in getIntDictOptions(DICT_TYPE.EQUIPMENT_TYPE)" :key="item.value"
                    :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 数量列 -->
          <el-table-column label="数量" width="120">
            <template #default="{ row, $index }">
              <el-form-item :prop="`rows[${$index}].quantity`" :rules="formRules.quantity" class="table-form-item">
                <el-input-number v-model="row.quantity" :min="1" :max="999" controls-position="right" placeholder="数量"
                  style="width: 100%" />
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <el-table-column label="操作" width="80" fixed="right">
            <template #default="{ $index }">
              <el-button link type="danger" :disabled="formData.rows.length <= 1" @click="removeRow($index)">
                <Icon icon="ep:delete" />
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <!-- 统计信息 -->
    <div v-if="formData.rows.length > 0" class="summary-info">
      <el-text type="info">
        共 {{ formData.rows.length }} 个器械，总计数量：{{ totalQuantity }}
      </el-text>
    </div>

    <!-- 操作按钮 -->
    <template #footer>
      <el-button :disabled="formData.rows.length === 0" :loading="submitLoading" type="primary" @click="handleSubmit">
        确定保存
      </el-button>

      <el-popover placement="top" width="200px" v-model:visible="popoverVisible" trigger="click">
        <template #reference>
          <el-button>关闭</el-button>
        </template>

        <p>数据未保存，确定关闭吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="small" type="text" @click="popoverVisible = false">取消</el-button>
          <el-button type="primary" size="small" @click="close">确定</el-button>
        </div>
      </el-popover>

      <!-- <el-button v-if="formData.rows.length > 0" @click="handleReset">
        重置
      </el-button> -->
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted, nextTick } from 'vue'
import { type FormInstance, type FormRules } from 'element-plus'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

// 类型定义
interface EquipmentRow {
  name: string
  type: number
  quantity: number
  id?: number
}

interface EquipmentOption {
  value: string
  label: string
  type: number
}

// 响应式数据
const dialogVisible = ref(false)
const submitLoading = ref(false)
const searchKeyword = ref('')
const formRef = ref<FormInstance>() // 表单引用
const popoverVisible = ref(false) // 关闭确认弹窗

// 使用统一表单数据模型
const formData = reactive({
  rows: [] as EquipmentRow[]
})


// 预设器械选项
const presetEquipmentOptions = ref<EquipmentOption[]>([
  { value: '跑步机', label: '跑步机', type: 1 },
  { value: '动感单车', label: '动感单车', type: 1 },
  { value: '椭圆机', label: '椭圆机', type: 1 },
  { value: '卧推架', label: '卧推架', type: 2 },
  { value: '深蹲架', label: '深蹲架', type: 2 },
  { value: '哑铃', label: '哑铃', type: 3 },
  { value: '杠铃', label: '杠铃', type: 3 },
  { value: '瑜伽垫', label: '瑜伽垫', type: 4 },
  { value: '健身球', label: '健身球', type: 4 }
])

// 计算属性
const filteredEquipmentOptions = computed(() => {
  if (!searchKeyword.value) {
    return presetEquipmentOptions.value
  }

  const keyword = searchKeyword.value.toLowerCase()
  return presetEquipmentOptions.value.filter(item =>
    item.label.toLowerCase().includes(keyword) ||
    item.value.toLowerCase().includes(keyword)
  )
})

const totalQuantity = computed(() => {
  return formData.rows.reduce((sum, row) => sum + (row.quantity || 0), 0)
})

// 修复的表单验证规则
const formRules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: '请输入器械名称',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        if (!value || value.toString().trim() === '') {
          callback(new Error('器械名称不能为空'))
        } else if (value.toString().length > 50) {
          callback(new Error('器械名称不能超过50个字符'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    }
  ],
  type: [
    {
      required: true,
      message: '请选择器械类型',
      trigger: ['blur', 'change']
    }
  ],
  quantity: [
    {
      validator: (rule, value, callback) => {
        if (value === null || value === undefined || value === '') {
          callback(new Error('请输入数量'))
        } else if (Number(value) < 1) {
          callback(new Error('数量必须大于0'))
        } else if (Number(value) > 999) {
          callback(new Error('数量不能超过999'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    }
  ]
})

// 方法定义
// 添加新行
const addNewRow = () => {
  const newRow: EquipmentRow = {
    name: '',
    type: 1,
    quantity: 1,
  }
  formData.rows.push(newRow)
}

// 移除行
const removeRow = (index: number) => {
  if (formData.rows.length <= 1) {
    message.warning('至少需要保留一个器械配置')
    return
  }

  formData.rows.splice(index, 1)
  message.success(t('common.delSuccess'))
}

// 处理器械选择变化
const handleEquipmentChange = (row: EquipmentRow, index: number) => {
  if (row.name) {
    const matchedEquipment = presetEquipmentOptions.value.find(
      item => item.value === row.name
    )
    if (matchedEquipment && matchedEquipment.type) {
      row.type = matchedEquipment.type

      // 触发验证更新
      nextTick(() => {
        if (formRef.value) {
          formRef.value.validateField(`rows[${index}].type`)
        }
      })
    }
  }
}

// 搜索器械
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
}

// 过滤器械选项
const filterEquipmentOptions = () => {
  // 实时过滤，已在 computed 中处理
}


// 修复的表单验证方法
const validateForm = async (): Promise<boolean> => {
  if (!formRef.value) {
    return false
  }

  try {
    await formRef.value.validate()
    return true
  } catch (error) {
    console.error('表单验证失败:', error)
    message.warning('请检查表单数据是否正确填写')
    return false
  }
}

// 检查重复器械
const checkDuplicateEquipment = (): boolean => {
  const nameSet = new Set()
  let hasDuplicate = false

  for (const row of formData.rows) {
    if (!row.name || row.name.trim() === '') continue

    if (nameSet.has(row.name.trim().toLowerCase())) {
      message.warning(`器械"${row.name}"已存在，请勿重复添加`)
      hasDuplicate = true
      break
    }
    nameSet.add(row.name.trim().toLowerCase())
  }

  return !hasDuplicate
}

// 修复的提交方法
const handleSubmit = async () => {
  if (formData.rows.length === 0) {
    message.warning('请至少添加一个器械配置')
    return
  }

  // 检查是否有空行
  const emptyRows = formData.rows.filter(row =>
    !row.name || row.name.trim() === '' ||
    !row.type ||
    !row.quantity
  )

  if (emptyRows.length > 0) {
    message.warning('请填写完整的器械信息')
    return
  }

  // 验证表单
  const isValid = await validateForm()
  if (!isValid) {
    console.log('表单验证失败')
    return
  }

  // 检查重复
  if (!checkDuplicateEquipment()) {
    return
  }

  submitLoading.value = true

  try {
    // 构造提交数据
    const submitData = formData.rows.map(row => ({
      name: row.name.trim(),
      type: Number(row.type),
      quantity: Number(row.quantity)
    }))

    message.success('配置保存成功')

    // 触发成功事件
    emit('success', submitData)
    close()

  } catch (error) {
    console.error('保存失败:', error)
    message.error('保存失败: ' + (error as Error).message)
  } finally {
    submitLoading.value = false
  }
}

// 重置表单
const handleReset = () => {
  formData.rows = [createEmptyRow()]
  searchKeyword.value = ''

  // 重置表单验证状态
  if (formRef.value) {
    formRef.value.clearValidate()
  }

  message.info('已重置')
}

// 创建空行
const createEmptyRow = (): EquipmentRow => ({
  name: '',
  type: 1,
  quantity: 1
})

// 打开弹窗
const open = (initialData?: EquipmentRow[]) => {
  dialogVisible.value = true
  submitLoading.value = true
  // 重置表单状态
  if (formRef.value) {
    formRef.value.clearValidate()
  }

  // 初始化数据
  if (initialData && initialData.length > 0) {
    formData.rows = initialData.map(item => ({
      ...item
    }))
  }
  if (formData.rows.length === 0) {
    // 默认添加一个空行
    formData.rows = [createEmptyRow()]
  }
  submitLoading.value = false
}

// 关闭弹窗
const close = () => {
  popoverVisible.value = false
  dialogVisible.value = false
  searchKeyword.value = ''
  submitLoading.value = false

  // 清除验证状态
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

// 暴露方法
defineExpose({ open, close })

// 事件发射
const emit = defineEmits<{
  success: [data: EquipmentRow[]]
}>()


// 初始化
onMounted(() => {
  // 可以在这里加载预设数据
})
</script>

<style scoped>
.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}

.add-btn {
  margin-left: auto;
}

.equipment-table {
  margin: 16px 0;
  min-height: 200px;
}

.table-form-item {
  margin-bottom: 0;
}

.table-form-item :deep(.el-form-item__error) {
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  z-index: 1000;
}

.summary-info {
  margin-top: 12px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
  text-align: center;
  font-size: 14px;
}

/* 表格样式优化 */
:deep(.el-table .el-input-number) {
  width: 100%;
}

:deep(.el-table .el-select) {
  width: 100%;
}

:deep(.el-table .el-form-item) {
  margin-bottom: 0;
  margin-right: 0;
}

/* 错误状态样式 */
:deep(.el-form-item.is-error .el-input__inner),
:deep(.el-form-item.is-error .el-input__inner:focus),
:deep(.el-form-item.is-error .el-textarea__inner),
:deep(.el-form-item.is-error .el-textarea__inner:focus) {
  border-color: #f56c6c;
}
</style>