{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;
    }
    .layui-input-block {
        margin-left: 0px;
    }
    .ml10 {
        margin-left: 10px;
    }
    .mt10 {
        margin-top: 10px;
    }
    .padding-tlr {
        padding: 15px 15px 0px;
    }
    .houseType {
        display: inline-block;
        padding: 3px 8px;
        margin: 0px 5px;
        cursor: pointer;
        flex: none;
    }
    .communityStyle {
        display: inline-block;
        padding: 3px 8px;
        margin: 0px 5px 5px;
        cursor: pointer;
        flex: none;
    }
    .Hactive {
        background-color: #249efb;
        color: #fff;
        border-radius: 15px;
    }
    .activeIndex {
        background-color: #249efb;
        color: #fff;
        border-radius: 15px;
    }
    .flex-sub {
        flex:1;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .justify-start {
        justify-content: flex-start;
    }
</style>
{/block}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="search-form layui-form padding-tlr">
            <div class="flex-row align-center">
                <div class="layui-form-item mb0">
                    <div class="layui-input-block">
                      <select name="houseType">
                        <option value="">请选择房屋类型</option>
                        <option value="0">现房</option>
                        <option value="1">期房</option>
                      </select>
                    </div>
                </div>
                <div class="layui-form-item mb0 ml10">
                    <div class="layui-input-block">
                      <select name="houseStatus">
                        <option value="">请选择房屋状态</option>
                        <option value="0">老房</option>
                        <option value="1">毛坯</option>
                        <option value="2">精装</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" 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" name="end_date" placeholder="选择结束日期">
                </div>
                <button class="layui-btn sBtn ml10" lay-submit lay-filter="table-search">筛选</button>
            </div>
            <div class="flex-row mt10">
                <div class="layui-form-item mb0">
                    <div class="layui-input-block">
                      <select name="depart">
                        <option value="">请选择部门</option>
                        <option value="0">销售部</option>
                        <option value="1">技术部</option>
                      </select>
                    </div>
                </div>
                <div class="layui-form-item mb0 ml10">
                    <div class="layui-input-block">
                      <select name="staff">
                        <option value="">请选择员工</option>
                        <option value="0">张三</option>
                        <option value="1">李四</option>
                      </select>
                    </div>
                </div>
            </div>
            <div class="flex-row mt10 align-center">
                <span>房屋户型：</span>
                <div class="flex-sub flex-row align-center" id="houseTypeEle">
                    <span class="houseType">一居室</span>
                    <span class="houseType">两居室</span>
                    <span class="houseType">三居室</span>
                    <span class="houseType">四居室</span>
                    <span class="houseType">五居室</span>
                    <span class="houseType">五居室以上</span>
                    <span class="houseType">公寓</span>
                    <span class="houseType">别墅大宅</span>
                    <span class="houseType">其他</span>
                </div>
            </div>
            <div class="flex-row mt10 justify-start">
                <span>小区名称：</span>
                <div class="flex-sub flex-row justify-start flex-wrap" id="community" style="height: 29.5px;">
                    <span class="communityStyle">万科小区一</span>
                    <span class="communityStyle">万科小区二</span>
                    <span class="communityStyle">万科小区三</span>
                    <span class="communityStyle">万科小区四</span>
                    <span class="communityStyle">万科小区五</span>
                    <span class="communityStyle">万科小区六</span>
                    <span class="communityStyle">万科小区七</span>
                    <span class="communityStyle">万科小区八</span>
                    <span class="communityStyle">万科小区九</span>
                    <span class="communityStyle">万科小区十</span>
                    <i class="layui-icon layui-icon-down" style="margin-top: 5px;"></i>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table lay-filter="datalist" id="list"></table>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['table', 'form', 'laydate'], function () {
        let table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            $ = layui.$;
        $('body').attr('layadmin-themealias', 'default');

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

        let cols1 = [[
            { field: 'id', title: '部门名称',width: 100, align: 'center', 'fixed': true },
            { field: 'id', title: '人效',width: 90, align: 'center' },
            { field: 'id', title: '待确认',width: 90, align: 'center' },
            { field: 'id', title: '量房数',width: 90, align: 'center' },
            { field: 'id', title: '到店数',width: 90, align: 'center' },
            { field: 'id', title: '见面数',width: 90, align: 'center' },
            { field: 'id', title: '见面率',width: 90, align: 'center' },
            { field: 'id', title: '订金数',width: 90, align: 'center' },
            { field: 'id', title: '收定率',width: 90, align: 'center' },
            { field: 'id', title: '收定金额',width: 100, align: 'center' },
            { field: 'id', title: '合同数',width: 90, align: 'center' },
            { field: 'id', title: '合同率',width: 90, align: 'center' },
            { field: 'id', title: '合同金额',width: 100, align: 'center' },
            { field: 'id', title: '均单值',width: 90, align: 'center' },
            { field: 'id', title: '线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效率',width: 90, align: 'center' }
        ]];
        let cols2 = [[
            { field: 'id', title: '员工名称',width: 100, align: 'center', 'fixed': true },
            { field: 'id', title: '部门名称',width: 100, align: 'center' },
            { field: 'id', title: '待确认',width: 90, align: 'center' },
            { field: 'id', title: '量房数',width: 90, align: 'center' },
            { field: 'id', title: '到店数',width: 90, align: 'center' },
            { field: 'id', title: '见面数',width: 90, align: 'center' },
            { field: 'id', title: '见面率',width: 90, align: 'center' },
            { field: 'id', title: '订金数',width: 90, align: 'center' },
            { field: 'id', title: '收定率',width: 90, align: 'center' },
            { field: 'id', title: '收定金额',width: 100, align: 'center' },
            { field: 'id', title: '合同数',width: 90, align: 'center' },
            { field: 'id', title: '合同率',width: 90, align: 'center' },
            { field: 'id', title: '合同金额',width: 100, align: 'center' },
            { field: 'id', title: '均单值',width: 90, align: 'center' },
            { field: 'id', title: '线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效线索量',width: 90, align: 'center' },
            { field: 'id', title: '有效率',width: 90, align: 'center' }
        ]];

        table.render({
            elem: '#list'
            , url: '{:url("statistics/customer")}'
            , page: true
            , cols: cols1
            , id: 'tablelist'
        });

        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);
                    }
                }
            }
        })

        $('#houseTypeEle').on('click',function(e){
            let  o = document.querySelector('#houseTypeEle').children;
            if (e.target.localName === 'span') {
                for(var i = 0; i<o.length;i++) {
                    if (o[i].innerText === e.target.innerText) {
                        o[i].className = 'houseType Hactive';
                    } else {
                        o[i].className = 'houseType';
                    }
                }
            }
        })

        $('#community').on('click',function(e){
            let  o = document.querySelector('#community').children;
            if (e.target.localName === 'span') {
                for(var i = 0; i<o.length;i++) {
                    if (o[i].innerText === e.target.innerText) {
                        o[i].className = 'communityStyle activeIndex';
                    } else {
                        if (o[i].localName === 'span') o[i].className = 'communityStyle';
                    }
                }
            }
        })

        form.on('submit(table-search)', function (data) {
            let field = data.field;
            let houseType = $('.Hactive');
            let community = $('.activeIndex');
            let timeEl = $('.layui-btn-primary');
            let option = {
                where: field
                , page: {
                    curr: 1
                }
            };

            if (field.type == 1) {
                option.cols = [[
                    { type: 'numbers', field: 'id', title: '序号', align: 'center' }
                ]]
            } else {
                option.cols = [[
                    { type: 'numbers', field: 'id', title: '序号', align: 'center' }
                ]]
            }

            //执行重载
            table.reload('tablelist', option);
        });
    })
</script>
{/block}