import tinymce from "tinymce/tinymce";

let getAlt;
let getSrc;
let getHeight;
let getWidth;
let getLists;

function SRCString (node) {
    let str = node.src
    return str;
}
function ALTString (node) {
    let str = node.alt
    return str;
}
function Width (node) {
    let str = node.width
    return str;
}
function Height (node) {
    let str = node.height
    return str;
}
function lists (node) {
    let html = '';
    node.forEach(ele=>{
        html += `<img src="${ele}" alt="假装有图" style="width: 33%;height:auto;padding: 10px">`
    })
    return html;
}

function clickImg (){
    let toclick = document.getElementById('gallery').getElementsByTagName('img');
    for (let i = 0; i < toclick.length; i++) {
        toclick[i].addEventListener('click',function (e) {
            getSrc = e.target.src;
            let imgSrc = document.getElementById('img');
            imgSrc.src = getSrc
        },false)
    }
}

function dialog (){
    return {
        title: '图片',
        size:'large',
        body: {
            type: 'panel',
            items: [
                {
                    type: 'bar',
                    items: [
                        {
                            type: 'input',
                            name: 'desdata',
                            label: '图片描述'
                        },
                        {
                            type: 'sizeinput',
                            name: 'size',
                            label: 'Dimensions'
                        }
                    ]
                },
                {
                    type: 'htmlpanel',
                    html: `<div style="display: flex;max-height: 450px;overflow-y: scroll">
                              <div style="width: 400px;">
                                 <img id="img" src="${getSrc}" alt="假装有图" style="width: 400px;min-width: 400px">
                              </div>
                              <div style="flex:auto;min-width: 400px;max-height:450px;height: auto;border: 1px solid rgba(0,0,0,0.5);margin: 0 20px">
                                  <div id="gallery" style="display: flex;justify-content: space-between;flex-wrap:wrap;width: 100%;height: 100%;overflow-y: scroll">
                                      <img src="${getSrc}" alt="" style="width: 33%;padding: 10px">
                                      <img src="${getSrc}" alt="" style="width: 33%;height: auto;padding: 10px">                                    
                                      ${getLists}
                                  </div>
                              </div>
                          <div>`
                },
            ]
        },
        buttons: [
            {
                type: 'cancel',
                name: 'closeButton',
                text: '取消'
            },
            {
                type: 'submit',
                name: 'submitButton',
                text: '保存',
                primary: true
            }
        ],
        initialData: {
            desdata:`${getAlt}`,
            size:{
                width: `${getWidth}`,
                height: `${getHeight}`,
            },
        },
        onSubmit: function (api) {
            var data = api.getData();
            tinymce.activeEditor.execCommand('mceInsertContent', false, `<img src="${getSrc}" alt="${data.desdata}" style="width: ${data.size.width}px;height: ${data.size.height}px;">`);
            api.close();
        },
    }
}

tinymce.PluginManager.add("imgdialog", function(editor) {

    editor.ui.registry.addMenuItem("imgdialog", {
        icon: 'image',
        text: "图片管理",
        onAction: function () {

            getAlt = ALTString(editor.selection.getNode());
            getSrc = SRCString(editor.selection.getNode());
            getHeight = Height(editor.selection.getNode());
            getWidth = Width(editor.selection.getNode());
            getLists = lists(['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg']);

            editor.windowManager.open(dialog())

            clickImg();
        }
    });

    //只有选中图片，右击时才会出现弹窗按钮
    editor.ui.registry.addContextMenu('imgdialog', {
      update: function (element) {
          return !element.src ? '' : 'imgdialog';
      }
    });
});