/**
 *  自定义控件书写模板
 */
(function (KDApi, $) {
    // 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
    function DeptRankBookInadvancedDays(model) {
        this._setModel(model)
    }

    // 原型中封装生命周期函数，固定格式
    var isUpdate = false;
    DeptRankBookInadvancedDays.prototype = {
        _setModel: function (model) {
            this.model = model
        },
        init: function (props) {
            isUpdate = false;
            setHtml(this.model, props, isUpdate)
        },
        update: function (props) {
            isUpdate = true;
            setHtml(this.model, props, isUpdate)
        },
        destoryed: function () {
        }
    }

    var setHtml = function (model, props, isUpdate) {
        var jsPath = ["./css/tripboard.css"];
        KDApi.loadFile(jsPath, model, function () {
            if (isUpdate && props.data && props.data.bookInAdvancedDays.others.length > 0) {
                KDApi.templateFilePath('./html/container_bookinadvance.html', model, {}).then(
                    function (result) {
                        model.dom.innerHTML = result;
                        loadData(model, props);
                    }
                )
            } else {
                KDApi.templateFilePath('./html/container_bookinadvance.html', model, {}).then(
                    function (result) {
                        model.dom.innerHTML = result;
                        var chartSelector = `[data-pid="${model.pageId}"] #dept-rank-bookinadvanceddays-table-container, [pageid="${model.pageId}"] #dept-rank-bookinadvanceddays-table-container`;
                        var emptySelector = `[data-pid="${model.pageId}"] .kd-cq-empty-bookinadvanceddays,[pageid="${model.pageId}"] .kd-cq-empty-bookinadvanceddays`;
                        var chartDom = document.querySelector(chartSelector);
                        var emptyDom = document.querySelector(emptySelector);
                        var noDataDom = document.createElement("span");
                        noDataDom.className='kd-cq-empty-description';
                        noDataDom.setAttribute("style","margin-top:8px;color:#666");
                        noDataDom.textContent=KDApi.getLangMsg(model, 'DeptRank_Bookinadvance_No_Data');
                        emptyDom.appendChild(noDataDom);
                        emptyDom.setAttribute("style", "display:block;text-align:center;mix-blend-mode:multiply;");
                        chartDom.setAttribute("style", "display:none");
                    }
                )
            }

        })
    }


    function createTable(others, model) {
        var chartSelector = `[data-pid="${model.pageId}"] #dept-rank-bookinadvanceddays-table-container, [pageid="${model.pageId}"] #dept-rank-bookinadvanceddays-table-container`;
        var emptySelector = `[data-pid="${model.pageId}"] .kd-cq-empty-bookinadvanceddays,[pageid="${model.pageId}"] .kd-cq-empty-bookinadvanceddays`;
        var content = document.querySelector(chartSelector);
        var emptyDom = document.querySelector(emptySelector);
        emptyDom.setAttribute("style", "display:none");
        content.setAttribute("style", "display:block;");
        var tableSelector = `[data-pid="${model.pageId}"] #dept-rank-bookinadvanceddays-innertable,[pageid="${model.pageId}"] #dept-rank-bookinadvanceddays-innertable`;
        var table = document.querySelector(tableSelector);


        table.innerHTML = `
                <thead>
                    <tr>
                        <th>` + KDApi.getLangMsg(model, 'DeptRank_Bookinadvance_rank') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'DeptRank_Bookinadvance_dept') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'DeptRank_Bookinadvance_days') + `</th>
                       
                    </tr>
                </thead>
                <tbody>
                    ${others.map(item => `
                        <tr>
                            <td title=${item.rank}>${item.rank}</td>
                            <td title=${item.deptName}>${item.deptName}</td>
                            <td title=${item.bookinadvanceddays}>${item.bookinadvanceddays}</td>
                            
                        </tr>
                    `).join('')}
                </tbody>
            `;
        content.appendChild(table);
        return content;
    }


    var loadData = function (model, props) {
        var contentSelector = `[data-pid="${model.pageId}"] #dept-rank-bookinadvanceddays-content,[pageid="${model.pageId}"] #dept-rank-bookinadvanceddays-content`;
        var content = document.querySelector(contentSelector);
        var parentNode = content.parentNode;
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        console.log("浏览器宽度:" + parentNode.clientHeight * 0.3 * 0.95);
        content.style.width = w * 0.3 + "px";
        content.style.height = h * 0.3 + "px";
        // const rankingContainer = createRankingContainer(props.data.bookInAdvancedDays.top3);
        const table = createTable(props.data.bookInAdvancedDays.others, model);

        //  content.appendChild(rankingContainer);
        content.appendChild(table);

    }

    // 你只需知道第一个参数是你接下来要新增控件方案时填的方案id，第二个参数是上面声明的构造函数
    KDApi.register('kingdee-fi-deptrank-bookinadvance', DeptRankBookInadvancedDays, {isMulLang: true})
})(window.KDApi) // 这里的jQuery不是必须要传进去的，可移除，要用到的时候才传，PC端系统默认会有jQuery对象，版本是1.12.4