import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
import dataset from './modules/dataset'
import chart from './modules/chart'
import request from './modules/request'
import panel from './modules/panel'
import application from './modules/application'
import lic from './modules/lic'
import msg from './modules/msg'
import map from './modules/map'
import animation from '@/components/canvas/store/animation'
import compose from '@/components/canvas/store/compose'
import contextmenu from '@/components/canvas/store/contextmenu'
import copy from '@/components/canvas/store/copy'
import event from '@/components/canvas/store/event'
import layer from '@/components/canvas/store/layer'
import snapshot from '@/components/canvas/store/snapshot'
import lock from '@/components/canvas/store/lock'
import task from './modules/task'
import { formatCondition, valueValid } from '@/utils/conditionUtil'
import { Condition } from '@/components/widget/bean/Condition'

import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import bus from '@/utils/bus'
import { BASE_MOBILE_STYLE } from '@/components/canvas/customComponent/component-list'
import { TYPE_CONFIGS } from '@/views/chart/chart/util'
import { deepCopy } from '@/components/canvas/utils/utils'

Vue.use(Vuex)

const data = {
  state: {
    ...animation.state,
    ...compose.state,
    ...contextmenu.state,
    ...copy.state,
    ...event.state,
    ...layer.state,
    ...snapshot.state,
    ...lock.state,
    ...task.state,
    // 编辑器模式 edit preview
    editMode: 'edit',
    // 当前页面全局数据 包括扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
    canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING,
    // 当前展示画布缓存数据
    componentDataCache: null,
    // 当前展示画布组件数据
    componentData: [],
    // 当前展示画布视图信息
    componentViewsData: {},
    // PC布局画布组件数据
    pcComponentData: [],
    // 移动端布局画布组件数据
    mobileComponentData: [],
    // 当前点击组件
    curComponent: null,
    curCanvasScale: null,
    curCanvasScaleMap: {},
    curComponentIndex: null,
    // 预览仪表板缩放信息
    previewCanvasScale: {
      scalePointWidth: 1,
      scalePointHeight: 1
    },
    // 点击画布时是否点中组件，主要用于取消选中组件用。
    // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
    isClickComponent: false,
    canvasCommonStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING,
    // 联动设置状态
    linkageSettingStatus: false,
    // 当前设置联动的组件
    curLinkageView: null,
    // 和当前组件联动的目标组件
    targetLinkageInfo: [],
    // 当前仪表板联动 下钻 上卷等信息
    nowPanelTrackInfo: {},
    // 当前仪表板的跳转信息基础信息
    nowPanelJumpInfo: {},
    // 当前仪表板的跳转信息(只包括仪表板)
    nowPanelJumpInfoTargetPanel: {},
    // 当前仪表板的外部参数信息
    nowPanelOuterParamsInfo: {},
    // 拖拽的组件信息
    dragComponentInfo: null,
    // 仪表板组件间隙大小 px
    componentGap: 5,
    // 移动端布局状态
    mobileLayoutStatus: false,
    // 是否是mobile
    mobileStatus: false,
    // 公共链接状态(当前是否是公共链接打开)
    publicLinkStatus: false,
    pcTabMatrixCount: {
      x: 36,
      y: 36
    },
    pcMatrixCount: {
      x: 36,
      y: 18
    },
    mobileMatrixCount: {
      x: 6,
      y: 12
    },
    mobileLayoutStyle: {
      x: 300,
      y: 600
    },
    scrollAutoMove: 0,
    // 系统管理菜单是否收缩
    isCollapse: false,
    // 视图是否编辑记录
    panelViewEditInfo: {},
    // 仪表板视图明细
    panelViewDetailsInfo: {},
    // 当前tab页内组件
    curActiveTabInner: null,
    // static resource local path
    staticResourcePath: '/static-resource/',
    // panel edit batch operation status
    batchOptStatus: false,
    // Currently selected components
    curBatchOptComponents: [],
    // Currently selected Multiplexing components
    curMultiplexingComponents: {},
    mixProperties: [],
    mixPropertiesInner: {},
    batchOptChartInfo: null,
    batchOptViews: {},
    // properties changed
    changeProperties: {
      customStyle: {},
      customAttr: {}
    },
    allViewRender: [],
    isInEditor: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
    tabCollisionActiveId: null, // 当前在碰撞的Tab组件ID
    tabMoveInActiveId: null, // 当前在移入的Tab ID
    tabMoveOutActiveId: null, // 当前在移出的Tab ID
    tabMoveOutComponentId: null, // 当前在移出Tab de组件ID
    tabActiveTabNameMap: {}, // 编辑器中 tab组件中的活动tab页,
    // 鼠标处于drag状态的坐标点
    mousePointShadowMap: {
      mouseX: 0,
      mouseY: 0,
      width: 0,
      height: 0
    },
    previewVisible: false,
    previewComponentData: [],
    currentCanvasNewId: [],
    lastViewRequestInfo: {},
    multiplexingStyleAdapt: true // 复用样式跟随主题
  },
  mutations: {
    ...animation.mutations,
    ...compose.mutations,
    ...contextmenu.mutations,
    ...copy.mutations,
    ...event.mutations,
    ...layer.mutations,
    ...snapshot.mutations,
    ...lock.mutations,

    setTabActiveTabNameMap(state, tabActiveInfo) {
      state.tabActiveTabNameMap[tabActiveInfo.tabId] = tabActiveInfo.activeTabName
    },

    setClickComponentStatus(state, status) {
      state.isClickComponent = status
    },

    setPreviewVisible(state, previewVisible) {
      state.previewVisible = previewVisible
    },

    setEditMode(state, mode) {
      state.editMode = mode
    },
    setIsCollapse(state, isCollapse) {
      state.isCollapse = isCollapse
    },
    setCanvasStyle(state, style) {
      if (style) {
        style['selfAdaption'] = true
      }
      state.canvasStyleData = style
    },

    setComponentFromList(state, playload) {
      state.componentData.some((ele, index) => {
        if (ele.id !== playload.id) return false
        state.componentData.splice(index, 1, playload)
        return true
      })
    },

    setCurComponent(state, { component, index }) {
      if (!component && state.curComponent) {
        Vue.set(state.curComponent, 'editing', false)
      }
      // 当前视图操作状态置空
      if (component) {
        component['optStatus'] = {
          dragging: false,
          resizing: false
        }
        // Is the current component in editing status
        if (!state.curComponent) {
          Vue.set(component, 'editing', false)
        } else if (component.id !== state.curComponent.id) {
          Vue.set(component, 'editing', false)
        }
      }
      state.styleChangeTimes = 0
      state.curComponent = component
      state.curComponentIndex = index
    },

    setCurActiveTabInner(state, curActiveTabInner) {
      state.curActiveTabInner = curActiveTabInner
    },

    setCurCanvasScale(state, curCanvasScaleSelf) {
      Vue.set(state.curCanvasScaleMap, curCanvasScaleSelf.canvasId, curCanvasScaleSelf)
      state.curCanvasScale = curCanvasScaleSelf
    },
    setPreviewCanvasScale(state, scale) {
      if (scale.scaleWidth) {
        state.previewCanvasScale.scalePointWidth = scale.scaleWidth
      }
      if (scale.scaleHeight) {
        state.previewCanvasScale.scalePointHeight = scale.scaleHeight
      }
    },
    setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
      if (curComponent) {
        const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
        if (top || top === 0) curComponent.style.top = Math.round((top / curCanvasScaleSelf.scalePointHeight))
        if (left || left === 0) curComponent.style.left = Math.round((left / curCanvasScaleSelf.scalePointWidth))
        if (width || width === 0) curComponent.style.width = Math.round((width / curCanvasScaleSelf.scalePointWidth))
        if (height || height === 0) curComponent.style.height = Math.round((height / curCanvasScaleSelf.scalePointHeight))
        if (rotate || rotate === 0) curComponent.style.rotate = rotate
      }
    },

    setShapeSingleStyle({ curComponent }, { key, value }) {
      curComponent.style[key] = value
    },

    setComponentData(state, componentData = []) {
      Vue.set(state, 'componentData', componentData)
    },
    setPreviewComponentData(state, previewComponentData = []) {
      Vue.set(state, 'previewComponentData', previewComponentData)
    },
    setComponentViewsData(state, componentViewsData = {}) {
      Vue.set(state, 'componentViewsData', componentViewsData)
    },

    setPcComponentData(state, pcComponentData = []) {
      Vue.set(state, 'pcComponentData', pcComponentData)
    },
    setComponentDataCache(state, componentDataCache) {
      Vue.set(state, 'componentDataCache', componentDataCache)
    },

    setMobileComponentData(state, mobileComponentData = []) {
      Vue.set(state, 'mobileComponentData', mobileComponentData)
    },
    addComponent(state, { component, index }) {
      if (index !== undefined) {
        state.componentData.splice(index, 0, component)
      } else {
        state.componentData.push(component)
        state.currentCanvasNewId.push(component.id)
      }
      this.commit('setCurComponent', { component: component, index: index || state.componentData.length - 1 })
    },
    removeViewFilter(state, componentId) {
      state.componentData = state.componentData.map(item => {
        const newItem = item
        newItem.filters = newItem.filters && newItem.filters.filter(filter => filter.componentId !== componentId) || []
        return newItem
      })
    },

    clearAllViewFilter(state) {
      state.componentData.forEach(item => {
        if (item.type === 'view' && item.filters && item.filters.length) {
          item.filters = []
        }
        if (item.type === 'de-tabs' && item.options.tabList && item.options.tabList.length) {
          item.options.tabList.forEach(tab => {
            if (tab.content && tab.content.type === 'view' && tab.content.filters && tab.content.filters.length) {
              tab.content.filters = []
            }
          })
        }
      })
    },

    addViewFilter(state, data) {
      const required = data.component.options.attrs.required
      const condition = formatCondition(data)
      let vValid = valueValid(condition)
      condition.requiredInvalid = required && !vValid
      vValid = vValid || required
      //   1.根据componentId过滤
      const filterComponentId = condition.componentId
      const canvasId = data.canvasId

      // 过滤时 主画布的过滤组件可以过滤所有的视图
      const canvasViewIds = state.componentData.filter(item => item.type === 'view' && (canvasId === 'canvas-main' || item.canvasId === canvasId)).map((itemView) => {
        return itemView.propValue.viewId
      })
      const canvasViewIdMatch = (viewId) => canvasViewIds && canvasViewIds.length > 0 && canvasViewIds.includes(viewId)

      //   2.循环每个Component 得到 三种情况 a增加b删除c无操作
      const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)

      for (let index = 0; index < state.componentData.length; index++) {
        const element = state.componentData[index]
        if (element.type && element.type === 'de-tabs') {
          for (let idx = 0; idx < element.options.tabList.length; idx++) {
            const ele = element.options.tabList[idx].content
            if (!ele.type || ele.type !== 'view') continue
            const currentFilters = ele.filters || []
            const vidMatch = viewIdMatch(condition.viewIds, ele.propValue.viewId)

            let jdx = currentFilters.length
            while (jdx--) {
              const filter = currentFilters[jdx]
              if (filter.componentId === filterComponentId) {
                currentFilters.splice(jdx, 1)
              }
            }
            // 不存在该条件 且 条件有效 直接保存该条件
            // !filterExist && vValid && currentFilters.push(condition)
            vidMatch && vValid && currentFilters.push(condition)
            ele.filters = currentFilters
          }
          state.componentData[index] = element
        }
        if (!element.type || element.type !== 'view') continue
        const currentFilters = element.filters || []
        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId) && canvasViewIdMatch(element.propValue.viewId)
        let j = currentFilters.length
        while (j--) {
          const filter = currentFilters[j]
          if (filter.componentId === filterComponentId) {
            currentFilters.splice(j, 1)
          }
        }
        // 不存在该条件 且 条件有效 直接保存该条件
        // !filterExist && vValid && currentFilters.push(condition)
        vidMatch && vValid && currentFilters.push(condition)
        element.filters = currentFilters
        state.componentData[index] = element
      }
    },

    // 添加联动 下钻 等过滤组件
    addViewTrackFilter(state, data) {
      const dimensionSort = deepCopy(data.dimensionList)
      const viewId = data.viewId
      let trackInfo
      if (data.option === 'linkage') {
        trackInfo = state.nowPanelTrackInfo
        // 兼容情况，当源视图多个字段匹配目标视图一个字段的时候，默认只保留当前点击的维度，将改维度排序到组件结尾，去重时即可保留
        const activeDimensionIndex = data.dimensionList.findIndex(dimension => dimension.id === data.name)
        if (activeDimensionIndex > -1 && activeDimensionIndex !== dimensionSort.length - 1) {
          const dimensionLast = dimensionSort[dimensionSort.length - 1]
          dimensionSort[dimensionSort.length - 1] = dimensionSort[activeDimensionIndex]
          dimensionSort[activeDimensionIndex] = dimensionLast
        }
      } else {
        trackInfo = state.nowPanelJumpInfoTargetPanel
      }
      for (let index = 0; index < state.componentData.length; index++) {
        const element = state.componentData[index]
        if (element.type && element.type === 'de-tabs') {
          for (let idx = 0; idx < element.options.tabList.length; idx++) {
            const ele = element.options.tabList[idx].content
            if (!ele.type || ele.type !== 'view') continue

            const currentFilters = element.linkageFilters || [] // 当前联动filter

            dimensionSort.forEach(dimension => {
              const sourceInfo = viewId + '#' + dimension.id
              // 获取所有目标联动信息
              const targetInfoList = trackInfo[sourceInfo] || []
              targetInfoList.forEach(targetInfo => {
                const targetInfoArray = targetInfo.split('#')
                const targetViewId = targetInfoArray[0] // 目标视图
                if (ele.propValue.viewId === targetViewId) { // 如果目标视图 和 当前循环组件id相等 则进行条件增减
                  const targetFieldId = targetInfoArray[1] // 目标视图列ID
                  const condition = new Condition('', targetFieldId, 'eq', [dimension.value], [targetViewId])
                  condition.sourceViewId = viewId
                  let j = currentFilters.length
                  while (j--) {
                    const filter = currentFilters[j]
                    // 兼容性准备 viewIds 只会存放一个值
                    if (targetFieldId === filter.fieldId && filter.viewIds.includes(targetViewId) && filter.value[0] !== data.value) {
                      currentFilters.splice(j, 1)
                    }
                  }
                  // 不存在该条件 且 条件有效 直接保存该条件
                  // !filterExist && vValid && currentFilters.push(condition)
                  currentFilters.push(condition)
                }
              })
            })

            ele.linkageFilters = currentFilters
          }
          state.componentData[index] = element
        }
        if (!element.type || (element.type !== 'view' && element.type !== 'custom')) continue
        const currentFilters = element.linkageFilters || [] // 当前联动filter
        // 联动的视图情况历史条件
        // const currentFilters = []

        dimensionSort.forEach(dimension => {
          const sourceInfo = viewId + '#' + dimension.id
          // 获取所有目标联动信息
          const targetInfoList = trackInfo[sourceInfo] || []
          targetInfoList.forEach(targetInfo => {
            const targetInfoArray = targetInfo.split('#')
            const targetViewId = targetInfoArray[0] // 目标视图
            if (element.type === 'view' && element.propValue.viewId === targetViewId) { // 如果目标视图 和 当前循环组件id相等 则进行条件增减
              const targetFieldId = targetInfoArray[1] // 目标视图列ID
              const condition = new Condition('', targetFieldId, 'eq', [dimension.value], [targetViewId])
              condition.sourceViewId = viewId
              let j = currentFilters.length
              while (j--) {
                const filter = currentFilters[j]
                // 兼容性准备 viewIds 只会存放一个值
                if (targetFieldId === filter.fieldId && filter.viewIds.includes(targetViewId)) {
                  currentFilters.splice(j, 1)
                }
              }
              // 不存在该条件 且 条件有效 直接保存该条件
              // !filterExist && vValid && currentFilters.push(condition)
              currentFilters.push(condition)
            }
            if (element.type === 'custom' && element.id === targetViewId) { // 过滤组件处理
              element.options.value = dimension.value
              // 去掉动态时间
              if (element.options.manualModify) {
                element.options.manualModify = false
              }
              // 去掉首选项
              if (element.options?.attrs?.selectFirst) {
                element.options.attrs.selectFirst = false
              }
            }
          })
        })

        if (element.type === 'view') {
          element.linkageFilters = currentFilters
        }
        state.componentData[index] = element
      }
    },
    // 添加外部参数的过滤条件
    addOuterParamsFilter(state, params) {
      // params 结构 {key1:value1,key2:value2}
      if (params) {
        const trackInfo = state.nowPanelOuterParamsInfo

        for (let index = 0; index < state.componentData.length; index++) {
          const element = state.componentData[index]
          if (!element.type || (element.type !== 'view' && element.type !== 'custom')) continue
          const currentFilters = element.outerParamsFilters || [] // 外部参数信息

          // 外部参数 可能会包含多个参数
          Object.keys(params).forEach(function(sourceInfo) {
            // 获取外部参数的值 sourceInfo 是外部参数名称 支持数组传入
            let paramValue = params[sourceInfo]
            let paramValueStr = params[sourceInfo]
            let paramValueTree = params[sourceInfo]
            let operator = 'in'
            if (paramValue && !Array.isArray(paramValue)) {
              paramValue = [paramValue]
              operator = 'eq'
            } else if (paramValue && Array.isArray(paramValue)) {
              paramValueStr = ''
              paramValue.forEach((innerValue, index) => {
                if (index === 0) {
                  paramValueStr = innerValue
                  paramValueTree = innerValue
                } else {
                  paramValueStr = paramValueStr + ',' + innerValue
                  paramValueTree = paramValueTree + '-de-' + innerValue
                }
              })
            }
            // 获取所有目标联动信息
            const targetInfoList = trackInfo[sourceInfo] || []

            targetInfoList.forEach(targetInfo => {
              const targetInfoArray = targetInfo.split('#')
              const targetViewId = targetInfoArray[0] // 目标视图
              if (element.type === 'view' && element.propValue.viewId === targetViewId) { // 如果目标视图 和 当前循环组件id相等 则进行条件增减
                const targetFieldId = targetInfoArray[1] // 目标视图列ID
                const condition = new Condition('', targetFieldId, operator, paramValue, [targetViewId])
                let j = currentFilters.length
                while (j--) {
                  const filter = currentFilters[j]
                  // 兼容性准备 viewIds 只会存放一个值
                  if (targetFieldId === filter.fieldId && filter.viewIds.includes(targetViewId)) {
                    currentFilters.splice(j, 1)
                  }
                }
                // 不存在该条件 且 条件有效 直接保存该条件
                // !filterExist && vValid && currentFilters.push(condition)
                currentFilters.push(condition)
              }
              if (element.type === 'custom' && element.id === targetViewId) { // 过滤组件处理
                if (element.component === 'de-number-range') {
                  element.options.value = paramValue
                } else if (element.component === 'de-select-tree') {
                  element.options.value = paramValueTree
                } else {
                  element.options.value = paramValueStr
                }
                // 去掉动态时间
                if (element.options.manualModify) {
                  element.options.manualModify = false
                }
                // 去掉首选项
                if (element.options?.attrs?.selectFirst) {
                  element.options.attrs.selectFirst = false
                }
              }
            })
            if (element.type === 'view') {
              element.outerParamsFilters = currentFilters
            }
            state.componentData[index] = element
          })
        }
      }
    },

    setComponentWithId(state, component) {
      for (let index = 0; index < state.componentData.length; index++) {
        const element = state.componentData[index]
        if (element.id && element.id === component.id) {
          state.componentData[index] = component
          return
        }
      }
      state.componentData.push(component)
    },
    deleteComponentWithId(state, id) {
      for (let index = 0; index < state.componentData.length; index++) {
        const element = state.componentData[index]
        if (element.id && element.id === id) {
          state.componentData.splice(index, 1)
          if (element.type === 'de-tabs') {
            this.commit('deleteComponentsWithCanvasId', element.id)
          }
          break
        }
      }
    },
    deleteComponent(state) {
      this.commit('deleteComponentWithId', state.curComponent.id)
    },
    setLinkageInfo(state, targetLinkageInfo) {
      state.linkageSettingStatus = true
      state.curLinkageView = state.curComponent
      state.targetLinkageInfo = targetLinkageInfo
    },
    clearLinkageSettingInfo(state) {
      state.linkageSettingStatus = false
      state.curLinkageView = null
      state.targetLinkageInfo = []
    },
    setNowPanelTrackInfo(state, trackInfo) {
      state.nowPanelTrackInfo = trackInfo
    },
    setNowPanelJumpInfo(state, jumpInfo) {
      state.nowPanelJumpInfo = jumpInfo.baseJumpInfoMap
    },
    setNowTargetPanelJumpInfo(state, jumpInfo) {
      state.nowPanelJumpInfoTargetPanel = jumpInfo.baseJumpInfoPanelMap
    },
    setNowPanelOuterParamsInfo(state, outerParamsInfo) {
      state.nowPanelOuterParamsInfo = outerParamsInfo.outerParamsInfoMap
    },
    clearPanelLinkageInfo(state) {
      state.componentData.forEach(item => {
        if (item.linkageFilters && item.linkageFilters.length > 0) {
          item.linkageFilters.splice(0, item.linkageFilters.length)
        }
      })
    },
    setDragComponentInfo(state, dragComponentInfo) {
      dragComponentInfo['shadowStyle'] = {
        x: 0,
        y: 0,
        height: 0,
        width: 0
      }
      state.dragComponentInfo = dragComponentInfo
    },
    clearDragComponentInfo(state) {
      // 如果当前没有拖拽的元素没有放置到画布 清理一下矩阵的占位符
      if (state.dragComponentInfo.moveStatus !== 'drop') {
        bus.$emit('onRemoveLastItem')
      }
      state.dragComponentInfo = null
    },
    setMobileLayoutStatus(state, status) {
      state.mobileLayoutStatus = status
    },
    setMobileStatus(state, status) {
      state.mobileStatus = status
    },
    setPublicLinkStatus(state, status) {
      state.publicLinkStatus = status
    },
    // 启用移动端布局
    openMobileLayout(state) {
      this.commit('clearAllViewFilter')
      state.componentDataCache = null
      state.componentDataCache = JSON.stringify(state.componentData)
      state.pcComponentData = state.componentData
      const mainComponentData = []
      // 移动端布局转换
      state.componentData.forEach(item => {
        item.mobileStyle = (item.mobileStyle || BASE_MOBILE_STYLE)
        if (item.mobileSelected && item.canvasId === 'canvas-main') {
          item.style.width = item.mobileStyle.style.width
          item.style.height = item.mobileStyle.style.height
          item.style.top = item.mobileStyle.style.top
          item.style.left = item.mobileStyle.style.left
          item.style.borderRadius = 3
          item.x = item.mobileStyle.x
          item.y = item.mobileStyle.y
          item.sizex = item.mobileStyle.sizex
          item.sizey = item.mobileStyle.sizey
          item.auxiliaryMatrix = item.mobileStyle.auxiliaryMatrix
          mainComponentData.push(item)
        } else if (item.canvasId !== 'canvas-main') {
          mainComponentData.push(item)
        }
      })
      state.componentData = mainComponentData
      state.mobileLayoutStatus = true
    },
    setScrollAutoMove(state, offset) {
      state.scrollAutoMove = offset
    },
    initPanelComponents(state, panelComponents) {
      if (panelComponents) {
        state.canvasStyleData['panelComponents'] = panelComponents
      }
    },
    recordViewEdit(state, viewInfo) {
      state.panelViewEditInfo[viewInfo.viewId] = viewInfo.hasEdit
    },
    resetViewEditInfo(state) {
      state.panelViewEditInfo = {}
    },
    setLastViewRequestInfo(state, viewRequestInfo) {
      state.lastViewRequestInfo[viewRequestInfo.viewId] = viewRequestInfo.requestInfo
    },
    removeCurBatchComponentWithId(state, id) {
      for (let index = 0; index < state.curBatchOptComponents.length; index++) {
        const element = state.curBatchOptComponents[index]
        if (element === id) {
          delete state.batchOptViews[id]
          state.curBatchOptComponents.splice(index, 1)
          break
        }
      }
      if (state.curBatchOptComponents.length === 1) {
        const lastViewId = state.curBatchOptComponents[0]
        const viewBaseInfo = state.componentViewsData[lastViewId]
        state.changeProperties.customAttr = JSON.parse(viewBaseInfo.customAttr)
        state.changeProperties.customStyle = JSON.parse(viewBaseInfo.customStyle)
      }
      if (state.curBatchOptComponents.length === 0) {
        state.changeProperties = {
          customStyle: {},
          customAttr: {}
        }
      }
      this.commit('setBatchOptChartInfo')
    },
    addCurBatchComponent(state, id) {
      if (id) {
        state.curBatchOptComponents.push(id)
        // get view base info
        const viewBaseInfo = state.componentViewsData[id]
        // get properties
        const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
        if (viewConfig && viewConfig.length > 0) {
          if (state.curBatchOptComponents.length === 1) {
            state.changeProperties.customAttr = JSON.parse(viewBaseInfo.customAttr)
            state.changeProperties.customStyle = JSON.parse(viewBaseInfo.customStyle)
          }
          state.batchOptViews[id] = viewConfig[0]
          this.commit('setBatchOptChartInfo')
        }
      }
    },
    updateComponentViewsData(state, { viewId, propertyKey, propertyValue }) {
      state.componentViewsData[viewId][propertyKey] = propertyValue
    },
    removeCurMultiplexingComponentWithId(state, id) {
      delete state.curMultiplexingComponents[id]
    },
    addCurMultiplexingComponent(state, { component, componentId }) {
      if (componentId) {
        if (component.type === 'custom-button' && component.serviceName === 'buttonSureWidget') {
          const copyComponent = deepCopy(component)
          copyComponent.options.attrs.customRange = false
          copyComponent.options.attrs.filterIds = []
          state.curMultiplexingComponents[componentId] = copyComponent
          return
        }
        state.curMultiplexingComponents[componentId] = component
      }
    },
    setBatchOptChartInfo(state) {
      let render = null
      let type = null
      let allTypes = ''
      let isPlugin = null
      state.mixProperties = []
      state.mixPropertiesInner = {}
      let mixPropertiesTemp = []
      let mixPropertyInnerTemp = {}
      if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
        for (const key in state.batchOptViews) {
          if (mixPropertiesTemp.length > 0) {
            // If it exists , taking the intersection
            mixPropertiesTemp = mixPropertiesTemp.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
            // 根据当前的mixPropertiesTemp 再对 mixPropertyInnerTemp 进行过滤
            mixPropertiesTemp.forEach(propertyInnerItem => {
              if (mixPropertyInnerTemp[propertyInnerItem] && state.batchOptViews[key].propertyInner[propertyInnerItem]) {
                mixPropertyInnerTemp[propertyInnerItem] = mixPropertyInnerTemp[propertyInnerItem].filter(propertyInnerItemValue => state.batchOptViews[key].propertyInner[propertyInnerItem].indexOf(propertyInnerItemValue) > -1)
              }
            })
          } else {
            // If it doesn't exist, assignment directly
            mixPropertiesTemp = deepCopy(state.batchOptViews[key].properties)
            mixPropertyInnerTemp = deepCopy(state.batchOptViews[key].propertyInner)
          }

          if (render && render !== state.batchOptViews[key].render) {
            render = 'mix'
          } else {
            render = state.batchOptViews[key].render
          }

          allTypes = allTypes + '-' + state.batchOptViews[key].value
          if (type && type !== state.batchOptViews[key].value) {
            type = 'mix'
          } else {
            type = state.batchOptViews[key].value
          }

          if (isPlugin && isPlugin !== state.batchOptViews[key].isPlugin) {
            isPlugin = 'mix'
          } else {
            isPlugin = state.batchOptViews[key].isPlugin
          }
        }
        mixPropertiesTemp.forEach(property => {
          if (mixPropertyInnerTemp[property] && mixPropertyInnerTemp[property].length) {
            state.mixPropertiesInner[property] = mixPropertyInnerTemp[property]
            state.mixProperties.push(property)
          }
        })

        if (type && type === 'mix') {
          type = type + '-' + allTypes
        }
        // Assembly history settings 'customAttr' & 'customStyle'
        state.batchOptChartInfo = {
          'mode': 'batchOpt',
          'render': render,
          'type': type,
          'isPlugin': isPlugin,
          'customAttr': state.changeProperties.customAttr,
          'customStyle': state.changeProperties.customStyle
        }
      } else {
        state.batchOptChartInfo = null
      }
    },
    setBatchOptStatus(state, status) {
      state.batchOptStatus = status
      // Currently selected components
      state.curBatchOptComponents = []
      state.mixProperties = []
      state.mixPropertyInnder = {}
      state.batchOptChartInfo = null
      state.batchOptViews = {}
      state.changeProperties = {
        customStyle: {},
        customAttr: {}
      }
    },
    setChangeProperties(state, propertyInfo) {
      state.changeProperties[propertyInfo.custom][propertyInfo.property] = propertyInfo.value
    },
    initCanvasBase(state) {
      this.commit('setCurComponent', { component: null, index: null })
      this.commit('clearLinkageSettingInfo', false)
      this.commit('resetViewEditInfo')
      this.commit('initCurMultiplexingComponents')
      state.currentCanvasNewId = []
      state.batchOptStatus = false
      // Currently selected components
      state.curBatchOptComponents = []
      state.curMultiplexingComponents = {}
      state.mixProperties = []
      state.mixPropertyInnder = {}
      state.batchOptChartInfo = null
      state.batchOptViews = {}
      state.changeProperties = {
        customStyle: {},
        customAttr: {}
      }
    },
    initCanvas(state) {
      this.commit('initCanvasBase')
      state.isInEditor = true
    },
    initViewRender(state, pluginViews) {
      pluginViews.forEach(plugin => {
        plugin.isPlugin = true
      })
      state.allViewRender = [...TYPE_CONFIGS, ...pluginViews]
    },
    initCurMultiplexingComponents(state) {
      state.curMultiplexingComponents = {}
    },
    setInEditorStatus(state, status) {
      state.isInEditor = status
    },
    adaptorStatusDisable(state, componentId) {
      state.componentData.forEach(item => {
        if (item.id === componentId) {
          item.needAdaptor = false
        }
      })
    },
    setTabMoveInActiveId(state, tabId) {
      state.tabMoveInActiveId = tabId
    },
    setTabCollisionActiveId(state, tabId) {
      state.tabCollisionActiveId = tabId
    },
    setTabMoveOutActiveId(state, tabId) {
      state.tabMoveOutActiveId = tabId
    },
    setTabMoveOutComponentId(state, componentId) {
      state.tabMoveOutComponentId = componentId
    },
    clearTabMoveInfo(state) {
      state.tabMoveInActiveId = null
      state.tabCollisionActiveId = null
      state.tabMoveOutActiveId = null
      state.tabMoveOutComponentId = null
    },
    setMousePointShadowMap(state, mousePoint) {
      state.mousePointShadowMap.mouseX = mousePoint.mouseX
      state.mousePointShadowMap.mouseY = mousePoint.mouseY
      state.mousePointShadowMap.width = mousePoint.width
      state.mousePointShadowMap.height = mousePoint.height
    },
    deleteComponentsWithCanvasId(state, canvasId) {
      if (canvasId && canvasId.length > 10) {
        for (let index = 0; index < state.componentData.length; index++) {
          const element = state.componentData[index]
          if (element.canvasId && element.canvasId.includes(canvasId)) {
            state.componentData.splice(index, 1)
          }
        }
      }
    },
    // 清除相同sourceViewId 的 联动条件
    clearViewLinkage(state, viewId) {
      state.componentData.forEach(item => {
        if (item.linkageFilters && item.linkageFilters.length > 0) {
          const newList = item.linkageFilters.filter(linkage => linkage.sourceViewId !== viewId)
          item.linkageFilters.splice(0, item.linkageFilters.length)
          // 重新push 可保证数组指针不变 可以watch到
          if (newList.length > 0) {
            newList.forEach(newLinkage => {
              item.linkageFilters.push(newLinkage)
            })
          }
        }
      })

      bus.$emit('clear_panel_linkage', { viewId: viewId })
    },
    setMultiplexingStyleAdapt(state, value) {
      state.multiplexingStyleAdapt = value
    }
  },
  modules: {
    app,
    settings,
    user,
    permission,
    dataset,
    chart,
    request,
    panel,
    application,
    lic,
    msg,
    map,
    task
  },
  getters
}

export default new Vuex.Store(data)