"use strict";
import {util} from "../../util/util.js";
import {httpUtil} from "../../util/httpUtil.js";
import {fullMap} from "../../fullMap.js";
import {khcToastr} from "../alert/khcToastr.js";
import {config} from "../../config.js";

class nav{
    constructor(data) {
        this.eleID = util.getUUID();
        this.objID = util.getUUID() + 'div';
        this.parentObjID = data.parentObjID;
        this.code=data.navCode.code;
        this.navCode=data.navCode;
        this.componentName = this.code.componentName;
    }
    init(){
        let that=this;
        return new Promise((resolve, reject) => {
            this.componentMap = new Map();//存储组件信息
            let col=that.navCode.code.col;
            let htmlTemplate=`<div id="${that.objID}" 
            class="col-${!util.isNull(col)?col*2:'12'} col-xl-${!util.isNull(col)?col:'12'}"
            style="margin-bottom:20px;">
            <div style="padding-left: 1rem;padding-right: 1rem;" class="card">
            <h6 class="card-header with-elements">
            <div class="card-header-title" id="${that.objID}title"></div>
            <div class="card-header-elements ml-auto"></div>
            </h6>
            <div class="card-datatable table-responsive mt- pl-2 pr-2" style="padding: 1rem;">
            <div id="${that.objID}nav" style="width:100%;" class="app-main row"></div>
            </div>
            </div>
            </div>`;
            //上面的是有card包起来和simplecard一起展示不美观，暂时先不使用card渲染
            htmlTemplate=`<div id="${that.objID}" 
            class="col-${!util.isNull(col)?col*2:'12'} col-xl-${!util.isNull(col)?col:'12'}">
            <div>
            <div class="card-header-title d-none" id="${that.objID}title"></div>
            <div>
            <div id="${that.objID}nav" class="row"></div>
            </div>
            </div>
            </div>`;
            document.getElementById(that.parentObjID).insertAdjacentHTML("beforeEnd", htmlTemplate);
            resolve();
        })
    }
    render(){
        let that=this;
        that.init().then(()=>{
            that.refreshNav();
        })
    }
    refreshNav(value){
        let that=this;
        that.radioValue=value;
        let params = { version: '1.0.0', dsCode: 'ds_quick_nav',queryCode:'query_quick_nav', methodName: 'getNavInfo',value:value }
        params.navCode=that.code.navCode;
        let obj={url:config.getConfigJson().myActionUrl,params:params}
        return httpUtil.post(obj, (response)=>{
            that.navInfo=response.data.data.navInfo;
            that.setTitle(that.navInfo.nav_title)
            that.setNavItems(that.navInfo.navItems)
        })
    }
    setTitle(title){
        let that=this;
        document.getElementById(that.objID+'title').innerText=title;
    }
    setNavItems(items){
        let that=this;
        for (let i = 0; i < items.length; i++) {
            let item=items[i]
            let col=item['col'];
            let titleFontSize=util.getFontSizeByLevel(7);
            let title=util.toOldChar(item['title']);
            let icon=item['icon'];
            let uuid=item['uuid'];
            let backgroundColor=item['background_color'];
            let divClass=`col-${!util.isNull(col)?col*2:'12'} col-xl-${!util.isNull(col)?col:'12'}`;
            let layoutInfo=item['layout_info']
            if(util.isNull(layoutInfo)){
                //自定义模板复制下面HTML内容修改即可
                let htmlTemplate=`
            <div name="${uuid}" class="${divClass}">
                <div class="card" style="margin-bottom: 20px;">
                    <div class="card-body pt-3 pb-3" style="background-color: ${backgroundColor};cursor:pointer;">
                        <div class="d-flex align-items-center">
                            <div style="margin-top: 8px;"><div class="${icon}" style="color: rgb(2, 188, 119);"></div></div>
                            <div class="ml-3">
                                <div class="text-muted small" style="font-size: ${titleFontSize}"></div>
                                <div class="text-large">
                                    <span style="font-size: 18px;font-weight: 600;">${title}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
                document.getElementById(`${that.objID}nav`).insertAdjacentHTML("beforeEnd", htmlTemplate);
            }else{
                layoutInfo=layoutInfo.replace('${titleFontSize}', titleFontSize);
                layoutInfo=layoutInfo.replace('${title}', title);
                layoutInfo=layoutInfo.replace('${icon}', icon);
                layoutInfo=layoutInfo.replace('${uuid}', uuid);
                layoutInfo=layoutInfo.replace('${backgroundColor}', backgroundColor);
                layoutInfo=layoutInfo.replace('${divClass}', divClass);
                layoutInfo=util.toOldChar(layoutInfo);
                document.getElementById(`${that.objID}nav`).insertAdjacentHTML("beforeEnd", layoutInfo);
            }
            document.getElementById(`${that.objID}nav`).querySelector(`[name="${item['uuid']}"]`).addEventListener('click',()=>{
                let url=item.url;
                url=url.replace('${indexUrl}', config.getIndexUrl());
                window.location.href=url;
            })
        }
    }
}
export {nav}