{extend name="foxcms" /}

{block name="css"}
<!--<link rel="stylesheet" href="{$staticPath}css/slide_adverts.min.css" />-->
<link rel="stylesheet" href="{$staticPath}css/company_news.min.css" />
{/block}

{block name="body"}
<div class="content-container">
    <div class="operation-box">
        <input name="bcid" value="{$bcid}" type="hidden" />
        <div class="left">
        </div>
        <div class="right operation">
            <div class="fox-form-group">
                <div class="fox-form-prepend input-state">
                    <div class="fox-prepend-inner">
                        <div class="fox-select">
                            <div class="fox-select-header">
                                <input class="fox-select-input fox-size-small" readonly="readonly" placeholder="" value="状态" />
                                <i class="foxfont icon-jiantouxiangxia fox-select-icon"></i>
                            </div>
                            <ul class="fox-select-menu">
                                <li class="fox-select-item" data-id="1">
                                    状态
                                </li>
                            </ul>
                        </div>
                    </div>
                    <input class="fox-size-small" placeholder="请输入关键字" required value="" />
                </div>
            </div>
            <div class="btn-box">
                <button class="fox-solid-primary fox-size-small" name="search">搜索</button>
            </div>
        </div>
    </div>

    <div class="content-box">
        <div class="fox-table fox-table-border-bottom fox-table-hover fox-checkbox-group">
            <ul class="fox-table-thead">
                <li class="fox-table-tr">
                    <div class="fox-table-th">
                        <div class="fox-checkbox fox-checkbox-all">
                                                <span class="fox-checkbox-input">
                                                    <i class="fox-checkbox-icon"></i>
                                                    <input type="checkbox" value="" />
                                                </span>
                            <span class="fox-checkbox-label"></span>
                        </div>
                    </div>
                    <div class="fox-table-th">ID</div>
                    <div class="fox-table-th">操作人</div>
                    <div class="fox-table-th">操作备注</div>
                    <div class="fox-table-th">URL</div>
                    <div class="fox-table-th">IP地址</div>
                    <div class="fox-table-th">时间</div>
                    <div class="fox-table-th">操作</div>
                </li>
            </ul>
            <ul class="fox-table-tbody">
                <!-- 表格内容 -->
            </ul>
            <div class="table-footer">
                <div class="left">
                    <button class="fox-size-mini fox-plain-info" onclick="handleDelete()">
                        <i class="foxfont icon-shanchu1"></i>删除
                    </button>
                </div>
            </div>
        </div>
        <div id="pagination"></div>
    </div>
    {include file="footed-copy"/}
</div>
{/block}


{block name="js"}
<script>

    /**
     * 初始化数据
     * @param searchData
     */
    function init(searchData){

        foxui.loading({
            el: 'body', // 要覆盖的节点(如是 body 可不传)
            text: '', // 加载图标下的文字
            background: 'rgba(255, 255, 255, 0.9)', // 加载层的背景色
        });
        ajaxR("index","post",searchData,{"isHandoverLang":0},function (res) {
            if (res.code == 1 && res.data) {
                let data = res.data;
                let paginationData = {
                    pageSize: data.per_page,
                    total: data.total,
                    currentPage: data.current_page
                };
                initTable(paginationData, data.data);
            }
            foxui.closeLoading();
        }, function (res) {
            foxui.closeLoading();
        })
    }

    /**
     * @description: 初始化表格
     * @param {*} pageSize
     * @param {*} total
     * @param {*} currentPage
     * @param {*} dataList
     * @return {*}
     * @Date: 2022-01-12 10:55:11
     */
    function initTable({ pageSize, total, currentPage }, dataList) {
        if (dataList == undefined){
            dataList = [];
        }
        if(total == undefined){
            total = 0;
        }
        // 追加表格 html
        _appendToTable(dataList);
        // 初始化分页
        foxui.pagination({
            el: $('#pagination'),
            type: 'special',
            isShowJump: true,
            isShowTotal: true,
            isShowSize: true,
            pageSize,
            total,
            currentPage,
            pageNum: 9,
            pageChange: function (res, callback) {
                // 获取页码相关数据，添加异步请求
                const { total, pageSize, currentPage } = res;
                callback({ total, pageSize, currentPage });

                //再次查询
                let status = $('input[name="status"]').val();
                let bcid = $("input[name='bcid']").val()
                let searchData= {pageSize, currentPage, status, bcid};
                init(searchData);
            },
        });
    }


    /**
     * @description: 追加表格 html
     * @param {*} dataList
     * @return {*}
     * @Date: 2022-01-12 00:18:40
     */
    function _appendToTable(dataList) {
        const html = _trsHtml(dataList);
        $('.fox-table .fox-table-tbody').empty().append(html);
        foxui._init();
    }

    /**
     * @description: 表格 html
     * @param {*} dataList
     * @return {*}
     * @Date: 2022-01-12 00:18:52
     */
    function _trsHtml(dataList) {
        let htmlArr = [];
        dataList.forEach(item => {
            htmlArr.push(`
            <li class="fox-table-tr">
                <div class="fox-table-td">
                    <div class="fox-checkbox" data-id="${item.id}">
                        <span class="fox-checkbox-input">
                            <i class="fox-checkbox-icon"></i>
                            <input type="checkbox" value="" />
                        </span>
                        <span class="fox-checkbox-label"></span>
                    </div>
                </div>
                <div class="fox-table-td">${item.id}</div>
                <div class="fox-table-td">
                    <span>${item.username}</span>
                </div>
                <div class="fox-table-td">${item.remark}</div>
                <div class="fox-table-td" style="display: block; word-wrap: break-word;">${item.url}</div>
                <div class="fox-table-td">${item.ip}</div>
                <div class="fox-table-td">${item.create_time}</div>
                <div class="fox-table-td">
                    <button class="fox-size-mini fox-text-primary btn-delete" onclick="handleDelete(${item.id})">删除</button>
                </div>
            </li>
        `);
        });
        return htmlArr.join('');
    }


    //运行表格初始化
    let bcid = $("input[name='bcid']").val();
    let datas = {
        "bcid": bcid
    };
    init(datas);

    //搜索
    $("button[name='search']").on('click', function() {
        let status = $('input[name="status"]').val();
        let bcid = $("input[name='bcid']").val()
        let datas = {
            "status": status,
            "bcid": bcid
        };
        init(datas);
    });

    //重置
    $("button[name='reset']").on('click', function() {
        $('input[name="status"]').val("");
        $('input[name="title"]').val("");
    });


    //批量删除
    function handleDelete(id) {
        let idList = [];
        if(!id){
            const checkboxs = $('.fox-table').find('.fox-checkbox.is-checked');
            for (let i = 0; i < checkboxs.length; i++) {
                let id = $(checkboxs[i]).attr("data-id");
                idList.push(id);
            }
            if (idList.length == 0) {
                foxui.message({
                    text: '请选择操作项',
                    type: 'info',
                });
                return;
            }
        }else{
            idList[0] = id;
        }
        foxui.dialog({
            title: '删除',
            content: '您确定要删除吗',
            cancelText: '取消',
            confirmText: '删除',
            type: 'danger',
            confirm: function() {
                let loadingEl = foxui.loading({
                    el: 'body', // 要覆盖的节点(如是 body 可不传)
                    text: '删除中...', // 加载图标下的文字
                    background: 'rgba(255, 255, 255, 0.9)', // 加载层的背景色
                });

                ajaxR("deletes","post",{"idList": JSON.stringify(idList)},{},function(res) {
                        foxui.closeLoading(loadingEl); // 传入要删除的loading(可在调用 foxui.loading 是获取到)
                        if (res.code == 1) {
                            foxui.message({
                                text: '删除成功',
                                type: 'success',
                            });
                            //运行表格初始化
                            let datas = {
                                "bcid": $("input[name='bcid']").val()
                            };
                            init(datas);
                        } else {
                            foxui.message({
                                text: '删除失败',
                                type: 'info',
                            });
                        }
                    },
                    function(res) {
                        foxui.closeLoading(loadingEl); // 传入要删除的loading(可在调用 foxui.loading 是获取到)
                        foxui.message({
                            text: '删除失败',
                            type: 'info',
                        });
                    })
            },
            cancel: function() {
                foxui.message({
                    text: '取消删除',
                    type: 'info'
                });
            },
        });
    }
</script>

{/block}