<template>
    <div>
        <div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
        <el-dialog title="添加块" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form label-position="top" label-width="80px" :model="formLabelAlign">
                <el-form-item label="变量名">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addBlockEvent">添 加</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Blockly from 'blockly';
import * as Ch from 'blockly/msg/zh-hans';
Blockly.setLocale(Ch);
export default {
    data() {
        return {
            workspace: null,
            dialogVisible: false,
            toolboxXml: `<xml  style="height: 100%">
             <category name="创建" custom="CREATE_TYPED_VARIABLE"></category>
          </xml>`,
            formLabelAlign: {
                name: ''
            }
        }
    },
    mounted() {
        this.workspace = Blockly.inject('blocklyDiv', { toolbox: this.toolboxXml });
        this.registerToolboxCategory();

    },
    methods: {
        // 注册工具箱
        registerToolboxCategory() {
            this.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
            this.registerButton();
        },
        // 注册工具箱内按钮
        registerButton() {
            this.workspace.registerButtonCallback('ADD_VAR_BLOCK', this.buttonClickCallbackEvent);
        },
        // 工具箱内按钮生成
        createFlyout(workspace) {
            let xmlList = [];
            const button = document.createElement('button');
            button.setAttribute('text', '添加变量块');
            button.setAttribute('callbackKey', 'ADD_VAR_BLOCK');
            xmlList.push(button);
            const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
            xmlList = blockList.concat(xmlList);
            return xmlList;
        },
        // 按钮点击事件
        buttonClickCallbackEvent(e) {
            this.dialogVisible = true;
        },
        // 点击添加
        addBlockEvent() {
            let name = this.formLabelAlign.name;
            this.createVariable(name)
        },
        // 创建变量块
        createVariable(name) {
            let [text, type, msg] = [this.getValidInput(name), '', ''];
            if (text) {
                const existing = Blockly.Variables.nameUsedWithAnyType(text, this.workspace);
                if (existing) {
                    if (existing.type === type) {
                        msg = Blockly.Msg['VARIABLE_ALREADY_EXISTS'].replace('%1', existing.name);
                    } else {
                        msg = Blockly.Msg['VARIABLE_ALREADY_EXISTS_FOR_ANOTHER_TYPE'];
                        msg = msg.replace('%1', existing.name).replace('%2', this.getDisplayName(existing.type));
                    }
                    this.$message({ message: msg, type: 'warning' })
                } else {
                    this.workspace.createVariable(text, type);
                }
            }
            if (!msg) {
                this.workspace.createVariable(text, type);
                this.dialogVisible = false;
            }
        },
        // 类型判断
        getDisplayName(type) {
            for (let i = 0; i < this.types_.length; i++) {
                const typeNames = this.types_[i];
                if (type === typeNames[1]) {
                    return typeNames[0];
                }
            }
            return '';
        },
        // 获取名称
        getValidInput(newVar) {
            if (newVar) {
                newVar = newVar.replace(/[\s\xa0]+/g, ' ').trim();
                if (newVar === Blockly.Msg['RENAME_VARIABLE'] ||
                    newVar === Blockly.Msg['NEW_VARIABLE']) {
                    newVar = null;
                }
            }
            return newVar;
        },

    }
}
</script>
<style>
.blockly-contant /deep/ .el-dialog {
    text-align: left !important;
}
</style>