{extend name="public/layout" /}
{block name="title"}跟进情况统计{/block}
{block name="head"}
{include file="public/head"}
<style>
    .layui-table th:last-child {
        border-right: none;
    }

    .layui-table-view .layui-table {
        /* width:100% */
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .line-middle {
        width: 10px;
        height: 100%;
        margin: 0px 10px;
    }

    .line {
        width: 10px;
        height: 2px;
        background-color: #999999;
    }

    .mb0 {
        margin-bottom: 0px;
    }

    .layui-btn {
        background-color: #fff;
        color: #555;
        border: 1px solid #c9c9c9
    }

    .layui-btn:hover {
        background-color: #fff;
        color: #555;
        border: 1px solid #249efb;
    }

    .layui-btn-primary,
    .sBtn {
        background-color: #249efb;
        color: #fff;
        border: 1px solid #249efb;
    }

    .layui-btn-primary:hover {
        background-color: #249efb;
        color: #fff;
        border: 1px solid #249efb;
    }

    .sBtn:hover {
        background-color: #249efb;
        color: #fff;
        border: 1px solid #249efb;
    }

    .flex-row,
    .row {
        display: flex;
    }

    .align-center {
        align-items: center;
    }

    .ml10 {
        margin-left: 10px;
    }

    .mt10 {
        margin-top: 10px;
    }

    .padding-tlr {
        padding: 15px 15px 0px;
    }

    .layui-input-block {
        margin-left: 0px;
    }

    .justify-between {
        justify-content: space-between;
    }
    table tr td a{
        color:#249EFB;
    }
</style>
{/block}
{block name="body"}
<div class="layui-fluid" style="background-color: #fff;">
    <div class="layui-card">
        <div class="search-form layui-form padding-tlr">
            <div class="flex-row align-center justify-between">
                <div class="flex-row align-center">
                    {if $Request.get.type == 2}
                    <div class="layui-inline" style="float: left;">
                        <div class="goback">
                            <a href="{:url('statistics/followUp')}" id="query" style="color:#269efb;">
                                <i class="layui-icon layui-icon-return"></i>
                                <span>返回</span>
                            </a>
                        </div>
                    </div>
                    {/if}
                    <div class="layui-form-item mb0 ml10" style="width:180px;">
                        <div class="layui-input-block">
                            <select name="level">
                                <option value="">请选择客户分类</option>
                                <option value="A">A类客户</option>
                                <option value="B">B类客户</option>
                                <option value="C">C类客户</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline row ml10" id="timeBtn">
                        <input type="button" class="layui-btn" value="今日" />
                        <input type="button" class="layui-btn" value="3天" />
                        <input type="button" class="layui-btn" value="7天" />
                        <input type="button" class="layui-btn" value="1个月" />
                    </div>
                    <div class="layui-inline ml10">
                        <!-- 注意：这一层元素并不是必须的 -->
                        <input type="text" class="layui-input" id="sDate" autocomplete="off" name="start_date" placeholder="选择开始日期">
                    </div>
                    <div class="line-middle">
                        <div class="line"></div>
                    </div>
                    <div class="layui-inline">
                        <!-- 注意：这一层元素并不是必须的 -->
                        <input type="text" class="layui-input" id="eDate" autocomplete="off" name="end_date" placeholder="选择结束日期">
                    </div>
                </div>
                <div>
                    <button class="layui-btn sBtn ml10" lay-submit lay-filter="table-search">筛选</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table lay-filter="datalist" id="list"></table>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/html" id="org_name">
    <a href="follow_up.html?type=2&org_id={{d.id}}">{{d.org_name}}</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate', 'element','tableMerge'], function () {
        let table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            element = layui.element,
            tableMerge=layui.tableMerge,
            $ = layui.$;
        $('body').attr('layadmin-themealias', 'default');

        //执行一个laydate实例
        laydate.render({
            elem: '#sDate' //指定元素
        });
        laydate.render({
            elem: '#eDate' //指定元素
        });

        let cols1 = [[
            { fixed: 'left', style: 'width:0px', hide: true },
            { field: 'org_name', title: '部门名称', align: 'center', width: 150, merge: true, fixed: 'left' },
            { field: 'level', title: '客户类型ABC', align: 'center', fixed: 'left' },
            { field: 'confirm_num', title: '待确认', align: 'center' },
            { field: 'measure_num', title: '已量房', align: 'center' },
            { field: 'shop_num', title: '已到店', align: 'center' },
            { field: 'unshop_num', title: '未到店', align: 'center' },
            { field: 'deposit_num', title: '定金', align: 'center' },
            { field: 'signed_num', title: '合同', align: 'center' }
        ]];
        let cols2 = [[
            { fixed: 'left', style: 'width:0px', hide: true },
            { field: 'name', title: '员工名称', align: 'center', width: 150, merge: true, 'fixed': 'left' },
            { field: 'level', title: '客户类型ABC', align: 'center', fixed: 'left' },
            { field: 'confirm_num', title: '待确认', align: 'center' },
            { field: 'measure_num', title: '已量房', align: 'center' },
            { field: 'shop_num', title: '已到店', align: 'center' },
            { field: 'unshop_num', title: '未到店', align: 'center' },
            { field: 'deposit_num', title: '定金', align: 'center' },
            { field: 'signed_num', title: '合同', align: 'center' }
        ]];
        let cols = cols1;
        let url = '{:url("statistics/followUp")}';
        if (location.search.search('type=2') > 0) {
            cols = cols2;
            url = '{:url("statistics/followUp", ["type"=>2, "org_id"=>$Request.get.org_id])}';
        }
        table.render({
            elem: '#list'
            , url: url
            , page: true
            , height: 'full-110'
            , cols: cols
            , id: 'tablelist'
            , done: function (res) {
                // 渲染element进度条
                tableMerge.render(this)
            }
        });

        function setYMD(time) {
            let dateTime = new Date(time);
            let year = dateTime.getFullYear();
            let Month = dateTime.getMonth() + 1;
            let days = dateTime.getDate();
            return `${year}-${Month > 9 ? Month : '0' + Month}-${days > 9 ? days : '0' + days}`;
        }

        var dateArr = {};
        var today = new Date().getTime();
        var oneTime = 24 * 60 * 60 * 1000;
        var threeDay1 = today - 3 * oneTime;
        var sevenDay1 = today - 6 * oneTime;
        var oneMonth = today - 30 * oneTime;
        dateArr = {
            nowS: setYMD(today),
            nowE: setYMD(today),
            threeDayS: setYMD(threeDay1),
            threeDayE: setYMD(today),
            sevenDayS: setYMD(sevenDay1),
            sevenDayE: setYMD(today),
            oneMonthS: setYMD(oneMonth),
            oneMonthE: setYMD(today),
        }

        $('#timeBtn').on('click', function (e) {
            if (!!(e.target.localName != 'input')) return;
            let o = document.querySelector('#timeBtn').children;
            if (e.target.classList.contains('layui-btn-primary') == true) {
                for (var i = 0; i < o.length; i++) {
                    o[i].className = 'layui-btn';
                }
                $('#sDate').val('');
                $('#eDate').val('');
                return;
            } else {
                for (var i = 0; i < o.length; i++) {
                    o[i].className = 'layui-btn';
                }
                e.target.className = 'layui-btn layui-btn-primary';
                if (!!(e.target.className.indexOf('layui-btn-primary') > 0)) {
                    if (e.target.value == '今日') {
                        $('#sDate').val(dateArr.nowS);
                        $('#eDate').val(dateArr.nowE);
                    } else if (e.target.value == '3天') {
                        $('#sDate').val(dateArr.threeDayS);
                        $('#eDate').val(dateArr.threeDayE);
                    } else if (e.target.value == '7天') {
                        $('#sDate').val(dateArr.sevenDayS);
                        $('#eDate').val(dateArr.sevenDayE);
                    } else {
                        $('#sDate').val(dateArr.oneMonthS);
                        $('#eDate').val(dateArr.oneMonthE);
                    }
                }
            }
        })

        form.on('submit(table-search)', function (data) {
            let field = data.field;
            let element = $('.layui-btn-primary');
            if (element && element[0]) {
                let el = element[0].value;
            }
            let option = {
                where: field
                , page: {
                    curr: 1
                }
            };
            //执行重载
            table.reload('tablelist', option);
        });
    })
    layui.define('table', function (exports) {
        var $ = layui.jquery;
        // 封装方法
        var mod = {
            /**
             * 渲染入口
             * param myTable
             */
            render: function (myTable) {
                var tableBox = $(myTable.elem).next().children('.layui-table-box'),
                    $main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                    $fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                    $fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                    cols = myTable.cols[0], mergeRecord = {};
                for (let i = 0; i < cols.length; i++) {
                    var item3 = cols[i], field = item3.field;
                    if (item3.merge) {
                        var mergeField = [field];
                        if (item3.merge !== true) {
                            if (typeof item3.merge == 'string') {
                                mergeField = [item3.merge]
                            } else {
                                mergeField = item3.merge
                            }
                        }
                        mergeRecord[i] = { mergeField: mergeField, rowspan: 1 }
                    }
                }

                $main.each(function (i) {
                    for (var item in mergeRecord) {
                        if (i == $main.length - 1 || isMaster(i, item)) {
                            $(this).children('[data-key="1-0-1"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
                            $fixLeft.eq(i).children('[data-key="1-0-1"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
                            $fixRight.eq(i).children('[data-key="1-0-1"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
                            mergeRecord[item].rowspan = 1;
                        } else {
                            $(this).children('[data-key="1-0-1"]').remove();
                            $fixLeft.eq(i).children('[data-key="1-0-1"]').remove();
                            $fixRight.eq(i).children('[data-key="1-0-1"]').remove();
                            mergeRecord[item].rowspan += 1;
                        }
                    }
                })

                function isMaster(index, item) {
                    var mergeField = mergeRecord[item].mergeField;
                    var dataLength = layui.table.cache[myTable.id].length;
                    for (var i = 0; i < mergeField.length; i++) {
                        if (layui.table.cache[myTable.id][dataLength - 2 - index][mergeField[i]]
                            !== layui.table.cache[myTable.id][dataLength - 1 - index][mergeField[i]]) {
                            return true;
                        }
                    }
                    return false;
                }
            }
        };
        // 输出
        $(document).on('click','#query',function(){
            window.history.go(-1);
            setTimeout(() => {
                exports('tableMerge', mod);
            },200)
        })
        exports('tableMerge', mod);
    });
</script>
{/block}