<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('演出列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li class="select-time">
                                <!--                                <label th:style="'width:120px'">请选择时间范围2： </label>-->
                                <!--                                <input type="text" id="perStartTime" placeholder="开始日期" name="params[beginTime]"/>-->
                                <!--                                <span>-</span>-->
                                <!--                                <input type="text" id="perEndTime" placeholder="结束日期" name="params[endTime]"/>-->
                                <label th:style="'width:120px'">请选择时间范围2： </label>
                                <input th:field="${requestParam.timeBegin}" type="text" class="input-sm form-control" id="perStartTime" placeholder="yyyy-MM-dd" name="timeBegin"/>
                                <span>-</span>
                                <input th:field="${requestParam.timeEnd}" type="text" class="input-sm form-control" id="perEndTime" placeholder="yyyy-MM-dd" name="timeEnd" readonly/>
                            </li>
                            <!--                            <li>-->
                            <!--                                <label th:style="'width:120px'">请选择时间范围： </label>-->
                            <!--                                <input type="text" id="perStartTime" placeholder="开始日期" name="params[beginTime]"/>-->
                            <!--                                <span>-</span>-->
                            <!--                                <input type="text" id="perEndTime" placeholder="结束日期" name="params[endTime]"/>-->
                            <!--                            </li>-->
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="submit()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />

    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('kylin:performances:edit')}]];
        var removeFlag = [[${@permission.hasPermi('kylin:performances:remove')}]];
        var prefix = ctx + "kylin/performanceCalendar";
        var selectListUrl = ctx + "kylin/performanceCalendar/list";

        function submit(){
            var queryData = $.common.formToJSON("formId");
            $.operate.post(selectListUrl,queryData,function (res) {
                location.reload();
            });
        }
        $(function() {
            <!-- laydate示例 -->
            layui.use(['laydate'], function(){
                var laydate = layui.laydate;
                var monday = getMonday(new Date());
                var mm = GetDateStr(monday,0);
                var minSunday = GetDateStr(monday,6);
                var maxSunday = GetDateStr(monday,7);

                var startDate = laydate.render({
                    elem: '#perStartTime',
                    type:'date',
                    format: 'yyyy-MM-dd', //格式
                    min: mm, //最小可选择日期
                    range:false, //设置启用日期范围
                    // max: $('#perEndTime').val(),
                    // max: maxSunday,
                    theme: 'molv',
                    trigger: 'focus',
                    done: function(value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            endDate.config.min.year = date.year;
                            endDate.config.min.month = date.month - 1;
                            endDate.config.min.date = date.date;
                        } else {
                            endDate.config.min.year = '';
                            endDate.config.min.month = '';
                            endDate.config.min.date = '';
                        }
                    }
                });

                var endDate = laydate.render({
                    elem: '#perEndTime',
                    min: $('#perStartTime').val(),
                    // max: maxSunday,
                    theme: 'molv',
                    trigger: 'focus',
                    done: function(value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            startDate.config.max.year = date.year;
                            startDate.config.max.month = date.month - 1;
                            startDate.config.max.date = date.date;
                        } else {
                            startDate.config.max.year = '';
                            startDate.config.max.month = '';
                            startDate.config.max.date = '';
                        }
                    }
                });
            });
       });
        //获取当前日期的周一日期
        function getMonday( date ) {
            var day = date.getDay() || 7;
            if( day !== 1 )
                date.setHours(-24 * (day - 1));
            return date;
        }
        //获取某日期的第n天后的日期
        function GetDateStr(date,n) {
            var dd = date;
            dd.setDate(dd.getDate()+n);
            var y = dd.getFullYear();
            var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);
            var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();
            return y+"-"+m+"-"+d;
        }
        // $("#perStartTime").datetimepicker({
        //     language: "zh-CN",
        //     weekStart: 1,   //一周从哪一天开始。0（星期日）到6（星期六）
        //     todayBtn: 1,
        //     autoclose: 1,   //当选择一个日期之后是否立即关闭此日期时间选择器。0->false,1->true
        //     todayHighlight: 1,  //高亮当前日期
        //     startView: 2,   //0:当天的当前小时（并且时间间隔为15分钟），1:当天的小时（时间间隔为一小时），2：天数 3：月份 4：年份
        //     minView: 0,     //日期时间选择器所能够提供的最精确的时间选择视图
        //     forceParse: 0,  //当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
        //     startDate:new Date(),
        //     endDate:"+7d",
        //     format: "yyyy-mm-dd"
        //
        // });
        // $("#perEndTime").datetimepicker({
        //     language: "zh-CN",
        //     weekStart: 1,   //一周从哪一天开始。0（星期日）到6（星期六）
        //     todayBtn: 1,
        //     autoclose: 1,   //当选择一个日期之后是否立即关闭此日期时间选择器。0->false,1->true
        //     todayHighlight: 1,  //高亮当前日期
        //     startView: 2,   //0:当天的当前小时（并且时间间隔为15分钟），1:当天的小时（时间间隔为一小时），2：天数 3：月份 4：年份
        //     minView: 0,     //日期时间选择器所能够提供的最精确的时间选择视图
        //     forceParse: 0,  //当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
        //     startDate: $("#perStartTime").value,
        //     endDate:"+7d",
        //     format: "yyyy-mm-dd"
        //
        // });
    </script>
</body>
<style lang="scss">
    .sline {
        margin: 10px 0 20px;
        border-top: 1px dashed #d7dbe2;
    }
    .calendar-day{
        text-align: center;
        height: 30px;
        font-size: 14px;
    }
    .calendar-data {
        font-size: 12px;
    }
    .city{
        padding-top: 5px;
    }
    .title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: 4px auto;
    }
    .is-selected{
        color: #409EFF;
        font-size: 14px;
    }
</style>
</html>