/* global fetch: false */
import { Component } from 'nek-ui';
import ModuleList from './module.list';
import PageList from './page.list';
import DropArea from './drop.area';
import template from '!raw!./index.html';

const Detail = Component.extend({
  name: 'detail',
  template,
  config() {
    this.defaults({
      projectId: '',
      fixedCategory: {
        name: '模块',
        componentList: [
          {
            desc: '模块',
            name: 'container',
            cols: 12,
          },
        ],
      },
      categoryList: [],
      pageList: [],
    });
    this.supr();
  },

  init() {
    this.$refs.moduleList.$on('upsertComponentList', (params) => {
      this._upsertComponent(params);
    });
    this.$refs.pageList.$on('upsertPageList', (params) => {
      this._upsertPage(params);
    });
    this.$refs.pageList.$on('changePage', (pageId) => {
      this._getPageData(pageId);
    });
    this.$on('deleteModule', (param) => {
      this.$refs.dropArea.trash(param);
    });
    this._ctrlS();
    this.supr();
  },
  enter(options) {
    const { projects = [], param } = this.$state;
    this.$state.curProj = projects.find(d => d._id === param.projectId);
    this.data.projectId = param.projectId;
    this._getComponentList();
    this._getPageList();
  },

  _getComponentList() {
    const { projectId } = this.data;
    fetch(`/api/component/list?project=${projectId}`)
    .then(res => res.json())
    .then((json) => {
      const list = json;
      list.unshift(this.data.fixedCategory);
      this.$update('categoryList', list);
    }).catch((err) => {
      console.error(err.message);
    });
  },

  _getPageList() {
    const { projectId } = this.data;
    const pageList = this.$refs.pageList;
    fetch(`/api/page/list?project=${projectId}`)
    .then(res => res.json())
    .then((json) => {
      pageList.data.activePage = json[0];
      pageList.data.activePage.active = true;
      this._getPageData(json[0]._id);
      this.$update('pageList', json);
    }).catch((err) => {
      console.error(err.message);
    });
  },

  _getPageData(pageId) {
    const { projectId } = this.data;
    const dropArea = this.$refs.dropArea;
    fetch(`/api/page?project=${projectId}&page=${pageId}`)
    .then(res => res.json())
    .then((json) => {
      dropArea.data.rows = json.sync || [{ subRow: [[]], isContainer: false }];
      this.$update();
    }).catch((err) => {
      console.error(err.message);
    });
  },

  _upsertComponent(params) {
    const { projectId } = this.data;
    fetch('/api/component/upsert', {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: JSON.stringify(Object.assign(params, {
        project: projectId,
        component: params._id,
      })),
    })
    .then(res => res.json())
    .then((json) => {
      this._getComponentList();
    }).catch((err) => {
      console.error(err.message);
    });
  },

  _upsertPage(params) {
    const { projectId } = this.data;
    fetch('/api/page/upsert', {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: JSON.stringify(Object.assign(params, {
        project: projectId,
        page: params._id,
      })),
    })
    .then(res => res.json())
    .then((json) => {
      this._getPageList();
    }).catch((err) => {
      console.error(err.message);
    });
  },

  _ctrlS() {
    let isCtrl = false;
    document.onkeyup = (e) => {
      if (e.keyCode === 17) isCtrl = false;
    };
    document.onkeydown = (e) => {
      if (e.keyCode === 17) isCtrl = true;
      if (e.keyCode === 83 && isCtrl === true) {
        this._savePage();
        return false;
      }
    };
  },

  _savePage() {
    const { projectId } = this.data;
    const { pageId } = this.data;
    const pageList = this.$refs.pageList;
    const dropArea = this.$refs.dropArea;

    fetch('/api/page/upsert', {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: JSON.stringify({
        project: projectId,
        page: pageList.data.activePage._id,
        sync: dropArea.data.rows,
      }),
    })
    .then(res => res.json())
    .then((json) => {

    }).catch((err) => {
      console.error(err.message);
    });
    console.log(dropArea.data);
  },
});

export default Detail;

@@ -8,16 +8,25 @@
 al fetch
+,document
 : false 
@@ -46,16 +46,24 @@
 omponent
+, Notify
  %7D from 
@@ -4229,16 +4229,52 @@
 n) =%3E %7B%0A
+      Notify.notify.success('%E4%BF%9D%E5%AD%98%E6%88%90%E5%8A%9F');
 %0A    %7D).
@@ -4316,32 +4316,92 @@
 r(err.message);%0A
+      Notify.notify.success(%60%E4%BF%9D%E5%AD%98%E5%A4%B1%E8%B4%A5%EF%BC%9A$%7Berr.message %7C%7C '%E6%9C%AA%E7%9F%A5'%7D%60);%0A
     %7D);%0A    cons

Add notify for saving