
import { reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'



export interface ITextLink {
  text: string;
  path?: string;
  id?: string | number;
  url?: string;
}


function useLinkList() {
  const textLinkList = reactive<Array<ITextLink>>([
    { text: '常见问题', path: '/faq' },
    {
      text: '与 VAVA BUY 合作',
      path: '/article/article_details',
      id: 'abcdefg',
    },
  ])

  const textLinkList2 = reactive<Array<ITextLink>>([
    {
      text: '如何运作',
      path: '/article/article_details',
      id: '123',
    },
    {
      text: '为什么选择 VAVA BUY',
      path: '/article/article_details',
      id: '456',
    },
    {
      text: '优势',
      path: '/article/article_details',
      id: '789',
    },
    {
      text: '在 VAVA BUY 购物',
      url: 'https://vavabuy.net'
    },
  ])

  const route = useRoute()
  const router = useRouter()
  const currentPath = ref<string>('')
  const currentId = ref<string | number | null>(null)


  // 获取最新路由信息（路径&id）
  watch(
    () => route.fullPath,
    (newVal, oldVal) => {
      currentPath.value = route.path
      currentId.value = !!route.query.id ? (route.query.id as (string | number)) : null
    },
    { immediate: true }
  )


  // 跳转回调
  const handleTextLinkClick = function (linkInfo: ITextLink, id?: string | number) {

    if (!linkInfo || (!linkInfo.path && !linkInfo.url)) return

    if (linkInfo.url) {
      window.open(linkInfo.url, '_blank')
    }
    else if (linkInfo.id) {
      router.push({
        path: linkInfo.path,
        query: {
          id: linkInfo.id ? linkInfo.id : ''
        }
      })
    }
    else {
      router.push({ path: linkInfo.path })
    }
  }



  return {
    textLinkList,
    textLinkList2,
    route,
    router,
    currentPath,
    currentId,
    handleTextLinkClick
  }
}


export default useLinkList