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


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


function useLink() {


  const linkList1 = reactive<ILink[]>([
    { path: '/article/article_details', id: '123', text: 'VAVA BUY 是如何工作的' },
    { path: '/article/article_details', id: '456', text: '为什么选择 VAVA BUY' },
    { path: '/article/article_details', id: '3', text: '您所在国家/地区的运费和价格' },
    { path: '/article/article_details', id: '4', text: '报名' },
    { path: '/article/article_details', id: '5', text: '汇率' },
    { path: '/article/article_details', id: '6', text: '不能寄送的物品' },
    { path: '/faq', id: '', text: '常见问题' },
    { path: '/article/article_details', id: '8', text: '日志' },
    { path: '/article/article_details', id: '9', text: '您的隐私权利' },
  ])

  const linkList2 = reactive<ILink[]>([
    { path: '/article/article_details', id: '10', text: '关于 VAVA BUY' },
    { path: '/article/article_details', id: '11', text: 'VAVA BUY 评论' },
    { path: '/article/article_details', id: '12', text: '新闻与动态' },
    { path: '/article/article_details', id: '13', text: 'VAVA BUY.com 的招聘信息' },
    { path: '/article/article_details', id: 'abcdefg', text: '与 VAVA BUY 合作' },
    { path: '/article/article_details', id: '15', text: '联系我们' },
    { path: '/article/article_details', id: '16', text: '网站地图' },
    { path: '/article/article_details', id: '17', text: '奖学金' },
    { path: '/article/article_details', id: '18', text: '顶级商店' },
  ])

  const linkList3 = reactive<ILink[]>([
    { path: '/article/article_details', id: '19', text: 'Facebook' },
    { path: '/article/article_details', id: '20', text: '社交平台' },
    { path: '/article/article_details', id: '21', text: 'X（原 Twitter）' },
    { url: 'https://www.baidu.com', text: '获取 VAVA BUY 应用程序' },
  ])


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


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


  // 跳转回调
  const handleTextLinkClick = function (linkInfo: ILink, 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 {
    linkList1,
    linkList2,
    linkList3,
    route,
    router,
    currentPath,
    currentId,
    handleTextLinkClick
  }
}




export default useLink