<!-- 模板大类详情页：进入横栏模板后，点击列表模板进入的详情页 -->
<template>
  <view class="plan-detail-page">
    <u-navbar :title="templateList.name || ''" :autoBack="true" bgColor="rgba(26, 26, 26, 0.9)" titleColor="#fff"
      leftIconColor="#fff" :placeholder="true" :safeAreaInsetTop="true" fixed />


    <scroll-view class="content" scroll-y enable-backdrop-filter="{{false}}">
      <!-- 筛选栏 -->
      <view class="filter-bar">
        <!-- 部位筛选 -->
        <view class="filter-wrapper">
          <view class="filter-item" @click="togglePartDropdown">
            <text>{{ activePart }}</text>
            <uni-icons :type="showPartDropdown ? 'up' : 'down'" size="22" color="#333" />
          </view>
          <view class="dropdown-menu" v-if="showPartDropdown">
            <view class="dropdown-item" :class="{ selected: activePartId === item.id }" v-for="item in partList"
              :key="item.id" @click="selectPart(item)">
              {{ item.title }}
            </view>
          </view>
        </view>

        <!-- 场景筛选 -->
        <view class="filter-wrapper">
          <view class="filter-item" @click="toggleSceneDropdown">
            <text>{{ activeScene }}</text>
            <uni-icons :type="showSceneDropdown ? 'up' : 'down'" size="22" color="#333" />
          </view>
          <view class="dropdown-menu" v-if="showSceneDropdown">
            <view class="dropdown-item" :class="{ selected: activeSceneId === item.id }" v-for="item in sceneList"
              :key="item.id" @click="selectScene(item)">
              {{ item.title }}
            </view>
          </view>
        </view>
      </view>

      <!-- 两列网格卡片 -->
      <view class="grid-container">
        <view class="plan-card" v-for="(items, index) in filteredTemplates" :key="index" @click="godetail(items)">
          <image :src="items.urlCover || lostImage" mode="aspectFill" class="card-cover" @error="handleImageError" />
          <view class="card-info">
            <view class="card-title">
              <text class="name">{{ items.name }}</text>
              <view v-if="isIcon" @click.stop="showTemplateMenu(items)">
                <uni-icons type="more-filled" size="22" color="#fff" />
              </view>
            </view>
            <view class="card-stats">
              <view class="stat-item">
                <text class="stat-number">{{ items.exerciseCount }}</text>
                <text class="stat-label">动作</text>
              </view>
              <view class="stat-item">
                <text class="stat-number">{{ items.totalSets }}</text>
                <text class="stat-label">组</text>
              </view>
              <view class="stat-item">
                <text class="stat-number">{{ items.totalWeight }}</text>
                <text class="stat-label">kg</text>
              </view>
            </view>
            <text class="tags-text" :maxLines="1">
              {{ items.primaryMuscleNames?.join(' ') || '' }}
            </text>
          </view>
        </view>

      </view>
    </scroll-view>

    <TemplateMenuPopup ref="templateMenuRef" @refresh="handleRefreshTemplate" :folder-list="folderList" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import TemplatesApi from '@/sheep/api/Template/Templates'
import TemplateMenuPopup from '@/pages4/components/TemplateMenuPopup.vue'

// ==================== 常量 ====================
const lostImage =
  'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260724/健身模板_1784871730506.png'

const SCENE_LIST = [
  { id: '0', title: '不限' },
  { id: '1', title: '健身房' },
  { id: '2', title: '仅哑铃' },
  { id: '3', title: '仅哑铃+杠铃' },
]

// ==================== 页面数据 ====================
const id = ref()
const templateList = ref({})
const isBigTemOffice = ref(false)
const folderList = ref([])
const templateMenuRef = ref(null)
const selectedDate = ref('') // 从 xunji-rili-tianjia-moban 透传的日期

// ==================== 筛选 ====================
const filteredTemplates = ref([])

// 部位
const rawPartData = ref([])
const partList = ref([])
const activePartId = ref('0')
const activePart = ref('部位')
const showPartDropdown = ref(false)

// 场景
const sceneList = ref(SCENE_LIST)
const activeSceneId = ref('0')
const activeScene = ref('场景')
const showSceneDropdown = ref(false)

// 非官方模板大类时显示省略号菜单
const isIcon = ref(false)

// ==================== API 请求 ====================
const getPartCategories = async () => {
  try {
    const res = await TemplatesApi.getPartAllCategories()
    if (res.code === 0) {
      rawPartData.value = res.data
      partList.value = [
        { title: '不限', id: '0' },
        ...res.data.map((item) => ({ title: item.name, id: String(item.id) })),
      ]
    }
  } catch (error) {
    console.log('部位获取失败', error)
  }
}

const loadTemplates = async (id) => {
  try {
    // 官方模板大类
    if (isBigTemOffice.value) {
      const response = await TemplatesApi.selecttemplates(id)
      templateList.value = response.data
      filteredTemplates.value = response.data?.templates || []
    } else {
      // 个人模板大类（接口待接入，暂用空数据）
      // const response = await TemplatesApi.getCustTemplateGroupDetail(id)
      templateList.value = { templates: [] }
      filteredTemplates.value = []
    }
    console.log('模板大类列表：', templateList.value)
  } catch (e) {
    console.error('加载模板失败', e)
    templateList.value = {}
    filteredTemplates.value = []
  }
}

// ==================== 筛选方法 ====================
const doFilter = () => {
  const list = templateList.value.templates || []
  const partId = activePartId.value
  const sceneId = activeSceneId.value

  console.log('👉 当前选中场景id：', sceneId)

  if (partId === '0' && sceneId === '0') {
    filteredTemplates.value = list
    return
  }

  filteredTemplates.value = list.filter((item) => {
    const partMatch =
      partId === '0' ||
      (() => {
        const targetPart = partList.value.find((p) => p.id === partId)
        return item.primaryMuscleNames?.includes(targetPart?.title)
      })()

    const sceneMatch = sceneId == 0 || item.scene == sceneId
    return partMatch && sceneMatch
  })
}

const selectPart = (item) => {
  activePart.value = item.title
  activePartId.value = item.id
  showPartDropdown.value = false
  doFilter()
}

const selectScene = (item) => {
  activeScene.value = item.title
  activeSceneId.value = item.id
  showSceneDropdown.value = false
  doFilter()
}

const togglePartDropdown = () => {
  showPartDropdown.value = !showPartDropdown.value
  showSceneDropdown.value = false
}

const toggleSceneDropdown = () => {
  showSceneDropdown.value = !showSceneDropdown.value
  showPartDropdown.value = false
}

// ==================== 导航与事件 ====================
const handleImageError = (e) => {
  console.error('封面图加载失败，请检查路径:', e)
}

const showTemplateMenu = (item) => {
  templateMenuRef.value?.showTemplateMenu(item)
  console.log('显示当前选中省略号模板详情：', item)
}

const godetail = (items) => {
  let url = `/pages4/pages/xunji/xunji-moban-xiangqing?id=${items.id}&isOffice=true`;
  // 只有从添加日程流（带日期参数）进入时，才标记为模板添加模式
  if (selectedDate.value) {
    url += `&date=${selectedDate.value}&from=addFromTemplate`;
  }
  uni.navigateTo({ url });
}

const handleRefreshTemplate = () => {
  loadTemplates(id.value)
}

// ==================== 生命周期 ====================
onLoad((options) => {
  id.value = options.id
  isBigTemOffice.value = options.isBigTemOffice === 'true'
  if (options.date) {
    selectedDate.value = options.date
  }

  console.log('接收的文件夹列表：', options.foldList)
  if (options.foldList) {
    folderList.value = JSON.parse(decodeURIComponent(options.foldList))
    isIcon.value = true
  }

  console.log('模板大类ID：', id.value)
  console.log('是否官方大类：', isBigTemOffice.value)

  loadTemplates(id.value)
})

getPartCategories()
</script>

<style lang="scss" scoped>
// ==================== CSS 变量 ====================
$color-bg: #f5f5f5;
$color-dark: #1a1a1a;
$color-white: #fff;
$glass-bg: rgba(26, 26, 26, 0.9);
$radius-card: 16rpx;
$radius-pill: 30rpx;
$shadow-card: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
$shadow-dropdown: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);

// ==================== 页面布局 ====================
.plan-detail-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: $color-bg;
  box-sizing: border-box;
}

// ==================== 顶部导航 ====================
.header-description {
  padding: 20rpx 30rpx 20rpx;
  color: $color-white;
  font-size: 28rpx;
  line-height: 46rpx;
  background-color: $glass-bg;
}

// ==================== 内容区域 ====================
.content {
  min-height: calc(100vh - 80px);
}

// ==================== 筛选栏 ====================
.filter-bar {
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  background-color: $color-white;
}

.filter-wrapper {
  position: relative;
}

.filter-item {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15rpx;
  line-height: 60rpx;
  border-radius: $radius-pill;
  background-color: $color-white;
  border: 1px solid #ddd;
  color: #333;
  font-size: 28rpx;
  font-weight: 400;
  gap: 8rpx;

  &:active {
    background-color: $color-bg;
  }
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8rpx);
  left: 0;
  background: $color-white;
  border-radius: 14rpx;
  box-shadow: $shadow-dropdown;
  padding: 12rpx 0;
  min-width: 160rpx;
  max-height: 320rpx;
  overflow-y: auto;
  z-index: 9999;
}

.dropdown-item {
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  line-height: 1.4;
  color: $color-dark;
  background-color: $color-white;
  white-space: nowrap;

  &.selected {
    background: #f0f9f4;
    color: #2e9d5a;
    font-weight: 500;
  }

  &:active {
    opacity: 0.8;
  }
}

// ==================== 网格卡片 ====================
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20rpx;
  row-gap: 20rpx;
  padding: 0 20rpx 40rpx;
}

.plan-card {
  margin-top: 0;
  width: 100%;
  background-color: $color-white;
  border-radius: $radius-card;
  overflow: hidden;
  box-shadow: $shadow-card;
  position: relative;
}

.card-cover {
  width: 100%;
  height: 300rpx;
}

.card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 20rpx 20rpx 24rpx;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0) 100%);
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 35rpx;
  font-weight: 700;
  color: #ffffff;
  margin-top: 0;
  line-height: 1.3;
  display: flex;
  justify-content: space-between;

  .name {
    max-width: 70%;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.card-stats {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  align-items: flex-start;
}

.stat-item {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.stat-number {
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.stat-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
}

.tags-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>