import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { Category, CategoryRootType } from '../type'

export const useCategoryStore = defineStore('category', () => {
  const list = ref<CategoryRootType[]>([])
  const selectedCategory = ref('') // 选中的一级类别
  const selectedSubCategory = ref('') // 选中的二级类别
  const selectedFuncCategory = ref('')
  const categoryVisible = ref(true)
  let resetFuncValue = ''
  let resetCategoryValue = ''

  const getList = async () => {
    const config = useRuntimeConfig()
    // 在SSR中，数据仅在服务器端获取并传递到客户端。
    const { data } = await useAsyncData('category', () => $fetch('/shop/product/category', {
      method: 'GET',
    }), {
      server: true  // 仅在服务器端获取数据
    })

    const rootList = data.value.data.rootCategoryList
    list.value = rootList || []
    resetCategoryValue = selectedCategory.value = rootList[0].categoryDisplayName
    selectedSubCategory.value = rootList[0].list[0].id
    resetFuncValue = selectedFuncCategory.value = rootList[0].productFunctions[0].id
  }

  const updateCategory = (value: string) => {
    selectedCategory.value = value
    updateFuncCategory(value === resetCategoryValue ? resetFuncValue : '')
  }

  const updateSubCategory = (value: string) => {
    selectedSubCategory.value = value
  }

  const updateFuncCategory = (value?: string) => {
    selectedFuncCategory.value = value || ''
  }

  const updateDisplay = (visible: boolean) => {
    categoryVisible.value = visible
  }

  return {
    list,
    selectedCategory,
    selectedSubCategory,
    selectedFuncCategory,
    resetCategoryValue,
    categoryVisible,
    getList,
    updateCategory,
    updateSubCategory,
    updateFuncCategory,
    updateDisplay
  }
})