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

    // 原型中封装生命周期函数，固定格式
    var isUpdate = false;
    OrgNotReimbursedOrder.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.others.length > 0) {
                KDApi.templateFilePath('./html/container_org_reimbursed_order.html', model, {}).then(
                    function (result) {
                        model.dom.innerHTML = result;
                        loadData(model, props);
                    }
                )
            } else {
                KDApi.templateFilePath('./html/container_org_reimbursed_order.html', model, {}).then(
                    function (result) {
                        model.dom.innerHTML = result;
                        var chartSelector = `[data-pid="${model.pageId}"] #org-reimbursed-order-table-container, [pageid="${model.pageId}"] #org-reimbursed-order-table-container`;
                        var emptySelector = `[data-pid="${model.pageId}"] .kd-cq-empty-org-reimbursed-order,[pageid="${model.pageId}"] .kd-cq-empty-org-reimbursed-order`;
                        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, 'NotReimbursedOrder_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}"] #org-reimbursed-order-table-container, [pageid="${model.pageId}"] #org-reimbursed-order-table-container`;
        var emptySelector = `[data-pid="${model.pageId}"] .kd-cq-empty-org-reimbursed-order,[pageid="${model.pageId}"] .kd-cq-empty-org-reimbursed-order`;
        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}"] #notreimbursedorderinnertable, [pageid="${model.pageId}"] #notreimbursedorderinnertable`;
        var table = document.querySelector(tableSelector);

        table.innerHTML = `
                <thead>
                    <tr>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_rank') + ` </th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_userName') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_userNo') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_orderType') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_orderNum') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_bookDate') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_useDate') + `</th>
                        <th>` + KDApi.getLangMsg(model, 'NotReimbursedOrder_amount') + `</th>
                    </tr>
                </thead>
                <tbody>
                    ${others.map(item => `
                        <tr>
                            <td title=${item.rank}>${item.rank}</td>
                            <td title=${item.userName}>${item.userName}</td>
                            <td title=${item.userNum}>${item.userNum}</td>
                            <td title=${item.type}>${item.type}</td>
                            <td title=${item.orderNum}>${item.orderNum}</td>
                            <td title=${item.bookDate}>${item.bookDate}</td>
                            <td title=${item.useDate}>${item.useDate}</td>
                            <td title=${item.totalAmount}>${item.totalAmount}</td>
                        </tr>
                    `).join('')}
                </tbody>
            `;
        content.appendChild(table);

        var speed = 1000;
        var scrollTableSelector = `[data-pid="${model.pageId}"] #notreimbursedorderinnertable tbody, [pageid="${model.pageId}"] #notreimbursedorderinnertable tbody`;
        var scrollTable = document.querySelector(scrollTableSelector);
        var rowHeight = scrollTable.rows[0].offsetHeight;
        var currentScrollTop = 0;

        function Marquee() {

            var topRow = scrollTable.rows[0].cloneNode(true);
            scrollTable.appendChild(topRow);
            scrollTable.deleteRow(0);
            scrollTable.scrollTop = rowHeight;
        }

        var MyMar = setInterval(Marquee, speed);

        scrollTable.ontouchstart = function () {
            clearInterval(MyMar);
        }

        scrollTable.ontouchend = function () {
            MyMar = setInterval(Marquee, speed);
        }
        return content;
    }


    var loadData = function (model, props) {
        var contentSelector = `[data-pid="${model.pageId}"] #org_reimbursed_order, [pageid="${model.pageId}"] #org_reimbursed_order`;
        var content = document.querySelector(contentSelector);

        const 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.height = h * 0.4 + "px";

        const table = createTable(props.data.others, model);


        content.appendChild(table);

    }

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