import shouye1 from '@/assets/footer/shouye1.png'
import shouye2 from '@/assets/footer/shouye2.png'
import fenlei1 from '@/assets/footer/fenlei1.png'
import fenlei2 from '@/assets/footer/fenlei2.png'
import gouwuche1 from '@/assets/footer/gouwuche1.png'
import gouwuche2 from '@/assets/footer/gouwuche2.png'
import wode1 from '@/assets/footer/wode1.png'
import wode2 from '@/assets/footer/wode2.png'

const footerComponentInit = {
  list: [
    {
      href: 'pages/index/index',
      iconPath: shouye1,
      selectedIconPath: shouye2,
      text: '首页',
      collapseState: true
    },
    {
      href: 'pages/category/index',
      iconPath: fenlei1,
      selectedIconPath: fenlei2,
      text: '分类',
      collapseState: false
    },
    {
      href: 'pages/cart/cart',
      iconPath: gouwuche1,
      selectedIconPath: gouwuche2,
      text: '购物车',
      collapseState: false
    },
    {
      href: 'pages/userCenter/index',
      iconPath: wode1,
      selectedIconPath: wode2,
      text: '我的',
      collapseState: false
    }
  ]
}
const initPublic = [
  {
    label: '首页',
    value: 'pages/index/index',
    isCustom: false
  },
  {
    label: '商品详情',
    value: 'pages/product/details/index?id={detailId}',
    isCustom: false
  },
  {
    label: '分类页面',
    value: 'pages/category/index',
    isCustom: false
  },
  {
    label: '分类商品列表',
    value: 'pages/product/list/index?category3Id={category3Id}',
    isCustom: false
  },
  {
    label: '店铺页面',
    value: 'pages/shop/index?id={shopId}',
    isCustom: false
  },
  {
    label: '购物车',
    value: 'pages/cart/cart',
    isCustom: false
  },
  {
    label: '我的',
    value: 'pages/userCenter/index',
    isCustom: false
  }
]
// console.log(initPublic)
export default {
  namespaced: true,
  state: {
    diyComponents: [],
    currentComponentKeyCode: 'AddComponent',
    currentComponentConfig: {},
    templatePage: [],
    footerComponent: null
  },
  mutations: {
    diyComponentsSort(state, components = []) {
      state.diyComponents = components.map((item, index) => {
        item.index = index
        return item
      })
    },
    initTemplatePage(state, templatePage) {
      state.templatePage = initPublic.concat(templatePage)
    },
    initComponents(state, components) {
      state.currentComponentKeyCode = 'AddComponent'
      state.diyComponents = components
    },
    setComponents(state, component) {
      const { keyCode, content } = component || {}
      const isHas = state.diyComponents.some(
        component => component.keyCode === keyCode
      )
      if (!isHas) {
        state.diyComponents.push(component)
        // state.currentComponentKeyCode = keyCode || 'AddComponent'
        state.currentComponentConfig = content || {}
        state.diyComponents = state.diyComponents.map((item, index) => {
          item.index = index
          return item
        })
      }
    },
    clearFooterComponents(state) {
      state.footerComponent = null
    },
    initFooterComponents(state) {
      state.footerComponent = footerComponentInit
    },
    setFooterComponents(state, component) {
      state.footerComponent = component || footerComponentInit
    },
    deleteComponent(state, keyCode) {
      state.diyComponents = state.diyComponents.filter(item => {
        return item.keyCode !== keyCode
      })
    },
    setCurrentComponentKeyCode(state, keyCode) {
      if (keyCode === 'Footer') {
        state.currentComponentKeyCode = keyCode
        const footerComponent = state.footerComponent
        state.currentComponentConfig = footerComponent || {}
        return false
      }
      const currentComponent = state.diyComponents.find(
        component => component.keyCode === keyCode
      )
      state.currentComponentKeyCode = keyCode || 'AddComponent'
      if (currentComponent) {
        const { content } = currentComponent
        state.currentComponentConfig = content || {}
      }
    },
    setComponentConfig(state, { keyCode, content }) {
      state.diyComponents = state.diyComponents.map(component => {
        if (component.keyCode === keyCode) {
          component.content = Object.assign(component.content, content)
        }
        return component
      })
    }
  }
}
