"use strict";

import {util} from "../../../../util/util.js";
import {khcToastr} from "../../../../component/alert/khcToastr.js";

class componentList {
    constructor(data) {
        this.data = data;
        //给当前对象创建一个id，同时该id也是对象的domid
        this.eleID = util.getUUID();
        this.objID = this.eleID + 'div';
    }
    remove() {
        $('#' + this.objID).remove();
    }
    getData() {
        return this.data;
    }
    getObjID() {
        return this.objID;
    }
    render(renderParentID) {
        let that=this;
        let html='<div id="'+that.objID+'" class="sidenav sidenav-vertical bg-white mb-4 sidenav-no-animation" style="height: 800px">';
        html+='<ul class="sidenav-inner py-3 ps ps--active-y">'
        for(let j=0;j< that.data.dataList.length;j++){
            html+=`<li class="sidenav-item" id="${that.data.dataList[j].clickEvent}">
                <span style="cursor:pointer"  class="sidenav-link">
                    <i class="sidenav-icon ${that.data.dataList[j].icon}"></i>
                    <div>${that.data.dataList[j].label}</div>
                </span>
            </li>`
        }
        html+=`    <div class="ps__rail-x" style="left: 0px; bottom: -26px;">
                <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;">
                </div>
                </div>
            </ul>
        </div>`
        $('#' + renderParentID).html(html);
    }
    addClickEvent(formBuildObj){
        let that=this;
        for(let j=0;j< that.data.dataList.length;j++){
            let sourceElement = document.getElementById(that.data.dataList[j].clickEvent);
            sourceElement.addEventListener('click',function (){
                if(formBuildObj[that.data.dataList[j].clickEvent]==undefined){
                    khcToastr.showWarningMessage('该功能正在开发中，敬请期待！')
                    return
                }
                formBuildObj[that.data.dataList[j].clickEvent]();
            })


            sourceElement.setAttribute('draggable', 'true');  // 设置为可拖动

            sourceElement.addEventListener('dragstart', function (event) {
                // 设定拖动数据：这里同时传递文本和 id
                event.dataTransfer.setData('text/plain', that.data.dataList[j].clickEvent);  // 保存 clickEvent ID
                event.dataTransfer.effectAllowed = 'move'; // 设置拖动效果为移动
            });

            // 处理拖动进入目标区域时的样式变化
            sourceElement.addEventListener('dragover', function (event) {
                event.preventDefault(); // 阻止默认行为，允许放置
                event.dataTransfer.dropEffect = 'move'; // 设置放置效果
            });
        }

        let targetElement = document.getElementById(formBuildObj.data.buildFormStartDivID);

        // 处理拖动进入目标区域
        targetElement.addEventListener('dragover', (event) => {
            event.preventDefault(); // 必须阻止默认行为
            event.dataTransfer.dropEffect = 'move'; // 设置放置效果
        });

        // 处理放置事件，目标区域内容累计
        targetElement.addEventListener('drop', (event) => {
            event.preventDefault();
            const clickEvent = event.dataTransfer.getData('text/plain');
            if(formBuildObj[clickEvent]==undefined){
                khcToastr.showWarningMessage('该功能正在开发中，敬请期待！')
                return
            }
            formBuildObj[clickEvent]();

            targetElement.classList.remove('dropzone');
        });

        // 拖动元素进入目标区域时，添加样式
        targetElement.addEventListener('dragenter', () => {
            targetElement.classList.add('dropzone');
        });

        // 拖动元素离开目标区域时，移除样式
        targetElement.addEventListener('dragleave', () => {
            targetElement.classList.remove('dropzone');
        });

    }
}
export { componentList }