<template>
  <div class="supersets-page">
    <ContentWrap class="plan-search-bar">
      <!-- 1. 搜索栏区域 -->
      <div class="search-bar">
        <div class="search-item">
          <label class="search-label">超级组名称</label>
          <el-input v-model="searchForm.name" placeholder="请输入" class="search-input" @keyup.enter="handleSearch"
            clearable />
          <!-- 按钮组 -->
          <div class="search-buttons">
            <el-button type="primary" @click="handleSearch">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon>
                <Refresh />
              </el-icon>
              重置
            </el-button>
            <el-button type="primary" @click="openAddDialog">
              <el-icon>
                <Plus />
              </el-icon>
              新增
            </el-button>
          </div>
        </div>
      </div>
    </ContentWrap>
    <ContentWrap>
      <!-- 2. 表格展示区域 -->
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据" stripe>
          <el-table-column prop="name" label="超级组名称" align="center" min-width="200" />
          <!-- <el-table-column label="封面" align="center" width="200">
            <template #default>
              <img :src="coverImgUrl" class="cover-img" alt="封面" />
            </template>
</el-table-column> -->
          <el-table-column prop="createTime" label="创建时间" align="center" width="220" :formatter="dateFormatter" />
          <el-table-column prop="updateTime" label="更新时间" align="center" min-width="180" :formatter="dateFormatter" />
          <el-table-column label="操作" align="center" width="200">
            <template #default="scope">
              <el-button type="text" class="edit-btn" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" class="delete-btn" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 3. 分页区域 -->
      <div class="pagination-container">
        <span class="total">共{{ total }}条</span>
        <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
          <el-option label="10条/页" :value="10" />
          <el-option label="20条/页" :value="20" />
          <el-option label="50条/页" :value="50" />
        </el-select>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :total="total"
          layout="prev, pager, next, jumper" @size-change="handlePageSizeChange" @current-change="handlePageChange" />
      </div>
    </ContentWrap>
    <!-- 4. 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px" :close-on-click-modal="false"
      @close="resetForm" class="supersets-dialog">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="add-form">
        <el-form-item label="超级组名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="动作" prop="exerciseIds">
          <el-select v-model="formData.exerciseIds" placeholder="请选择动作" multiple clearable style="width: 100%"
            filterable>
            <el-option v-for="item in exercisesList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- 实现动作的主要，次要训练部位的回显，只能显示给用户看 -->
        <!-- 主要训练部位（自动回显，只读） -->
        <el-form-item label="主要训练部位">
          <el-input :value="primaryMusclesText" disabled placeholder="选择动作后自动显示" style="width: 100%" />
        </el-form-item>

        <!-- 次要训练部位（自动回显，只读） -->
        <el-form-item label="次要训练部位">
          <el-input :value="secondaryMusclesText" disabled placeholder="选择动作后自动显示" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="isEdit ? submitEditForm() : submitAddForm()">
            {{ isEdit ? '修改' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue'
// import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElForm } from 'element-plus'
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
import { SupersetsApi } from '@/api/store/training/Supersets'
import { ExercisesApi } from '@/api/store/training/pose'
// import { MotionCategoryApi } from '@/api/store/training/partCategory'
import { MusclesApi } from '@/api/store/training/muscle'
import { dateFormatter } from '@/utils/formatTime'
import coverImgUrl from '@/assets/imgs/lost.png'
// const router = useRouter()
const searchForm = ref({
  name: ''
})
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableData = ref<any[]>([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const dialogTitle = ref('超级组')
const formRef = ref<InstanceType<typeof ElForm>>()

const exercisesList = ref<any[]>([])
// const categoryList = ref<any[]>([])
const muscleList = ref<any[]>([])

const formData = reactive({
  id: 0,
  name: '',
  primaryMuscles: [] as number[],
  secondaryMuscles: [] as number[],
  exerciseIds: [] as number[],
  category: ''
})

// ===================== 自动汇总显示动作的部位（只读） =====================
// 解析动作里的部位字符串
const parseMuscles = (str: string) => {
  try { return JSON.parse(str) } catch { return [] }
}

// 主要训练部位汇总文本
// 根据ID获取肌肉名称
const getMuscleName = (id) => {
  const muscle = muscleList.value.find(item => item.id == id)
  return muscle ? muscle.name : id
}
// 肌肉回显
const primaryMusclesText = computed(() => {
  if (!formData.exerciseIds.length) return ''
  const idSet = new Set()

  formData.exerciseIds.forEach(exId => {
    const item = exercisesList.value.find(e => e.id === exId)
    if (!item) return
    const arr = parseMuscles(item.primaryMuscles || '[]')
    arr.forEach(id => idSet.add(id))
  })

  return Array.from(idSet).map(id => getMuscleName(id)).join('、')
})

const secondaryMusclesText = computed(() => {
  if (!formData.exerciseIds.length) return ''
  const idSet = new Set()

  formData.exerciseIds.forEach(exId => {
    const item = exercisesList.value.find(e => e.id === exId)
    if (!item) return
    const arr = parseMuscles(item.secondaryMuscles || '[]')
    arr.forEach(id => idSet.add(id))
  })

  return Array.from(idSet).map(id => getMuscleName(id)).join('、')
})

const formRules = reactive({
  name: [
    { required: true, message: '请输入超级组名称', trigger: 'blur' },
    { min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  exerciseIds: [
    { required: true, message: '请选择组内动作', trigger: 'change' }
  ],
  // primaryMuscles: [
  //   { required: true, message: '请选择主要训练部位', trigger: 'change' }
  // ]
})
//加载数据
const loadExercisesList = async () => {
  try {
    const res = await ExercisesApi.getExercisesPage({ pageNo: 1, pageSize: 100, name: '' })
    const data = res.data || res
    exercisesList.value = data.list || []
  } catch (err) {
    console.error('加载动作列表失败：', err)
    ElMessage.error('加载动作列表失败')
  }
}

// const loadCategoryList = async () => {
//   try {
//     const res = await MotionCategoryApi.getMotionCategoryPage({ pageNo: 1 + '', pageSize: 100 + '', name: '' })
//     const data = res.data || res
//     categoryList.value = data.list || []
//   } catch (err) {
//     console.error('加载部位分类失败：', err)
//     ElMessage.error('加载部位分类失败')
//   }
// }

const loadMuscleList = async () => {
  try {
    const res = await MusclesApi.getMusclesPage({ pageNo: 1, pageSize: 100, name: '' })
    const data = res.data || res
    muscleList.value = data.list || []
  } catch (err) {
    console.error('加载肌肉列表失败：', err)
    ElMessage.error('加载肌肉列表失败')
  }
}

const getList = async () => {
  try {
    const res = await SupersetsApi.getSupersetsPage({
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      name: searchForm.value.name
    })
    const responseData = res.data || res
    console.log('超级组分页接口返回数据', res)
    const { total: resTotal = 0, list = [] } = responseData

    tableData.value = list
    total.value = resTotal
  } catch (err) {
    ElMessage.error('获取超级组列表失败')
    console.error(err)
  }
}

const handleSearch = () => {
  pageNo.value = 1
  getList()
}

const handleReset = () => {
  searchForm.value = { name: '' }
  pageNo.value = 1
  getList()
}

const handlePageChange = (val: number) => {
  pageNo.value = val
  getList()
}

const handlePageSizeChange = (val: number) => {
  pageSize.value = val
  pageNo.value = 1
  getList()
}
//处理新增弹窗
const openAddDialog = async () => {
  isEdit.value = false
  dialogTitle.value = '新增超级组'
  resetForm()

  await Promise.all([
    loadExercisesList(),
    // loadCategoryList(),
    loadMuscleList()
  ])

  dialogVisible.value = true
}
//处理编辑弹窗
const handleEdit = async (row: any) => {
  try {
    isEdit.value = true
    dialogTitle.value = '编辑超级组'
    resetForm()
    await Promise.all([
      loadExercisesList(),
      // loadCategoryList(),
      loadMuscleList()
    ])
    const res = await SupersetsApi.getSupersets(row.id)
    //
    const detail = res.data || res
    console.log('detail单个超级组详情接口', detail)
    console.log('res.data单个超级组详情接口', res.data)
    const exerciseIds = (detail.exercises || []).map((item: any) => Number(item.id))
    console.log('提取的动作ID数组', exerciseIds) // 验证是否正确提取
    //回显
    console.log('exerciseIds传递的参数', exerciseIds)
    Object.assign(formData, {
      id: detail.id,
      name: detail.name || '',
      exerciseIds: exerciseIds || [],
    })
    dialogVisible.value = true
  } catch (err) {
    console.error('获取超级组详情失败：', err)
    ElMessage.error('加载编辑数据失败')
  }
}

const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除超级组「${row.name}」吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await SupersetsApi.deleteSupersets(row.id)
    ElMessage.success('删除成功')
    getList()
  } catch (err: any) {
    if (err !== 'cancel') {
      ElMessage.error(`删除失败：${err.message || '服务器错误'}`)
      console.error(err)
    }
  }
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  Object.assign(formData, {
    id: 0,
    name: '',
    // primaryMuscles: [],
    // secondaryMuscles: [],
    exerciseIds: [],
    // category: ''
  })
}

const submitAddForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.clearValidate()
    const valid = await formRef.value.validate()
    if (!valid) return
    await SupersetsApi.createSupersets({
      id: 0,
      name: formData.name,
      exerciseIds: formData.exerciseIds,
    })
    ElMessage.success('新增超级组成功！')
    dialogVisible.value = false
    getList()
  } catch (err: any) {
    console.error('新增超级组失败：', err)
    ElMessage.error(`新增失败：${err.response?.data?.msg || err.message || '服务器错误'}`)
  }
}

const submitEditForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.clearValidate()
    const valid = await formRef.value.validate()
    if (!valid) return
    await SupersetsApi.updateSupersets({
      id: formData.id,
      name: formData.name,
      exerciseIds: formData.exerciseIds,
    })

    ElMessage.success('修改超级组成功！')
    dialogVisible.value = false
    getList()
  } catch (err: any) {
    console.error('修改超级组失败：', err)
    ElMessage.error(`修改失败：${err.response?.data?.msg || err.message || '服务器错误'}`)
  }
}

onMounted(async () => {
  await Promise.all([
    loadExercisesList(),
    loadMuscleList()
  ])
  getList()
})
</script>

<style scoped>
.supersets-page {
  min-height: 100vh;
  padding: 20px;
  overflow-x: hidden;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.plan-search-bar {
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}

/* .search-bar {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  gap: 10px;
  flex-wrap: nowrap;
} */

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
}

.search-label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

.search-input {
  width: 220px;
  flex: 0 0 auto;
}

.search-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin: 0;
}

.fixed-btn {
  display: flex;
  width: 120px;
  padding: 8px 0 !important;
  justify-content: center;
  align-items: center;
}

.cover-img {
  display: block;
  width: 100px;
  height: 60px;
  margin: 0 auto;
  background-color: #f5f5f5;
  border: 1px solid #e4e7ed;
  border-radius: 15px;
  object-fit: cover;
}

.edit-btn {
  margin-right: 15px;
  color: #409eff;
}

.delete-btn {
  color: #f56c6c;
}

.table-container {
  padding: 0;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
}

.total {
  font-size: 14px;
  color: #606266;
}

.page-size-select {
  width: 120px;
}

:deep(.el-table) {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

:deep(.supersets-dialog .el-dialog__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
}

:deep(.supersets-dialog .el-dialog__title) {
  font-size: 16px;
  color: #333;
}

:deep(.supersets-dialog .el-dialog__body) {
  padding: 24px 20px;
}

.add-form {
  max-width: 100%;
}

:deep(.add-form .el-form-item__label) {
  font-weight: 500;
  color: #333;
}

:deep(.add-form .el-input__wrapper),
:deep(.add-form .el-select__wrapper) {
  background-color: #f5f7fa;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
}
</style>