{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对比分析</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 内容 */

        .mainContent {
            padding: 30px;
        }

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }

        .mainContent>div:nth-child(2) {
            margin-top: 30px;
        }

        /*  */

        .echart {
            width: 100%;
            height: 300px;
        }

        /* 筛选框 */

        .selectModel {
            display: none;
        }

        .selectModel>div {
            width: 90%;
            margin-top: 30px;
        }

        /*  */
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>对比分析</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div class="mainContent">
            <div class="widget-title">
                <h2>类型分析 {% if area_list|length %}
                    <form class="layui-form" action="" style="display:inline-block;vertical-align: middle;">
                        <div class="layui-form-item" style="margin-bottom: 0;">
                            <label class="layui-form-label" style="color:#029eef">地块选择：</label>
                            <div class="layui-input-inline">
                                <select name="areaSelct" id="areaSelct" lay-verify="required" lay-filter="areaSelct">
                                    {% for area in area_list %}
                                    <option value="{{area.id}}">{{area.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                    {% else %} {% endif %} {% if farm_list|length %}
                    <form class="layui-form" action="" style="display:inline-block;vertical-align: middle;">
                        <div class="layui-form-item" style="margin-bottom: 0;">
                            <label class="layui-form-label" style="color:#029eef">农场选择：</label>
                            <div class="layui-input-inline">
                                <select name="farmSelct" id="farmSelct" lay-verify="required" lay-filter="farmSelct">
                                    {% for farm in farm_list %}
                                    <option value="{{farm.id}}">{{farm.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                    {% else %} {% endif %}
                </h2>
            </div>
            <div class="">
                <div>

                </div>
                <div class="layui-row">

                    <!-- <div class="layui-col-xs12 layui-col-sm6 layui-col-md8"> -->
                    <div id="line-chart" class="echart"></div>
                    <!-- </div> -->
                </div>
            </div>
            <div class="widget-title">
                <h2>数据列表</h2>
            </div>
            <div>
                <div>
                    <table id="datatable" class="table layui-table table-bordered table-hover">
                        <thead>
                            <tr>
                                <td>品种</td>
                                <td>数量</td>
                                <td>面积</td>
                                <td>销售额</td>
                                <td>售出时间</td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="fenpei-bottom">
                    <div id="page"></div>
                </div>
            </div>
        </div>

    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script>
        var element, laydate, laypage, form;
        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
            layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            // 获取农场选择
            form.on('select(areaSelct)', function (data) {
                // console.log(data.elem); //得到select原始DOM对象
                // console.log(data.value); //得到被选中的值
                // console.log(data.othis); //得到美化后的DOM对象
                $.ajax({
                    url: '',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: data.value
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.length) {
                            renderSelect(data);
                            getEchartdata()
                        } else {
                            $('#farmSelct').html('');
                            layui.use(['form'], function () {
                                form.render('select'); //刷新select选择框渲染
                            })
                            getEchartdata()
                        }
                    },
                    error: function (type) {
                        console.log(type)
                    }
                })
                getTabledata(1)
            });
            // 农场选择
            form.on('select(farmSelct)', function (data) {
                getEchartdata()
            });

            getEchartdata()
            getTabledata(1)
        })
        // 获取统计图
        function getEchartdata() {
            $.ajax({
                url: 'contrast_detail',
                type: 'post',
                dataType: 'json',
                data: {
                    // area: $('#areaSelct').val(),
                    id: $('#farmSelct').val(),
                },
                success: function (data) {
                    renderLineChart(data)
                },
                error: function (type) {
                    console.log(type)
                }
            })
        }
        function getTabledata(page) {
            $.ajax({
                url: 'contrast_list',
                type: 'post',
                dataType: 'json',
                data: {
                    id: $('#areaSelct').val(),
                    page: page,
                },
                success: function (data) {
                    // renderLineChart(data)
                    if (data.nums) {
                        $('.fenpei-bottom').show();
                        Fill_Table('datatable', data.dat);
                    } else {
                        $('.fenpei-bottom').hide();
                        Fill_null_Table('datatable')
                    }
                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                            , count: data.nums
                            , theme: '#2ca9f9'
                            , layout: ['prev', 'page', 'next', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    $.ajax({
                                        url: 'contrast_list',
                                        type: 'post',
                                        dataType: 'json',
                                        data: {
                                            id: $('#areaSelct').val(),
                                            page: obj.curr,
                                        },
                                        success: function (data) {
                                            Fill_Table('datatable', data.dat);
                                        },
                                        error: function (type) {
                                            console.log(type)
                                        }
                                    })
                                }

                            }
                        });
                    })
                },
                error: function (type) {
                    console.log(type)
                }
            })
        }

        function renderLineChart(dat) {
            var arr = [];
            var farm = '';
            for (var i = 1; i < 5; i++) {
                for (var j = 0; j < dat[i].length; j++) {
                    arr.unshift(dat[i][j].money);
                    farm = dat[i][j].farm;
                }
                if (i == 5 - 1) {
                    line_option.series[0] = {
                        type: 'line',
                        name: farm,
                        data: arr,
                    }
                    var lineChart = echarts.init(document.getElementById('line-chart'));
                    lineChart.setOption(line_option, true);
                }
            }

        }

        function renderSelect(data) {
            $('#farmSelct').html('');
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                if (i == data.length - 1) {
                    $('#farmSelct').html(html);
                    layui.use(['form'], function () {
                        form.render('select'); //刷新select选择框渲染
                    })
                }
            }
        }

        // 1基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById('line-chart'));

        // 指定图表的配置项和数据
        var line_option = {
            title: {
                text: '销售额',
                textStyle: {
                    color: '#029eef'
                }
            },

            tooltip: {
                trigger: 'axis',
            },
            // legend: {
            //     data: ['销售金额']
            // },
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: { show: true, type: ['line', 'bar'] },
                    saveAsImage: { show: true }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2016年', '2017年', '2018年', '2019年']
            },
            yAxis: {
                type: 'value',
                data: []
            },
            dataZoom: {
                show: false,
                // start: 70
            },
            series: [
                // {
                //     type: 'line',
                //     name: '香蕉',
                //     data: [120, 120, 54, 250],
                // }
            ]
        };

        var lineChart = echarts.init(document.getElementById('line-chart'));
        lineChart.setOption(line_option, true);


        // 填充表格
        function Fill_Table(table_id, data, facId) {
            var table = document.getElementById(table_id).children[1]
            var html = "";
            $(table).html(html);
            for (var i = 0; i < data.length; i++) {
                if (data[i].userType == 2) {
                    var userType = '普通用户';
                } else {
                    var userType = '管理员';
                }
                if (data[i].isuse == 0) {
                    var isuse = '不可用';
                } else {
                    var isuse = '可用';
                }
                html += "<tr>";
                html += "<td>" + data[i].name + "</td><td>" + data[i].num + "</td><td>" + data[i].area + "</td><td><span class='redClolr'>" + data[i].money + "</span></td><td>" + data[i].upl_time + "</td>";
                html += "</tr>";
                if (i == data.length - 1) {
                    $(table).html(html);
                }
            }
        }
        function Fill_null_Table(table_id) {
            var table = document.getElementById(table_id).children[1];
            var html = "";
            html += "<tr><td colspan=13 style='line-height:100px;text-align:center'>暂无数据</td></tr>";
            $(table).html(html);
        }
    </script>
</body>

</html>