
<template>
  <view class="app-container pb-24">
    <TopBar title="项目库" show-back>
      <template #right>
        <view class="px-2 py-1 flex items-center" @click="goToAdd">
          <text class="uni-icons uniui-plusempty text-primary text-xl"></text>
          <text class="text-primary text-sm ml-1">新增</text>
        </view>
      </template>
    </TopBar>
    
    <!-- 顶部搜索栏 -->
    <view class="bg-white px-4 py-3 sticky top-0 z-40">
      <view class="flex items-center bg-gray-100 rounded-2xl px-4 py-2">
        <text class="uni-icons uniui-search text-gray-400 mr-2 text-base"></text>
        <input 
          class="flex-1 bg-transparent text-sm text-gray-700" 
          placeholder="搜索项目名称" 
          v-model="searchKeyword"
        />
      </view>
    </view>

    <!-- 顶部筛选标签 - 使用 uni-segmented-control -->
    <uni-segmented-control 
      :current="currentFilterIndex" 
      :values="filterLabels"
      style-type="text"
      active-color="#4f8ef7"
      @clickItem="onFilterChange"
    />

    <!-- 项目列表 - 使用 uni-list + uni-card + uni-swipe-action -->
    <view class="mt-2">
      <view v-if="projectStore.loading" class="py-16 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="filteredProjects.length === 0">
        <EmptyState message="暂无项目" />
      </view>
      
      <uni-list v-else border>
        <uni-swipe-action
          v-for="project in filteredProjects"
          :key="project.id"
          :actions="swipeActions"
          @click="onSwipeAction(project.id, $event)"
        >
          <uni-list-item 
            :title="project.name"
            :note="project.address + ' | ' + project.customerName"
            :right-text="project.type"
            show-arrow
            @click="goToDetail(project.id)"
          >
            <template #header>
              <view class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center mr-3">
                <text class="uni-icons uniui-folder-add-filled text-blue-500 text-lg"></text>
              </view>
            </template>
          </uni-list-item>
        </uni-swipe-action>
      </uni-list>
    </view>

    <!-- 加载更多 -->
    <view v-if="filteredProjects.length > 0" class="px-4 mt-4 mb-4">
      <view v-if="projectStore.hasMore" class="text-center py-4">
        <text 
          class="text-sm text-blue-500 font-medium"
          @click="loadMore"
        >
          {{ projectStore.loadingMore ? '加载中...' : '加载更多' }}
        </text>
      </view>
      <view v-else class="text-center py-4">
        <text class="text-xs text-gray-400">已经到底了</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { useProjectStore } from '../../stores/project'
import EmptyState from '../../components/common/EmptyState.vue'
import TopBar from '../../components/common/TopBar.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import UniSwipeAction from '../../components/uni-swipe-action/uni-swipe-action.vue'
import UniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'

const projectStore = useProjectStore()
const searchKeyword = ref('')
const currentFilterIndex = ref(0)

const filterTypes = [
  { value: 'all', label: '全部' },
  { value: '包年', label: '包年' },
  { value: '单次', label: '单次' },
  { value: '季度', label: '季度' },
  { value: '月付', label: '月付' },
]

const filterLabels = filterTypes.map(t => t.label)

const filteredProjects = computed(() => {
  let list = projectStore.projects
  const filterValue = filterTypes[currentFilterIndex.value].value
  
  if (filterValue !== 'all') {
    list = list.filter(p => p.type === filterValue)
  }
  
  if (searchKeyword.value) {
    list = list.filter(p => p.name.includes(searchKeyword.value))
  }
  
  return list
})

const swipeActions: { text: string; color: string; key: string }[] = [
  { text: '编辑', color: '#4f8ef7', key: 'edit' },
  { text: '删除', color: '#ff3b30', key: 'delete' },
]

function onFilterChange(index: number) {
  currentFilterIndex.value = index
}

function onSwipeAction(projectId: string, action: { key?: string; text?: string }) {
  if (action.key === 'delete') {
    uni.showModal({
      title: '确认删除',
      content: '删除后无法恢复，是否继续？',
      success: (res) => {
        if (res.confirm) {
          projectStore.deleteProject(projectId)
          uni.showToast({ title: '已删除', icon: 'success' })
        }
      }
    })
  } else if (action.key === 'edit') {
    projectStore.setCurrentProject(projectId)
    uni.navigateTo({ url: '/subPackages/pages-common/addProject?mode=edit' })
  }
}

function goToDetail(projectId: string) {
  projectStore.setCurrentProject(projectId)
  uni.navigateTo({ url: '/subPackages/pages-common/projectDetail' })
}

function goToAdd() {
  uni.navigateTo({ url: '/subPackages/pages-common/addProject' })
}

async function refreshData() {
  await projectStore.fetchProjects(true)
  uni.stopPullDownRefresh()
}

function loadMore() {
  if (projectStore.loadingMore) return
  projectStore.loadMore()
}

onMounted(() => {
  projectStore.fetchProjects(true)
})

// 下拉刷新
onPullDownRefresh(() => {
  refreshData()
})
</script>
