import { defineStore } from 'pinia'
// import Storage from 'web-storage-cache'
// const localStorage = new Storage()
import { ref } from 'vue'
import { TabPanesRoute } from '@/layouts/BasicLayout/type'
import router from '@/router'
import { deepClone } from '@/utils/tool/translateValue'

interface tabPanesState {
	tabPanesList: TabPanesRoute[]
	activeKey: string
}

export const tabPanesStore = defineStore({
	id: 'store-tab-panes',
	state: (): tabPanesState => ({
		tabPanesList: [],
		activeKey: '',
	}),
	actions: {
		setActiveTabPanes(key: string) {
			this.activeKey = key
			const curRoute = this.tabPanesList.filter(
				f => f.name === this.activeKey
			)
			let params = curRoute.length > 0 ? curRoute[0].params : {}
			params = deepClone(params)
			router.push({ name: this.activeKey, params: params })
		},
		setTabPanesList(to) {
			const canStore = ref<boolean>(false)
			canStore.value = this.tabPanesList.some(f => {
				return f.name === to.name
			})
			if (!canStore.value) {
				const _tabPanesList: TabPanesRoute[] = deepClone(
					this.tabPanesList
				)
				// JSON.parse(
				// 	JSON.stringify(this.tabPanesList)
				// )
				_tabPanesList.push(to)
				this.tabPanesList = [...new Set(_tabPanesList)]

				this.tabPanesList[0].closable = !(
					this.tabPanesList.length === 1
				)
			}
			this.activeKey = to.name
		},
		deleteTabPanesList(targetKey: string) {
			let lastIndex = 0
			this.tabPanesList.forEach((pane, i) => {
				if (pane.name === targetKey) {
					lastIndex = i - 1
				}
			})
			this.tabPanesList = this.tabPanesList.filter(
				pane => pane.name !== targetKey
			)

			// 只有一个时，不可关闭
			this.tabPanesList[0].closable = !(this.tabPanesList.length === 1)

			if (this.tabPanesList.length && this.activeKey === targetKey) {
				if (lastIndex >= 0) {
					this.activeKey = this.tabPanesList[lastIndex].name
				} else {
					this.activeKey = this.tabPanesList[0].name
				}
			}

			const curRoute = this.tabPanesList.filter(
				f => f.name === this.activeKey
			)
			let params = curRoute.length > 0 ? curRoute[0].params : {}
			params = deepClone(params)
			router.push({ name: this.activeKey, params: params })
		},
	},
})