import { namespace } from 'vuex-class'
import { Vue, Component } from 'vue-property-decorator'
import { Location } from 'vue-router'

const reuseTabModule = namespace('reuseTab')
Component.registerHooks(['beforeRouteEnter', 'beforeRouteUpdate'])
@Component({
  name: 'ReuseTabsMixins',
})
export default class ReuseTabsMixin extends Vue {
  constructor() {
    super()
  }
  /**
   * 添加路由至复用tab
   * @param params 数据
   */
  @reuseTabModule.Action('add')
  public addTabToReuseTabs(params: any) {
    // empty function
  }

  /**
   * 删除某一个复用tab
   * @param params 数据
   */
  @reuseTabModule.Action('remove')
  public removeCurrentRouteTab(params: any) {
    // empty function
  }

  /**
   * 修改当前标签title
   */
  @reuseTabModule.Action('changeTitle')
  public changeCurrentTitle(params: any) {
    // empty function
  }

  /**
   * 关闭当前页签
   * @param next 路由下一步的配置项，同this.$router.push 一致
   * @param refresh 是否强制刷新
   */
  public closeCurrentRouerTab(next?: Location, refresh?: boolean): void {
    const name = this.$route.name

    if (next && refresh) {
      const refreshKeepAlive: string = new Date().valueOf().toString()
      if (next.query && !next.query.refreshKeepAlive) {
        next.query.refreshKeepAlive = refreshKeepAlive
      } else if (!next.query) {
        next.query = { refreshKeepAlive }
      }
    }

    this.removeCurrentRouteTab({ name, activeName: name, next })
  }

  /**
   * 修改当前标签页标题
   * @param title 标签页标题
   * @param append 是否附加
   */
  public changeCurrentTabTitle(title: string, append = false): void {
    // eslint-disable-next-line @typescript-eslint/no-extra-semi
    ;(this.$route.meta as any).title = title
    this.changeCurrentTitle({ title, append, route: this.$route })
  }
}