<template>
    <div class="minder-editor-container">
        <div class="quickbar">
            <Tooltip placement="top" theme="light">
                <i class="ft icon" :title="$L('缩放')">&#xE7B3;</i>
                <div slot="content">
                    <ul class="quickul">
                        <li @click="minder.execCommand('Zoom', 200)">200%</li>
                        <li @click="minder.execCommand('Zoom', 150)">150%</li>
                        <li @click="minder.execCommand('Zoom', 100)">100%</li>
                        <li @click="minder.execCommand('Zoom', 50)">50%</li>
                        <li @click="minder.execCommand('Zoom', 25)">25%</li>
                    </ul>
                </div>
            </Tooltip>
            <Tooltip placement="top" theme="light">
                <i class="ft icon" :title="$L('图形')">&#xE621;</i>
                <div slot="content">
                    <ul class="quickul mold">
                        <li @click="minder.execCommand('template', 'default')"><span class="default"></span></li>
                        <li @click="minder.execCommand('template', 'structure')"><span class="structure"></span></li>
                        <li @click="minder.execCommand('template', 'filetree')"><span class="filetree"></span></li>
                        <li @click="minder.execCommand('template', 'right')"><span class="right"></span></li>
                        <li @click="minder.execCommand('template', 'fish-bone')"><span class="fish-bone"></span></li>
                        <li @click="minder.execCommand('template', 'tianpan')"><span class="tianpan"></span></li>
                    </ul>
                </div>
            </Tooltip>
            <Tooltip placement="top" theme="light">
                <i class="ft icon" :title="$L('样式')">&#xE678;</i>
                <div slot="content">
                    <ul class="quickul">
                        <li @click="minder.execCommand('theme', 'fresh-blue')">{{$L('天空蓝')}}</li>
                        <li @click="minder.execCommand('theme', 'wire')">{{$L('线框')}}</li>
                        <li @click="minder.execCommand('theme', 'fish')">{{$L('鱼骨图')}}</li>
                        <li @click="minder.execCommand('theme', 'classic')">{{$L('脑图经典')}}</li>
                        <li @click="minder.execCommand('theme', 'classic-compact')">{{$L('紧凑经典')}}</li>
                        <li @click="minder.execCommand('theme', 'snow')">{{$L('温柔冷光')}}</li>
                        <li @click="minder.execCommand('theme', 'snow-compact')">{{$L('紧凑冷光')}}</li>
                        <li @click="minder.execCommand('theme', 'tianpan')">{{$L('经典天盘')}}</li>
                        <li @click="minder.execCommand('theme', 'tianpan-compact')">{{$L('紧凑天盘')}}</li>
                    </ul>
                </div>
            </Tooltip>
            <Tooltip placement="top" theme="light">
                <i class="ft icon" :title="$L('折叠')">&#xE779;</i>
                <div slot="content">
                    <ul class="quickul">
                        <li @click="minder.execCommand('ExpandToLevel', 1)">{{$L('展开到一级节点')}}</li>
                        <li @click="minder.execCommand('ExpandToLevel', 2)">{{$L('展开到二级节点')}}</li>
                        <li @click="minder.execCommand('ExpandToLevel', 3)">{{$L('展开到三级节点')}}</li>
                        <li @click="minder.execCommand('ExpandToLevel', 4)">{{$L('展开到四级节点')}}</li>
                        <li @click="minder.execCommand('ExpandToLevel', 5)">{{$L('展开到五级节点')}}</li>
                        <li @click="minder.execCommand('ExpandToLevel', 99)">{{$L('展开全部节点')}}</li>
                    </ul>
                </div>
            </Tooltip>
            <Tooltip placement="top" :content="$L('居中')">
                <div @click="minder.execCommand('camera', minder.getRoot(), 600)"><i class="ft icon">&#xE61F;</i></div>
            </Tooltip>
            <Tooltip placement="top" :content="$L('移动')">
                <div @click="[minder.execCommand('Hand'),isHand=!isHand]"><i class="ft icon" :class="{active:isHand}">&#xE6CF;</i></div>
            </Tooltip>
            <Tooltip placement="top" :content="$L('导出PNG图片')">
                <div @click="exportHandle(0)"><Icon type="md-photos"/></div>
            </Tooltip>
        </div>
        <div :id="id"></div>
    </div>
</template>

<style lang="less" scoped>
    .basebtn {
        color: #fff;
        background-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 4px;
    }

    .baseSelect {
        height: 32px;
        option {
            min-height: 1.5em;
        }
    }

    .quickbar {
        position: fixed;
        left: 20px;
        bottom: 20px;
        height: 34px;
        border-radius: 3px;
        box-shadow: 3px 3px 10px rgba(0,0,0,.2);
        background-color: #fff;
        color: #666;
        z-index: 10;
        display: flex;
        padding: 0 6px;
        align-items: center;
        i {
            font-size: 22px;
            width: 34px;
            height: 34px;
            line-height: 34px;
            display: block;
            text-align: center;
            transform: scale(1);
            cursor: pointer;
            padding: 0;
            color: #666666;
            &:hover {
                color: #232323;
            }
            &.active {
                color: #0285d7;
            }
        }
        .quickul {
            li {
                cursor: pointer;
                padding: 8px 0;
                &:hover {
                    color: #0285d7
                }
            }
            &.mold {
                span {
                    display: block;
                    width: 30px;
                    background: url(data:image/png;base64, ) no-repeat;background-size: 300px 24px;
                    height: 30px;
                    &.default {
                        background-position: 0 3px
                    }
                    &.structure {
                        background-position: -30px 3px
                    }
                    &.filetree {
                        background-position: -60px 3px
                    }
                    &.right {
                        background-position: -90px 3px
                    }
                    &.fish-bone {
                        background-position: -120px 3px
                    }
                    &.tianpan {
                        background-position: -150px 3px
                    }
                }
            }
        }
    }
</style>
<script>
    const Editor = require('vue-kityminder-gg/src/editor');
    import {generateMixed} from 'vue-kityminder-gg/src/utils/index.js';
    import 'vue-kityminder-gg/examples/styles/minder.css';
    import JSPDF from 'jspdf';

    export default {
        name: 'mind-editor',
        props: {
            value: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            AccessKey: {
                type: String,
                default: ''
            },
            SecretKey: {
                type: String,
                default: ''
            },
            Domain: {
                type: String,
                default: ''
            },
            scope: {
                type: String,
                default: ''
            },
            isImageUpload: {
                type: Boolean,
                default: true
            },
            saveShow: {
                type: Boolean,
                default: true
            },
            id: {
                type: String,
                default: 'minder-component-' + generateMixed(12)
            },
        },
        data() {
            return {
                minder: null,
                isHand: false,
            };
        },
        methods: {
            exportHandle(n) {
                if (n === 0) {
                    this.minder.exportData('png').then((content) => {
                        let element = document.createElement('a');
                        element.setAttribute('href', content);
                        let filename = this.value.root.data.text || this.$L('无标题');
                        element.setAttribute('download', filename);
                        element.style.display = 'none';
                        document.body.appendChild(element);
                        element.click();
                        document.body.removeChild(element);
                    });
                } else if (n === 1) {
                    this.minder.exportData('png').then((content) => {
                        var doc = new JSPDF();
                        doc.addImage(content, 'PNG', 0, 0, 0, 0);
                        doc.save(`${this.value.root.data.text || this.$L('无标题')}.pdf`);
                    });
                }
            },
            rendData() {
                this.$nextTick(() => {
                    setTimeout(() => {
                        if (this.minder !== null) {
                            return;
                        }
                        this.minder = window.editor = new Editor(document.getElementById(this.id)).minder;
                        this.minder.importJson(this.value);
                        this.$emit('minderHandle', this.minder);
                        this.minder.on('contentchange', val => {
                            this.$emit('input', this.minder.exportJson());
                        });
                    }, 300)
                });
            }
        },
        watch: {
            value: {
                handler: function (newObj) {
                    if (typeof newObj !== "object" || newObj === null) {
                        newObj = {
                            root: newObj,
                            theme: "fresh-blue",
                            template: "default",
                        };
                    }
                    if (typeof newObj.root !== "object" || newObj.root === null || newObj.root.length == 0) {
                        newObj.root = {
                            data: {
                                id: generateMixed(12),
                                text: this.$L('默认节点'),
                            },
                            children: []
                        }
                    }
                    if (typeof newObj.theme !== "string") {
                        newObj.theme = "fresh-blue";
                    }
                    if (typeof newObj.template !== "string") {
                        newObj.template = "default";
                    }
                    this.rendData();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
