import { ref } from 'vue'
import { useBackground } from './common/useBackground'
import { useRefreshLoad } from './common/useRefreshLoad'
import { useDataFetch } from './common/useDataFetch'
import { getBannerApi, getHotRecommendApi, getNoticeBartApi, configIndex } from '@/api/home'
import { getTopCategoryApi } from '@/api/catogory'
import type { bannerItem, noticeBarItem } from '@/types/home'

export function useHomePage() {
  // ==================== 使用其他 composables ====================
  const { backgroundStyle, topGradientStyle } = useBackground()

  const {
    isRefreshing,
    isLoading,
    hasMore,
    currentPage,
    handleRefresh,
    handleLoadMore,
    resetState,
  } = useRefreshLoad({
    showRefreshSuccess: true,
    showLoadError: true,
  })
  const homeData = ref({})
  // ==================== 页面数据 ====================
  const bannerList = ref<bannerItem[]>([
    {
      id: 1,
      image: '/static/images/home/banner1.png',
      jump: true,
      goods_id: '1',
    },
    {
      id: 2,
      image: '/static/images/home/banner1.png',
      jump: true,
      goods_id: '2',
    },
    {
      id: 3,
      image: '/static/images/home/banner1.png',
      jump: true,
      goods_id: '3',
    },
  ])

  const noticeBarList = ref<string[]>([
    '公告公告公告公告公告1111111',
    '智慧关务系统升级通知',
    '保税物流服务优化公告',
    '海关政策更新提醒',
    '新功能上线通知',
  ])
  const categoryList = ref<any[]>([])
  const hotRecommendList = ref<any[]>([])

  // ==================== 数据获取 ====================
  const { execute: fetchHomeIndex } = useDataFetch(configIndex, {
    immediate: false,
    showLoading: false,
    showError: false,
  })

  const { execute: fetchBanners } = useDataFetch(getBannerApi, {
    immediate: false,
    showLoading: false,
    showError: false,
  })

  const { execute: fetchNotices } = useDataFetch(getNoticeBartApi, {
    immediate: false,
    showLoading: false,
    showError: false,
  })

  const { execute: fetchCategories } = useDataFetch(getTopCategoryApi, {
    immediate: false,
    showLoading: false,
    showError: false,
  })

  const { execute: fetchHotRecommend } = useDataFetch(getHotRecommendApi, {
    immediate: false,
    showLoading: false,
    showError: false,
  })

  //页面初始化
  const initPage = async () => {
    try {
      await Promise.all([fetchHomeIndex().then(res => {
        if (res.code == 1) {
          homeData.value = res.data
        }
      })])
      // 在这里赋值或者获取接口返回的数据
    } catch (error) {
      console.error('页面初始化失败:', error)
    }
  }

  // 刷新处理
  const onRefresh = async () => {
    await handleRefresh(async () => {
      await initPage()
    })
  }

  // 加载更多
  const onLoadMore = async () => {
    await handleLoadMore(async () => {
      // 这里可以加载更多数据
      console.log('加载更多数据')
    })
  }

  // 返回数据和方法
  return {
    // 背景样式
    backgroundStyle,
    topGradientStyle,

    // 页面状态
    isRefreshing,
    isLoading,
    hasMore,
    currentPage,

    // 页面数据
    bannerList,
    noticeBarList,
    categoryList,
    hotRecommendList,

    // 页面方法
    initPage,
    onRefresh,
    onLoadMore,
    resetState,
    homeData
  }
}
