<script setup lang="ts">
/**
 * 选择班组成员
 *
 * 展示班组成员列表，支持搜索和多选，
 * 用于分配防汛任务时的成员勾选。
 */
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showSuccessToast } from 'vant'

const router = useRouter()
const route = useRoute()

const searchText = ref('')
const checkedIds = ref<number[]>([])

/** 模拟成员数据 */
const mockMembers = [
  { id: 1, name: '张建国', phone: '13800001001', team: 'A组', role: '组长' },
  { id: 2, name: '李明辉', phone: '13800001002', team: 'A组', role: '组员' },
  { id: 3, name: '陈志远', phone: '13800001003', team: 'A组', role: '组员' },
  { id: 4, name: '王强', phone: '13800001004', team: 'B组', role: '组长' },
  { id: 5, name: '赵勇', phone: '13800001005', team: 'B组', role: '组员' },
  { id: 6, name: '周文博', phone: '13800001006', team: 'B组', role: '组员' },
]

const filteredList = computed(() => {
  if (!searchText.value) return mockMembers
  const kw = searchText.value.toLowerCase()
  return mockMembers.filter(m =>
    m.name.toLowerCase().includes(kw) ||
    m.phone.includes(kw)
  )
})

function toggleAll() {
  if (checkedIds.value.length === filteredList.value.length) {
    checkedIds.value = []
  } else {
    checkedIds.value = filteredList.value.map(m => m.id)
  }
}

function onConfirm() {
  showSuccessToast(`已选择 ${checkedIds.value.length} 人`)
  router.back()
}
</script>

<template>
  <div class="page-container">
    <van-nav-bar title="选择班组成员" left-arrow fixed placeholder @click-left="router.back()">
      <template #right>
        <span class="nav-action" @click="toggleAll">
          {{ checkedIds.length === filteredList.length && filteredList.length > 0 ? '取消全选' : '全选' }}
        </span>
      </template>
    </van-nav-bar>

    <van-search v-model="searchText" placeholder="搜索姓名、手机号" shape="round" />

    <van-checkbox-group v-model="checkedIds">
      <van-cell-group inset>
        <van-cell
          v-for="item in filteredList"
          :key="item.id"
          :title="item.name"
          :label="`${item.team} · ${item.role}`"
          clickable
          @click="() => {
            const idx = checkedIds.indexOf(item.id)
            if (idx >= 0) checkedIds.splice(idx, 1)
            else checkedIds.push(item.id)
          }"
        >
          <template #value>
            <van-tag :type="item.role === '组长' ? 'primary' : undefined" size="medium">
              {{ item.role }}
            </van-tag>
          </template>
          <template #right-icon>
            <van-checkbox :name="item.id" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>

    <van-empty v-if="filteredList.length === 0" description="暂未找到成员" />

    <div class="footer-bar">
      <van-button type="primary" block round @click="onConfirm">
        确认选择 ({{ checkedIds.length }})
      </van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 80px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.nav-action {
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--color-bg-card);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}
</style>
