import { defineStore } from 'pinia'
import * as _ from 'lodash'
import Vue from 'vue'

export interface IReusetabState {
  source: any[]
  to?: any
}

export const useReuseTabStore = defineStore('useReuseTabStore', {
  state: (): IReusetabState => {
    return {
      source: [],
      to: {},
    }
  },
  actions: {
    changeSource(param) {
      this.source = param.source
    },
    changeTo(param) {
      if (window.__POWERED_BY_QIANKUN__) {
        Vue.prototype.$parentReuseTabStore.changeTo(param)
      }
      this.to = param
    },
    add(param) {
      if (window.__POWERED_BY_QIANKUN__) {
        Vue.prototype.$parentReuseTabStore.add(param)
      }
      const oldTables = this.source
      const targetName = param.name
      const activeName = param.activeName
      const isPassport = _.startsWith(targetName, '/passport')
      if (isPassport === true) {
        return
      }
      if (activeName === targetName) {
        return
      }
      const index = oldTables.findIndex((v) => v.name === param.name)
      // 重载一次路由，防止路由参数丢失
      if (index >= 0) {
        oldTables[index] = param
      } else if (param.name === '/home') {
        oldTables.unshift(param)
      } else {
        oldTables.push(param)
      }
      if (oldTables.length > 6) {
        oldTables.shift()
      }
      this.changeSource({ source: oldTables })
    },
    remove(param) {
      if (window.__POWERED_BY_QIANKUN__) {
        Vue.prototype.$parentReuseTabStore.remove(param)
      }
      const source = this.source
      const { activeName, name, next } = param
      const targetName = name
      // 关闭当前页
      if (activeName === targetName) {
        // 下一步路由
        if (typeof next !== 'undefined') {
          this.changeTo(next)
        } else {
          let index: number = source.findIndex((tab) => tab.name === targetName)
          index = index > 0 ? index - 1 : index + 1
          this.changeTo(source[index])
        }
      }
      const newTabs = _.filter(source, (tab) => tab.name !== targetName)
      this.changeSource({ source: newTabs })
    },
    changeTitle(param) {
      if (window.__POWERED_BY_QIANKUN__) {
        Vue.prototype.$parentReuseTabStore.changeTitle(param)
      }
      const { title, route } = param
      const list = this.source
      list.forEach((item) => {
        if (item.name === route.name) {
          item.title = title
        }
      })
      this.changeSource({ source: list })
    },
  },
})