@using CRM.Core.Model.Entity
@using Core.Web.WebHelper
@{
    ViewBag.Title = "Report";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .grid {
        /*height:50px;
        line-height:50px;*/
        padding: 20px 0px 0px 0px;
        color: #808080;
    }

    .size30 {
        font-size: 30px;
        height: 50px;
        line-height: 50px;
    }

    .size18 {
        font-size: 18px;
    }

    .myrow {
        border: 1px solid #e6e6e6;
    }

    .centerdiv {
        text-align: center;
        cursor: pointer;
    }

        .centerdiv:hover {
            background-color: #1E9FFF;
            color:white;
        }
            .centerdiv:hover .grid, .centerdiv:hover .size30 {
                color:white;
            }

    .leftborder {
        border-left: 1px solid #e6e6e6;
    }

    .centertitle {
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
        text-align: center;
    }

    .layui-field-title {
        margin: 10px 0 10px !important;
    }
</style>
<script src="~/Scripts/echarts.min5.1.js"></script>
<div class="x-body">


    <div class="layui-container">
        <div id="mytoolbar">
            <div class="layui-inline">
                <input class="layui-btn layui-btn-sm layui-btn-normal datebutton" ndate="today" type="button" value="今日" />
            </div>
            <div class="layui-inline">
                <input class="layui-btn layui-btn-sm layui-btn-primary datebutton" ndate="week" type="button" value="本周" />
            </div>
            <div class="layui-inline">
                <input class="layui-btn layui-btn-sm layui-btn-primary datebutton" ndate="month" type="button" value="本月" />
            </div>
            <div class="layui-inline">
                <input class="layui-btn layui-btn-sm layui-btn-primary datebutton" ndate="year" type="button" value="全年" />
            </div>
            <div class="layui-inline">
                <input class="layui-input" placeholder="开始日" name="txt_stime" id="start" style="width:120px;">
            </div>
            <div class="layui-inline">
                <input class="layui-input" placeholder="截止日" name="txt_etime" id="end" style="width:120px;">
            </div>

            事业部：
            <div class="layui-inline">
                <select name="txt_channel" style="height:35px;">
                    <option value="">请选择</option>
                    @foreach (var item in ViewBag.companyList as List<Bas_CompanyVirtual>)
                    {
                        <option value="@item.Channel">@item.CompanyName</option>
                    }
                </select>
            </div>
            <button class="layui-btn  layui-btn-sm layui-btn-normal" data-type="reload">搜索</button>
        </div>
        <br />

        <div class="layui-row myrow">
            <div class="layui-col-xs3 centerdiv">
                <div class="grid">总违规记录</div>
                <div><span class="size30">1</span> 条</div>
            </div>
            <div class="layui-col-xs2 centerdiv">
                <div class="grid">未处理违规记录</div>
                <div><span class="size30">2</span> 条</div>
            </div>
            <div class="layui-col-xs2 centerdiv">
                <div class="grid">已处理违规记录</div>
                <div><span class="size30">3</span> 条</div>
            </div>
            <div class="layui-col-xs2 centerdiv leftborder">
                <div class="grid">当天新增违规记录</div>
                <div><span class="size30">4</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv leftborder">
                <div class="grid">当天已处理违规记录</div>
                <div><span class="size30">4</span> 条</div>
            </div>
        </div>
        <br />
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="use">未处理</a></legend>
        </fieldset>
        <div class="layui-row myrow">
            <div class="layui-col-xs3 centerdiv">
                <div class="grid">微信聊天记录违规</div>
                <div><span class="size30">1</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv leftborder">
                <div class="grid">企微聊天记录违规</div>
                <div><span class="size30">2</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv">
                <div class="grid">企微通话违规</div>
                <div><span class="size30">3</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv leftborder">
                <div class="grid">电话录音违规</div>
                <div><span class="size30">4</span> 条</div>
            </div>
        </div>
        <br />
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="use">已处理</a></legend>
        </fieldset>
        <div class="layui-row myrow">
            <div class="layui-col-xs3 centerdiv">
                <div class="grid">微信聊天记录违规</div>
                <div><span class="size30">1</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv leftborder">
                <div class="grid">企微聊天记录违规</div>
                <div><span class="size30">2</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv">
                <div class="grid">企微通话违规</div>
                <div><span class="size30">3</span> 条</div>
            </div>
            <div class="layui-col-xs3 centerdiv leftborder">
                <div class="grid">电话录音违规</div>
                <div><span class="size30">4</span> 条</div>
            </div>
        </div>

        <br /> <br />
        <div id="main" style="height:600px;"></div> <br />
    </div>

    @*<table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>*@
</div>
<script>
    var selectRow = {};
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });
    var nowndate = "";
    $(function () {
        $(".datebutton").click(function () {
            $(".datebutton").removeClass("layui-btn-normal").addClass("layui-btn-primary");
            $(this).addClass("layui-btn-normal").removeClass("layui-btn-primary");
            var ndate = $(this).attr("ndate");
            if (ndate == nowndate) {
                return;//如果和上一次点击的是一样的则不做处理
            }
            nowndate = ndate;
            if (ndate == "today") {
                var day2 = new Date();
                day2.setTime(day2.getTime());
                var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate();
                $("#start").val(s2);
                $("#end").val(s2);
            } else if (ndate == "week") {
                var Nowdate = new Date();
                var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000); // 本周第一天
                var WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000);// 本周第最后一天

                var starttime = WeekFirstDay.getFullYear() + "-" + (WeekFirstDay.getMonth() + 1) + "-" + WeekFirstDay.getDate();
                var endtime = WeekLastDay.getFullYear() + "-" + (WeekLastDay.getMonth() + 1) + "-" + WeekLastDay.getDate();

                $("#start").val(starttime);
                $("#end").val(endtime);

                // 本周第一天
                let yearState = WeekFirstDay.getFullYear()
                let monthState = (WeekFirstDay.getMonth() + 1) < 10 ? "0" + (WeekFirstDay.getMonth() + 1) : (WeekFirstDay.getMonth() + 1)
                let todayState = (WeekFirstDay.getDate() < 10 ? "0" + WeekFirstDay.getDate() : WeekFirstDay.getDate())
                // 本周第一天
                let yearEnd = WeekLastDay.getFullYear()
                let monthEnd = (WeekLastDay.getMonth() + 1) < 10 ? "0" + (WeekLastDay.getMonth() + 1) : (WeekLastDay.getMonth() + 1)
                let todayEnd = (WeekLastDay.getDate() < 10 ? "0" + WeekLastDay.getDate() : WeekLastDay.getDate())

                //console.log(WeekFirstDay);
                //console.log(WeekLastDay);
                //console.log(yearEnd);
                //console.log(monthEnd);
                //console.log(todayEnd);
            } else if (ndate == "month") {
                var date = new Date(), y = date.getFullYear(), m = date.getMonth();
                var firstDay = new Date(y, m, 1);
                var lastDay = new Date(y, m + 1, 0);

                var starttime = firstDay.getFullYear() + "-" + (firstDay.getMonth() + 1) + "-" + firstDay.getDate();
                var endtime = lastDay.getFullYear() + "-" + (lastDay.getMonth() + 1) + "-" + lastDay.getDate();
                $("#start").val(starttime);
                $("#end").val(endtime);
            }
            else if (ndate == "year") {
                var date = new Date(), y = date.getFullYear(), m = date.getMonth();
                var firstDay = new Date(y, 0, 1);
                var lastDay = new Date(y + 1, 0, 0);

                var starttime = firstDay.getFullYear() + "-" + (firstDay.getMonth() + 1) + "-" + firstDay.getDate();
                var endtime = lastDay.getFullYear() + "-" + (lastDay.getMonth() + 1) + "-" + lastDay.getDate();
                $("#start").val(starttime);
                $("#end").val(endtime);
            }

        });

        $('[ndate="week"]').click();
    })
</script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $(function () {
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '违规趋势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['已处理违规', '未处理违规', '新增违规']
            },
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: false
            },
            series: [{
                name: "已处理违规",
                data: [10, 20, 30, 35, 50, 45, 51],
                stack: '1',
                type: 'line'
            }, {
                name: "未处理违规",
                data: [12, 18, 20, 35, 40, 46, 12],
                stack: '3',
                type: 'line'
            }, {
                name: "新增违规",
                data: [15, 20, 24, 48, 35, 33, 30],
                stack: '2',
                type: 'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });

</script>