import * as types from './mutation-type'
import api from '../../api/editor'
import Page from '../../model/Page'
import Theme from '../../model/Theme'
import Element from '../../model/Element'
import tools from '../../util/tools'
import { Loading } from 'element-ui';
/**
 * 保存页面数据
 */
export const saveTheme = ({ commit }, theme) => {
  if (theme && theme._id) {
    return Promise.resolve(api.updateTheme(theme).then((res) => {
      commit(types.UPDATE_THEME_SUCCESS, res)
      window.hasSaveFlag = true;
    }))
  } else {
    return Promise.resolve(api.saveTheme(theme).then((res) => {
      commit(types.ADD_THEME_SUCCESS, res)
      window.hasSaveFlag = true;
    }))
  }
}

/**
 * 获取用户所有场景主题
 * @param commit
 */
export const getUserThemeList = ({ commit }, type) => {
  api.getUserThemeList(type).then((res) => {
    commit(types.GET_USER_THEME_LIST, res)
  })
}

/**
 * 创建场景主题
 * @param commit
 */

export const createTheme = ({ commit }, type) => {
  var theme = new Theme({ type: type })
  commit(types.CREATE_THEME, theme)
  commit(types.SET_CUR_EDITOR_THEME, theme)
}

/**
 * 设置当前编辑的主题
 */
export const setEditorTheme = ({ commit }, theme) => {
  var newTheme = new Theme(theme)
  commit(types.SET_CUR_EDITOR_THEME, newTheme)
}

/**
 * 设置当前正在编辑的页面
 * @param commit
 * @param page
 */
export const setEditorPage = ({ commit }, page) => {
  commit(types.SET_CUR_EDITOR_PAGE, page)
}

/**
 * 给主题添加页面
 * @param commit
 */
export const addPage = ({ commit }) => {
  var page = new Page()
  commit(types.ADD_PAGE, page)
  commit(types.SET_CUR_EDITOR_PAGE, page)
}
export const addPagePosition = ({ commit }, position) => {
  var page = new Page()
  page.position = position
  commit(types.ADD_PAGE_POSITION, page)
  commit(types.SET_CUR_EDITOR_PAGE, page)
}

/**
 * 添加页面元素
 */
export const addElement = ({ commit, state }, data) => {
  commit(types.ADD_PIC_ELEMENT, new Element(data))
  var list = state.editorPage.elements
  var lastIndex = list.length - 1
  list[lastIndex]['zindex'] = lastIndex ? list[lastIndex - 1]['zindex'] + 1 : 2
  commit(types.SET_CUR_EDITOR_ELEMENT, state.editorPage.elements[lastIndex])
}

/**
 * 添加背景图片
 */
export const addBGElement = ({ commit }, data) => {
  var element = new Element(data)
  commit(types.SET_BG_ELEMENT, element)
  commit(types.SET_CUR_EDITOR_ELEMENT, null)
}

/**
 * 保存图片
 * @param commit
 * @param data
 */
export const savePic = ({ commit }, data) => {
  commit(types.PUSH_PIC_LIST, data)
}
/**
 * 清除背景
 * @param commit
 */
export const cleanBG = ({ commit }) => {
  commit(types.CLEAN_BG)
}

export const cleanEle = ({ commit }, ele) => {
  commit(types.CLEAN_ELE, ele)
}
/**
 * 复制页面
 * @param commit
 */
export const copyPage = ({ commit }, data) => {
  var page = tools.vue2json(data)
  commit(types.ADD_PAGE, page)
}

/**
 * 删除页面
 * @param commit
 */
export const delPage = ({ commit }, page) => {
  commit(types.DELETE_PAGE, page)
}

export const getPageByThemeId = ({ dispatch, commit }, id) => {
  let loading = Loading.service({
    lock: true,
    text: '模板加载中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  api.getPageByThemeId(id).then((res) => {
    console.log("XXXXXXXXXXXXXXX", res);
    var single = JSON.parse(res.single.jsonString);
    console.log("XXXXXXXXXXXXXXX", single);
    single.pages = single.pages || [];
    single.backgroundAudio = single.backgroundAudio || '';
    single.title = res.single.title || '';
    single.resultPageCount = res.single.resultPageCount || 0;

    single.shareContent = res.single.shareContent || '';
    single.shareImg = res.single.shareImg || '';
    single.shareTitle = res.single.shareTitle || '';
    single.shareUrl = res.single.shareUrl || '';

    single.pages.forEach((page) => {
      page.elements.forEach((element) => {
        element.animatedFont = element.animatedFont || ''
        element.eleCanvas = element.eleCanvas || ''
      })
    })
    commit(types.SET_CUR_EDITOR_THEME, single)
    commit(types.SET_CUR_EDITOR_PAGE, single.pages[0])
    loading.close()
    setTimeout(function () {

      window.revocationFlag = true
    }, 800)
  }).then(() => {
    dispatch('sortElementsByZindex')
    loading.close()
    setTimeout(function () {

      window.revocationFlag = true
    }, 800)
  })
}

export const setEditorElement = ({ commit }, element) => {
  if (element && element.locked) {
    return false
  }
  commit(types.SET_CUR_EDITOR_ELEMENT, element)
}

// 删除元素
export const deleteElement = ({ commit }, element) => {
  commit(types.DELETE_ELEMENT, element)
}

export const deleteSelectedElement = ({ commit, state }) => {
  commit(types.DELETE_ELEMENT, state.editorElement)
}

export const playAnimate = ({ state, commit, getters }) => {
  commit(types.PLAY_ANIMATE)
  let target = getters['editingElement'] || getters['editingPageElements'] || null
  let time = 0
  if (target instanceof Array) {
    target.forEach(v => {
      time = v['animatedName'] && (v['duration'] + v['delay']) > time ? (v['duration'] + v['delay']) : time
    })
  } else if (target instanceof Object) {
    time = (target['duration'] + target['delay'])
  }
  setTimeout(() => {
    commit(types.STOP_ANIMATE, target)
  }, time * 1000)
}

export const getPicListByThemeId = ({ commit }, _id) => {
  api.getPicListByThemeId(_id).then((res) => {
    commit(types.FETCH_PIC_LIST, res)
  })
}

export const cleanPicList = ({ commit }) => {
  commit(types.CLEAN_PIC_LIST)
}

export const sortElementsByZindex = ({ commit }, location) => {
  commit(types.SORTELEMENTS_BY_ZINDEX, location)
}

export const deleteTheme = ({ commit }, theme) => {
  return Promise.resolve(api.delTheme(theme).then((res) => {
    commit(types.DELETE_THEME, theme)
  }))
}

export const uploadPsd = ({ commit }, _file) => {
  api.uploadPsd(_file).then((res) => {
  })
}