/*
 * @Author: CGT (caogtaa@gmail.com) 
 * @Date: 2020-01-16 22:09:21 
 * @Last Modified by: CGT (caogtaa@gmail.com)
 * @Last Modified time: 2020-01-16 23:45:39
 */

'use strict';

let _config = {};
Editor.Panel.extend({
    // css style for panel

    style: `
    :host { margin: 5px; }
    :host ui-input { width: 100%; }
    h2 { color: #f90; }

    ul {
      list-style-type: none;
      padding-inline-start: 20px;
    }

    ul.root {
      padding-inline-start: 15px;
    }

    ul li {
      padding: 2px 10px 1px 0;
      text-align: -webkit-match-parent;
      color: #ccc;
      border-bottom: 1px solid #454545;
      box-sizing: border-box;
    }

    span.selected {
      background: #555;
    }

    .caret {
      cursor: pointer;
      user-select: none;
      width: 12px;
      display: inline-block;
    }

    .caret-holder {
      width: 12px;
      display: inline-block;
    }
    
    .caret::before {
      content: "\\25B6";
      color: #ccc;
      display: inline-block;
      margin-right: 6px;
    }
    
    .caret-down::before {
      transform: rotate(90deg);  
    }
    
    .nested {
      display: none;
    }

    .collapsed {

    }
    
    .active:not(.collapsed) {
      display: block;
    }
  `,

    // html template for panel
    template: `
    <p>先选择游戏类型，再选择学期-课程-关卡</p>
    <div v-if="d.loaded">
      <ui-box-container>
      <div class="layout horizontal start-justified">
        <ui-prop name="游戏类型">
          <ui-select v-value="d.config.gameType" @change="onTypeChange($event)">
            <option value="0">测试</option>
            <option value="1">课堂版</option>
            <option value="2">家长版</option>
            <option value="3">数学版</option>
            <option value="4">闯关版</option>
            <option value="5">无尽版</option>
            <option value="6">识字宝</option>
            <option value="7">数感宝</option>
            <option value="9">拼音宝</option>
          </ui-select>
        </ui-prop>
        </div>
        <div class="layout horizontal start-justified">
        <ui-prop name="学期:">
          <ui-select v-value="d.config.semeID" @change="onSemeIDChange($event)">
            <option value="231">2-3岁上学期</option>
            <option value="232">2-3岁下学期</option>
            <option value="341">3-4岁上学期</option>
            <option value="342">3-4岁下学期</option>
            <option value="451">4-5岁上学期</option>
            <option value="452">4-5岁下学期</option>
            <option value="561">5-6岁上学期</option>
            <option value="562">5-6岁下学期</option>
            <option value="300">拼读训练</option>
            <option value="200">无尽关卡</option>
            <option value="100">测试关卡</option>
          </ui-select>
        </ui-prop>
        <ui-prop name="模板:">
          <ui-select v-value="d.config.modeID" @change="onModeIDChange($event)">
            <option value="0">不使用模板</option>
            <option value="1">拖拽模板</option>
            <option value="2">选择模板</option>
            <option value="3">连线模板</option>
            <option value="4">迷宫模板</option>
            <option value="5">翻页拖拽模板</option>
            <option value="6">翻页选择模板</option>
            <option value="7">运笔模板</option>
            <option value="8">演示模板</option>
            <option value="9">翻页演示模板</option>
            <option value="10">翻页连线模板</option>
            <option value="11">无尽记忆模板</option>
            <option value="12">无尽选择模板</option>
            <option value="13">无尽赛车模板</option>
            <option value="14">无尽对对碰模板</option>
            <option value="15">无尽打地鼠模板</option>
            <option value="16">无尽汉字翻牌模板</option>
            <option value="17">接汉字模板</option>
          </ui-select>
        </ui-prop>
        </div>
        <div class="layout horizontal start-justified">
        <ui-prop name="课程">
          <ui-input v-value="d.config.gameID" placeholder="请输入课程"></ui-input>
        </ui-prop>
        <ui-prop name="关卡">
          <ui-input v-value="d.config.partID" placeholder="请输入关卡"></ui-input>
        </ui-prop>
        <ui-prop name="汉字">
          <ui-input v-value="d.config.word" placeholder="请输入汉字" @change="onWordChange"></ui-input>
          <ui-prop id="wordCode" name=""></ui-prop>
        </ui-prop>
        </div>
      </ui-box-container>
      <ui-box-container>
      <div class="layout horizontal around-justified">
      <ui-button id="in" @confirm="onImportConfirm" class="green">导入关卡</ui-button>
        <ui-button id="out" @confirm="onOutConfirm" class="red">导出关卡</ui-button>
        <ui-button id="save" @confirm="onSaveGameConfirm" class="blue">保存关卡</ui-button>
        <ui-button id="inBg" @confirm="onInBgAni" class="red">导入背景动画</ui-button>
        <ui-button id="saveBg" @confirm="onOutBgAni" class="green">保存背景动画</ui-button>
      </div>
      <hr />
      <div class="layout horizontal around-justified">
      <ui-prop name="页数">
          <ui-select v-value="d.config.guidePage" @change="onGuidePageChange($event)">
            <option value="1">第1页</option>
            <option value="2">第2页</option>
            <option value="3">第3页</option>
            <option value="4">第4页</option>
            <option value="5">第5页</option>
            <option value="6">第6页</option>
            <option value="7">第7页</option>
            <option value="8">第8页</option>
            <option value="9">第9页</option>
            <option value="10">第10页</option>
          </ui-select>
        </ui-prop>
      <ui-button id="in" @confirm="onGuideImport" class="green">导入引导</ui-button>
        <ui-button id="out" @confirm="onGuideOut" class="red">导出引导</ui-button>
        <ui-button id="save" @confirm="onSaveGuide" class="blue">保存引导</ui-button>
        <ui-button id="play" @confirm="onPlayGuide" class="red">播放引导</ui-button>
        <ui-button id="pause" @confirm="onPauseGuide" class="blue">暂停引导</ui-button>
        <ui-button id="reset" @confirm="onResetGuide" class="green">重置引导</ui-button>
        <ui-button id="nodePlay" @confirm="onPlayNodeGuide" class="red">单独播放</ui-button>
      </div>
      </ui-box-container>
      <ui-box-container>
      <div class="layout horizontal around-justified">
        <ui-button id="in" @confirm="onTeacherImport" class="green">导入讲解</ui-button>
        <ui-button id="out" @confirm="onTeacherOut" class="red">导出讲解</ui-button>
        <ui-button id="out" @confirm="onTeacherSave" class="red">保存讲解</ui-button>
      </div>
       </ui-box-container>
    </div>
  `,

    // element and variable binding
    $: {},

    // method executed when template and styles are successfully loaded and initialized
    ready() {
        const fs = require('fs');
        let temp = Editor.Project.path + '/temp/temp_game_edit_config.json';
        let configPath = temp;
        if (!fs.existsSync(temp)) {
            // read default config
            configPath = Editor.url('packages://cc-ext-scene-menu/temp_game_edit_config.json');
        }
        let saveConfig = () => {
            let data = JSON.stringify(_config, null, 4);
            fs.writeFile(temp, data, function (err) {
                if (err) {
                    Editor.log('保存当前导出记录失败：' + err);
                    return;
                }
            });
        };

        let initWindow = (config) => {
            _config = config;
            _config.guidePage = 1
            new window.Vue({
                el: this.shadowRoot,
                data: {
                    d: {
                        config: _config,
                        loaded: true,
                    }
                },
                methods: {
                    onImportConfirm(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'importGame', _config, (err) => {
                            if (err) Editor.error(err);
                        });

                    },
                    onOutConfirm(e) {
                        saveConfig();
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'outGameJson', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onSaveGameConfirm(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'saveGameJson', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onWordChange(e) {
                        e.target.parentElement.getElementsByTagName("ui-prop")[0].name = _config.word ? _config.word.charCodeAt() : ''
                    },
                    onInBgAni(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'inBgAni', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onOutBgAni(e) {
                        saveConfig();
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'outBgAni', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onTypeChange(e) {
                        Editor.log(`导入关卡选择的版本: ${_config.gameType}`)
                    },
                    onSemeIDChange(e) {
                        Editor.log(`导入关卡选择的学期: ${_config.semeID}`)
                    },
                    onModeIDChange(e) {
                        Editor.log(`导入关卡选择的模板: ${_config.modeID}`)
                    },
                    onGuideImport(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'guideImport', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onGuideOut(e) {
                        saveConfig();
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'guideOut', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onSaveGuide(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'savaGuide', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onPlayGuide(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'playGuide', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onPauseGuide(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'pauseGuide', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onResetGuide(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'resetGuide', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onGuidePageChange(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'guidePageChange', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onPlayNodeGuide(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'playNodeGuide', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onTeacherImport(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'teacherImport', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onTeacherOut(e) {
                        saveConfig();
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'teacherOut', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                    onTeacherSave(e) {
                        Editor.Scene.callSceneScript('cc-ext-scene-menu', 'savaTeacher', _config, (err) => {
                            if (err) Editor.error(err);
                        }, 20000);
                    },
                }
            });
        };

        fs.readFile(configPath, function (err, data) {
            if (err) {
                // file not exists
                initWindow([]);
                return;
            }

            let config = [];
            try {
                config = JSON.parse(data);
                // Editor.log(`index.js read data: ${data}`);
            } catch (err) {

            } finally {
                initWindow(config);
            }
        });
    },

    // register your ipc messages here
    messages: {}
});