<template>
  <view class="project-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.name }}
        </view>
      </scroll-view>

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

    <!-- 确认按钮 -->
    <button class="confirm-btn" @click="confirmSelect">确认</button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
// import { uniShowToast, uniNavigateBack } from '@dcloudio/uni-app'

// 分类列表（匹配截图：家具/电路/水暖/门频/电器）
const categoryList = ref([
  { id: 1, name: '家具' },
  { id: 2, name: '电路' },
  { id: 3, name: '水暖' },
  { id: 4, name: '门频' },
  { id: 5, name: '电器' }
])

// 项目列表（匹配截图：床/沙发/柜子/椅子等）
const projectList = ref([
  { id: 101, categoryId: 1, name: '床' },
  { id: 102, categoryId: 1, name: '沙发' },
  { id: 103, categoryId: 1, name: '柜子' },
  { id: 104, categoryId: 1, name: '椅子' },
  { id: 201, categoryId: 2, name: '插座' },
  { id: 202, categoryId: 2, name: '开关' },
  { id: 301, categoryId: 3, name: '水龙头' },
  { id: 302, categoryId: 3, name: '水管' }
])

// 选中状态
const activeCategory = ref(1) // 默认选中家具
const selectedProject = ref({}) // 选中的项目
const searchKey = ref('')

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

// 选择分类
const selectCategory = (item) => {
  activeCategory.value = item.id
  selectedProject.value = {} // 切换分类清空选中项目
}

// 选择项目
const selectProject = (item) => {
  selectedProject.value = item
}

// 确认选择
const confirmSelect = () => {
  if (!selectedProject.value.id) {
    uni.showToast({ title: '请选择维修项目', icon: 'none' })
    return
  }
  
  // 获取分类名称
  const categoryName = categoryList.value.find(c => c.id === activeCategory.value).name
  // 传递给表单页
  uni.$emit('selectProject', {
    name: `${categoryName}-${selectedProject.value.name}`
  })
  
  uni.navigateBack({ delta: 1 })
}
</script>

<style scoped>
.project-container {
  padding: 15px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: #f5f5f5;
  border-radius: 6px;
  margin-bottom: 10px;
}
.search-bar input {
  flex: 1;
  font-size: 14px;
}
.category-wrap {
  display: flex;
  flex: 1;
  margin-bottom: 20px;
}
.category-left {
  width: 80px;
  height: 100%;
  background: #f8f8f8;
  border-radius: 6px 0 0 6px;
}
.category-item {
  padding: 12px 10px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.category-item.active {
  background: #fff;
  color: #007aff;
  font-weight: bold;
}
.category-right {
  flex: 1;
  height: 100%;
  background: #fff;
  border-radius: 0 6px 6px 0;
  padding: 10px;
}
.project-item {
  padding: 12px 10px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.project-item.active {
  color: #007aff;
  font-weight: bold;
}
.confirm-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #007aff;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
}
</style>