<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template</title>
    <link rel="stylesheet" href="./js/layui/css/layui.css">
    <style>
        .all {
            padding-top: 30px;
            padding-left: 30px;
            padding-right: 30px;

        }

        .c {
            float: left;

        }

        .c1 {
            margin: 10px;
            float: left;


        }

        .t1 {
            width: 10%;
        }

        .row {
            height: 50px;
        }

        .t2 {
            width: 10%;
        }

        .view {

            width: 80%;
        }

        #timeType {
            float: left;
            width: 10%;
        }

        #time1 {
            float: left;
            width: 10%;
        }

        .btn {
            float: left;
            width: 10%;
        }

        .label {
            height: 50px;
            line-height: 32px;
        }
    </style>
</head>

<body>
<div class="all">

    <div class="c t1">

        <button class="layui-btn layui-btn-sm" onclick="spread()">一键展开指标</button>

        <div id="tree1" class=""></div>

        <div id="tree2"></div>
    </div>
    <div class="c t2">
        <form class="layui-form" action="">
            <div class="column" id="searchType">
                <input type="radio" name="where" value="eci" title="按eci查询" lay-filter="where" checked>
                <input type="radio" name="where" value="cellname" title="中文名查询" lay-filter="where">
            </div>
            <textarea id="condition" cols="14" rows="19"
                      style="border-width:1px;border-style: solid;border-color: #eee;"></textarea>
        </form>
    </div>
    <div class="c view">
        <div class="row layui-form">

            <div class="c1 label"> 粒度:</div>

            <div class="timeTypeDiv c1" style="width: 10%;">
                <select name="timeType" id="timeType">
                    <option value="quater">15分钟</option>
                    <option value="hour">小时</option>
                    <option value="day">天</option>
                    <!--<option value="week">星期</option>-->
                    <!--<option value="month">月</option>-->
                </select>
            </div>

            <div class="c1 label" style="margin-left: 120px;">时间:</div>
            <input type="text" class="layui-input c1" style="width: 180px;" id="time1">
            <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="search()">查询</button>
            <button class="layui-btn btn c1" style="margin-left: 20px;" onclick="conditionSearch()">条件查询</button>
        </div>
        <div class="row">
            <table id="demo" lay-filter="test" style="width: 200pxs;"></table>
        </div>
    </div>
</div>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/layui/layui.js"></script>
<script>
        var dataA;
        var layer;
        var tree;
        var table;
        layui.use(['layer', 'tree', 'form', 'laydate', 'table'], function () {
            tree = layui.tree;
            layer = layui.layer;
            table = layui.table;
            var form = layui.form,

                laydate = layui.laydate;
            // layer.msg('Hello Zhou')
            table.render({
                elem: '#demo',
                height: 320,
                // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                page: true, //开启分页
                toolbar: true,
                defaultToolbar: [{
                    title: '导出' //标题
                    ,
                    layEvent: 'export' //事件名，用于 toolbar 事件中使用
                    ,
                    icon: 'layui-icon-export' //图标类名
                }],
                limit: 50,
                limits: [50, 200, 500],
                cols: [

                ],
                data: []
            });

            //工具条事件
            table.on('toolbar(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'export') {
                    // layer.alert('Hi，头部工具栏扩展的右侧图标。');
                    var tableData = table.cache['demo']
                    obj.config.title = "地市指标"
                    // console.log(JSON.stringify(dataA))
                    table.exportFile(obj.config.id, dataA.datas, 'csv')
                }
            });
            laydate.render({
                elem: '#time1',
                type: 'datetime'
            });

            initTreeCity(tree)
            initTreeIndicator(tree)







        })

        var treeCity;
        function initTreeCity(tree) {
            console.log('initTreeCity')
            $.ajax({
                type: "GET",
                // url: './json/citys.json',
                url: './initTreeCitys',
                data: {
                    "spread": false
                },
                success: function (r) {

                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    treeCity = tree.render({
                        elem: '#tree1',
                        showCheckbox: true,
                        accordion: true,
                        id: 'Id1',
                        data: r
                    });


                    return false;

                }

            });

        }

        var treeIn;
        function initTreeIndicator(tree) {
            console.log('initTreeIndicator')
            $.ajax({
                type: "GET",
                url: './initTreeIndicator',
                data: {
                    "spread": false
                },
                success: function (r) {

                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    treeIn = tree.render({
                        elem: '#tree2',
                        showCheckbox: true,
                        accordion: true,
                        id: 'Id2',
                        data: r
                    });


                    return false;

                }

            });

        }

        function spread() {
            console.log('IndicatorSpread')
            $.ajax({
                type: "GET",
                url: './initTreeIndicator',
                data: {
                    "spread": true
                },
                success: function (r) {

                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    treeIn = tree.render({
                        elem: '#tree2',
                        showCheckbox: true,
                        accordion: true,
                        id: 'Id2',
                        data: r
                    });


                    return false;

                }

            });

        }
        function renderTable(table, citys, indicators, ttype, sdate) {
            console.log('renderTable')

            $.ajax({
                type: "POST",
                url: './renderTable',
                async: false,
                data: {
                    "citys": citys,
                    "indicators": indicators,
                    "ttype": ttype,
                    "sdate": sdate
                },
                success: function (r) {
                    dataA = r;
                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    table.render({
                        elem: '#demo',
                        height: 320,
                        // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                        page: true, //开启分页
                        toolbar: true,
                        defaultToolbar: [{
                            title: '提示' //标题
                            ,
                            layEvent: 'export' //事件名，用于 toolbar 事件中使用
                            ,
                            icon: 'layui-icon-export' //图标类名
                        }],
                        limit: 50,
                        limits: [50, 200, 500],
                        cols: [
                            r.cols
                        ],
                        data: r.datas
                    });


                    return false;

                }

            });

        }

        function conditionRenderTable(table, condition, searchType, indicators, ttype, sdate) {
            console.log('conditionRenderTable')

            $.ajax({
                type: "POST",
                url: './conditionRenderTable',
                async: false,
                data: {
                    "condition": condition,
                    "searchType": searchType,
                    "indicators": indicators,
                    "ttype": ttype,
                    "sdate": sdate
                },
                success: function (r) {
                    dataA = r;
                    // console.log(r)
                    let o = r instanceof Object
                    if (!o) {
                        r = JSON.parse(r)
                    }

                    table.render({
                        elem: '#demo',
                        height: 320,
                        // url: 'https://www.layui.com/demo/table/user/' , //数据接口
                        page: true, //开启分页
                        toolbar: true,
                        defaultToolbar: [{
                            title: '提示' //标题
                            ,
                            layEvent: 'export' //事件名，用于 toolbar 事件中使用
                            ,
                            icon: 'layui-icon-export' //图标类名
                        }],
                        limit: 50,
                        limits: [50, 200, 500],
                        cols: [
                            r.cols
                        ],
                        data: r.datas
                    });


                    return false;

                }

            });

        }

        function search() {
            // form.on('submit(formDemo)', function (data) {
            if ($('#time1').val() == 0) {
                alert('填选择时间')
                return;
            }
            if (tree.getChecked('Id1').length == 0) {
                alert('请选择地市')
                return;
            }
            if (tree.getChecked('Id2').length == 0) {
                alert('请选择指标')
                return;
            }

           alert('开始查询')
            // layer.msg(JSON.stringify(data.field));
            let checkData1 = tree.getChecked('Id1')[0].children;
            let checkData2 = tree.getChecked('Id2')[0].children;
            console.log(checkData1)
            console.log(checkData2)

            var citysA = new Array();
            checkData1.forEach(eee => {
                eee.children.forEach(ee => {

                    citysA.push("'" + ee.title + "'")

                })
            });
            citys = citysA.join(',')
            // console.log(citys)

            var indicatorsA = new Array();
            checkData2.forEach(eee => {
                eee.children.forEach(ee => {

                    indicatorsA.push(ee.id)

                })
            });
            indicators = indicatorsA.join(',')
            // console.log(indicators)
            let ttype = $('#timeType').val()
            let sdate = $('#time1').val()

            renderTable(table, citys, indicators, ttype, sdate)

            return false;
        }



        function conditionSearch() {
            let sdate = $('#time1').val()
            if (sdate.length == 0) {
                alert('填选择时间')
                return;
            }
            if ($('#condition').val().length == 0) {
                alert('填写查询条件')
                return;
            }
            if (tree.getChecked('Id2').length == 0) {
                alert('请选择指标')
                return;
            }
            // layer.msg(JSON.stringify(data.field));
            // let checkData1 = tree.getChecked('Id1')[0].children;

            let checkData2 = tree.getChecked('Id2')[0].children;


            var indicatorsA = new Array();
            checkData2.forEach(eee => {
                eee.children.forEach(ee => {

                    indicatorsA.push(ee.id)

                })
            });
            indicators = indicatorsA.join(',')
            // console.log(indicators)
            let condition = $('#condition').val();
            let ttype = $('#timeType').val()
            let searchType = $('#searchType').find('input:checked').val()
            conditionRenderTable(table, condition, searchType, indicators, ttype, sdate)

            return false;
        }


    </script>
</body>

</html>