import { url } from 'inspector'
import { defineComponent, PropType, computed, onMounted } from 'vue'
import { RouterLink } from 'vue-router'
import { useTabsViewStore } from '@/store/modules/tabsView'
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'

export default defineComponent({
  name: 'TheLink',
  props: {
    to: {
      type: Object,
      default: {}
    },
    target: {
      type: String as PropType<'_self' | '_blank'>,
      default: '_self'
    },
    /** 是否有对应地址的权限 */
    authLink: {
      type: String,
      default: ''
    }
  },
  setup(props, { slots }) {
    const asyncRouteStore = useAsyncRouteStore()
    const tabsViewStore = useTabsViewStore()
    tabsViewStore.closeCurrentTab({ path: props.to.path })

    const disabled = computed(() => {
      const flag = asyncRouteStore.getAuths.some((v: string) => v === props.authLink)
      if (props.authLink && !flag) {
        return true
      } else {
        return false
      }
    })

    return () =>
      disabled.value ? (
        slots.default && slots.default()
      ) : (
        <RouterLink to={props.to} target={props.target}>
          {slots.default && slots.default()}
        </RouterLink>
      )
  }
})
