// import Vue from 'vue'
import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
import { toThousands, boldAmounts } from '@/libs/tools'
import { mapState } from 'vuex'

// const mixinsComputed = Vue.config.optionMergeStrategies.computed
// const mixinsMethods = Vue.config.optionMergeStrategies.methods

const mixin = {
  computed: {
    ...mapState({
      layoutMode: state => state.app.layout,
      navTheme: state => state.app.theme,
      primaryColor: state => state.app.color,
      colorWeak: state => state.app.weak,
      fixedHeader: state => state.app.fixedHeader,
      fixSiderbar: state => state.app.fixSiderbar,
      fixSidebar: state => state.app.fixSiderbar,
      contentWidth: state => state.app.contentWidth,
      autoHideHeader: state => state.app.autoHideHeader,
      sidebarOpened: state => state.app.sidebar,
      multiTab: state => state.app.multiTab
    })
  },
  methods: {
    isTopMenu () {
      return this.layoutMode === 'topmenu'
    },
    isSideMenu () {
      return !this.isTopMenu()
    }
  }
}

const mixinDevice = {
  computed: {
    ...mapState({
      device: state => state.app.device
    })
  },
  methods: {
    isMobile () {
      return this.device === DEVICE_TYPE.MOBILE
    },
    isDesktop () {
      return this.device === DEVICE_TYPE.DESKTOP
    },
    isTablet () {
      return this.device === DEVICE_TYPE.TABLET
    }
  }
}

const AppDeviceEnquire = {
  mounted () {
    const { $store } = this
    deviceEnquire(deviceType => {
      switch (deviceType) {
        case DEVICE_TYPE.DESKTOP:
          $store.commit('TOGGLE_DEVICE', 'desktop')
          $store.dispatch('setSidebar', true)
          // 默认收起侧边栏
          // $store.dispatch('setSidebar', false)
          break
        case DEVICE_TYPE.TABLET:
          $store.commit('TOGGLE_DEVICE', 'tablet')
          $store.dispatch('setSidebar', false)
          break
        case DEVICE_TYPE.MOBILE:
        default:
          $store.commit('TOGGLE_DEVICE', 'mobile')
          $store.dispatch('setSidebar', true)
          break
      }
    })
  }
}

// 所有页
const commonMixin = {
  data () {
    return {
      toThousands,
      boldAmounts
    }
  },
  computed: {
    isShowWarehouse () {
      return this.$store.state.app.isWarehouse
    },
    isShowCustomerSearch () {
      return this.$store.state.app.isShowCustomerSearch
    },
    defWarehouse () {
      return this.$store.state.app.defWarehouse
    }
  },
  watch: {
    '$store.state.app.loadingStatus': function (a, b) {
      if (!a) {
        if (this.disabled !== undefined) {
          this.disabled = a
        }
        if (this.spinning !== undefined) {
          this.spinning = a
        }
        if (this.exportLoading !== undefined) {
          this.exportLoading = a
        }
        if (this.isInster !== undefined) {
          this.isInster = a
        }
        if (this.addMoreLoading != undefined) {
          this.addMoreLoading = a
        }
        if (this.confirmLoading != undefined) {
          this.confirmLoading = a
        }
      }
    }
  },
  methods: {
    // 清除组件缓存
    clearCompCache (cache, keys, key) {
      if (cache[key] && cache[key].componentInstance) {
        cache[key].componentInstance.$destroy()
        if (keys.length) {
          var index = keys.indexOf(key)
          if (index > -1) {
            keys.splice(index, 1)
          }
        }
        delete cache[key]
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    const newVal = to
    const oldVal = from
    // 是否时同一个父级菜单下的页面
    const mnlen = newVal.matched.length < 3
    const newMatched = newVal.matched[mnlen ? 1 : 2]
    const molen = oldVal.matched.length < 3
    const oldMatched = oldVal.matched[molen ? 1 : 2]
    const hasChildren = newMatched.name == oldMatched.name
    // 判断是否是新增，编辑，详情页
    const oa = oldVal.meta.title.indexOf('详情') >= 0
    const ob = oldVal.meta.title.indexOf('新增') >= 0
    const oc = oldVal.meta.title.indexOf('编辑') >= 0
    const oxt = oldVal.meta.replaceTab
    // console.log(hasChildren,oa||ob||oc||oxt)
    const key = this.$vnode.key
    const parentNode = this.$vnode.parent
    const cache = parentNode && parentNode.componentInstance ? parentNode.componentInstance.cache : null
    const keys = parentNode && parentNode.componentInstance ? parentNode.componentInstance.keys : null
    const closeTabPages = this.$store.state.app.closeTabPages
    const multiTab = this.$store.state.app.multiTab
    // console.log(closeTabPages,key,multiTab)
    // 清空同级路由的组件缓存
    if (hasChildren && (oa || ob || oc || oxt) && cache && keys) {
      this.clearCompCache(cache, keys, key)
      // 单页签模式
      if (!multiTab) {
        this.$store.state.app.isNewTab = false
        this.$store.state.app.updateList = true
      }
    }
    // 单页签模式,并且不是同级菜单的清空组件
    if (!multiTab && !hasChildren) {
      this.clearCompCache(cache, keys, key)
    }
    // 批量清空组件缓存
    if (closeTabPages && closeTabPages.length && cache && keys) {
      for (let i = 0; i < closeTabPages.length; i++) {
        this.clearCompCache(cache, keys, closeTabPages[i])
      }
      this.$store.state.app.closeTabPages = []
    }
    // console.log(cache,keys)
    next()
  }
}

export { mixin, AppDeviceEnquire, mixinDevice, commonMixin }
