<script setup lang='ts'>
import { Grade, Subject } from '~/store/info'

// const props = defineProps<{
//   modelValue?: string[]
// }>()
const emits = defineEmits(['confirm'])

const Trees = [
  {
    text: '年级',
    children: Grade.map(item => {
      return {
        text: item.grade_name,
        id: 'g' + item.grade_id
      }
    })
  },
  {
    text: '科目',
    children: Subject.map(item => {
      return {
        text: item.subject_name,
        id: 's' + item.subject_id
      }
    })
  }

]

const showBottom = ref(false)

const activeIndex = ref(0);
const activeId = ref<string[]>([])

function init() {
  activeIndex.value = 0
  // activeId.value = []
}

function doConfirm() {
  emits('confirm', {
    grade: activeId.value.filter(item => item[0] === 'g').map(item => item.slice(1)).join(','),
    subject: activeId.value.filter(item => item[0] === 's').map(item => item.slice(1)).join(','),
  })

  showBottom.value = false
}

</script>

<template>
  <van-button type="primary" size="small" @click="showBottom = true">筛选</van-button>
  <van-popup v-model:show="showBottom" round position="bottom" class="pt-4 px-4" @open="init">
    <div class="flex justify-between mb-4">
      <div @click="showBottom = false">取消</div>
      <div @click="doConfirm" class="text-blue-400">确定</div>
    </div>
    <van-tree-select v-model:main-active-index="activeIndex" v-model:active-id="activeId" height="45vh" :items="Trees" />
  </van-popup>
</template>
