<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '疾病' },
}
</route>

<template>
  <view class="text-center">
    <wd-search
      placeholder="请输入疾病名称"
      cancel-txt="搜索"
      v-model="serchObj.searchNum"
      light
      @cancel="doSearch"
      @focus="showKeyBoard"
    />

    <view>
      <wd-collapse v-model="value">
        <wd-collapse-item
          v-for="(category, index) in diseaseCategories"
          :key="index"
          :title="category.name"
          name="item1"
        >
          <view class="child-category">
            <wd-checkbox-group @change="handleSelect" v-model="ids" cell>
              <wd-checkbox
                v-for="(subCategory, subIndex) in category.subCategories"
                :key="subIndex"
                :modelValue="subCategory.id"
                style="text-align: left"
              >
                {{ subCategory.name }}
              </wd-checkbox>
            </wd-checkbox-group>
          </view>
        </wd-collapse-item>
      </wd-collapse>
    </view>
    <view class="footer mt-5 pb-20 center">
      <wd-button type="primary" size="large" class="px-8" @click="submitSelection">确 定</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useDiseaseStore } from '@/store'

defineOptions({
  name: 'Terat',
})

// pina 管里
const diseaseStore = useDiseaseStore()
const selectSubIds = ref<number[]>([])
onMounted(() => {
  selectSubIds.value = diseaseStore.getSelectedSubCategoryIds()
})
//
const value = ref<number[]>([])
const ids = ref<number[]>([])
// 模拟的疾病分类数据
const diseaseCategories = ref([
  {
    id: 1,
    name: '感染性疾病', // 一级分类名称
    subCategories: [
      { id: 101, name: '病毒性疾病' },
      { id: 102, name: '细菌性疾病' },
    ],
  },
  {
    id: 2,
    name: '非感染性疾病',
    subCategories: [
      { id: 201, name: '遗传性疾病' },
      { id: 202, name: '代谢性疾病' },
    ],
  },
])



const handleSelect = (ids) => {
  selectSubIds.value = ids.value
  diseaseStore.setSelectedSubCategoryIds(selectSubIds.value)
  console.log(diseaseStore.selectedSubCategoryIds, ids, '9999')
}

const submitSelection = () => {
  // 在这里处理选中的子类IDs，例如提交到服务器或存储到本地
  console.log('Selected SubCategory IDs:', selectSubIds.value)
  uni.navigateTo({ url: '/pages/illness/illness' })
}

// 二位数组拍平转一数组
function handleChoose{}

let serchObj = reactive({
  searchNum: '',
  historyList: [],
})
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

//用户搜索时将搜索文字存储
function doSearch(searchStr) {
  const val = searchStr.value.trim()
  if (val) {
    const history = serchObj.historyList.filter((item) => item !== val)
    history.unshift(val)
    if (history.length > 6) {
      history.pop()
    }
    serchObj.historyList = history
    uni.setStorageSync('history', JSON.stringify(serchObj.historyList))
    uni.navigateTo({ url: `/pages/searchDetail/searchDetail?serch=${searchStr.value}` })
  }
}
</script>

<style lang="scss" scoped>
//
.parent-category {
  margin: 10px 0;
  font-weight: bold;
  color: gray; /* 一级分类不可点击，设置不同样式 */
}

.child-category {
  margin-left: 20px;
}
</style>
