<template>
  <view class="select-container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input type="text" placeholder="请输入关键字搜索" v-model="searchKey" />
      <uni-icons type="search" size="18"></uni-icons>
    </view>

    <!-- 分类选择 -->
    <view class="category-wrap">
      <!-- 左侧分类 -->
      <scroll-view scroll-y class="category-left">
        <view 
          class="category-item" 
          :class="{ active: activeCategory === item.id }"
          @click="selectCategory(item)"
          v-for="item in categoryList" 
          :key="item.id"
        >
          {{ item.projectName }}
        </view>
      </scroll-view>

      <!-- 右侧项目 -->
      <scroll-view scroll-y class="category-right">
        <view 
          class="project-item"
          @click="selectProject(item)"
          v-for="item in currentProjectList" 
          :key="item.id"
        >
          {{ item.projectName }}
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getRepairProjectList } from '../api/api.js'

// 分类列表
const categoryList = ref([])

// 所有项目数据
const projectList = ref([])

// 选中的分类
const activeCategory = ref(1)

// 从接口获取维修项目列表
const fetchProjectList = async () => {
  try {
    const res = await getRepairProjectList({ projectType: '0' })
    if (res.code === 200) {
      const data = res.data || []
      // 兼容后端嵌套格式 [{id, name, children: [{id, name}]}]
      categoryList.value = data.map(item => ({ id: item.id, projectName: item.projectName }))
      projectList.value = data.flatMap(item =>
        (item.children || []).map(child => ({
          id: child.id,
          categoryId: item.id,
          projectName: child.projectName
        }))
      )
      activeCategory.value = categoryList.value[0]?.id || 1
    }
  } catch (e) {
    uni.showToast({ title: '获取项目列表失败', icon: 'none' })
  }
}

onLoad(() => {
  fetchProjectList()
})
// 搜索关键词
const searchKey = ref('')

// 筛选当前分类的项目（含搜索）
const currentProjectList = computed(() => {
  let list = projectList.value.filter(item => item.categoryId === activeCategory.value)
  if (searchKey.value) {
    list = list.filter(item => item.projectName.includes(searchKey.value))
  }
  return list
})

// 选择分类
const selectCategory = (item) => {
  activeCategory.value = item.id
}

// 选择项目并跳转到维修项目填写页
const selectProject = (item) => {
  // 获取分类名称
  const categoryName = categoryList.value.find(c => c.id === item.categoryId)?.projectName
  // 跳转并传参
  uni.navigateTo({
    url: `/pageSubPack/online-repair/publicRepair?category=${categoryName}&project=${item.projectName}&projectId=${item.id}`
  })
}
</script>

<style scoped>
.select-container {
  padding: 10px;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f9f9f9;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  background: #f5f5f5;
  border-radius: 6px;
  margin-bottom: 10px;
}
.search-bar input {
  flex: 1;
  font-size: 14px;
}
.category-wrap {
  display: flex;
  height: calc(100% - 50px);
}
.category-left {
  width: 120px;
  height: 100%;
  background: #fff;
  border-radius: 6px 0 0 6px;
  margin-right: 20rpx;
  color: #666;
}
.category-item {
  padding: 15px 10px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.category-item.active {
  background: #f9f9f9;
  color: #222;
  font-weight: bold;
}
.category-right {
  flex: 1;
  height: 100%;
  background: #fff;
  border-radius: 0 6px 6px 0;
  padding: 10px;
  text-align: center;
}
.project-item {
  padding: 12px 10px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.project-item:active {
  background: #f5f5f5;
}
</style>