import { Module, MutationTree } from 'vuex'
import Vue from 'vue'
import { RootState } from '@/store'

interface IAppState {
  isCollapse: boolean
  name?: string
  doctitle?: string
  backgroundColor: string
}

const mutations: MutationTree<IAppState> = {
  collapse(state: IAppState) {
    state.isCollapse = !state.isCollapse
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$appStore.collapse()
    }
  },
  appName(state: IAppState, appinfo: any) {
    state.name = appinfo.name
  },
  changeTitle(state: IAppState, title: any) {
    state.doctitle = title
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$appStore.changeTitle(title)
    }
  },
  setBgColor(state: IAppState, color = '#fff') {
    state.backgroundColor = color
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$appStore.setBgColor(color)
    }
  },
}

const appState: IAppState = {
  isCollapse: false,
  name: '',
  doctitle: '',
  backgroundColor: '#fff',
}

const app: Module<IAppState, RootState> = {
  namespaced: true,
  state: appState,
  mutations,
}

export default app