<!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 class="comments-top-top">
                <div class="top-comment-left">

                </div>
            </div>
            <div class="fixed-table-body">
                <div class="fixed-table-loading table table-bordered table-hover open" style="top: 35px; display: none;">
      <span class="loading-wrap">
      <span class="loading-text" style="font-size: 13px;">正在努力地加载数据中，请稍候</span>
      <span class="animation-wrap"><span class="animation-dot"></span></span>
      </span>

                </div>
                <table id="bootstrap-table" class="table table-bordered table-hover">
                    <thead class="">
                    <tr>
                        <th style="" data-field="mon">
                            <div class="th-inner ">Mon</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="tue">
                            <div class="th-inner ">Tue</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="wed">
                            <div class="th-inner ">Wed</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="thu">
                            <div class="th-inner ">Thu</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="fri">
                            <div class="th-inner ">Fri</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="sat">
                            <div class="th-inner ">Sat</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th style="" data-field="sun">
                            <div class="th-inner ">Sun</div>
                            <div class="fht-cell"></div>
                        </th>
                    </tr>
                    </thead>
                    <tbody th:each="respBean,respBeanStat:${respDataList}">
                        <tr>
                            <td>
                                <div th:each="performanceVo:${respBean.monList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div th:each="performanceVo:${respBean.tueList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div th:each="performanceVo:${respBean.wedList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div th:each="performanceVo:${respBean.thuList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div th:each="performanceVo:${respBean.friList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div th:each="performanceVo:${respBean.satList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <div th:each="performanceVo:${respBean.sunList}">
                                    <ul>
                                        <li><span class="left-at">[[${performanceVo.cityName}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.timeStart}]]</span></li>
                                        <li><span class="right-at">[[${performanceVo.title}]]</span></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
<!--            <div class="col-sm-12 select-table table-bordered">-->
<!--                <table id="bootstrap-table"></table>-->
<!--            </div>-->
<!--            <div>-->
<!--                <div class="calendar-day" :class="data.isSelected ? 'is-selected' : ''">-->
<!--                    {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}-->
<!--                </div>-->
<!--                <div  id="index" class="calendar-data">-->
<!--                    <div>-->
<!--                        <div>-->
<!--                            <div th:each="entries,stat:${resultList}" effect="dark" value="item.title">-->
<!--                                <div>-->
<!--                                    <div class="city">-->
<!--                                        <el-button size="mini" type="primary" plain>-->
<!--                                            {{ item.city_name }}-->
<!--                                        </el-button>-->
<!--                                        {{ item.time_start }}-->
<!--                                    </div>-->
<!--                                    <div class="title">-->
<!--                                        {{ item.title }}-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </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() {
            var options = {
                url: prefix + "/list",
                sortName: "sort",
                modalName: "演出",
                columns: [{
                    checkbox: false
                },
                {
                    field: 'mon',
                    title: 'Mon'
                },
                {
                    field: 'tue',
                    title: 'Tue'
                },
                {
                    field: 'wed',
                    title: 'Wed'
                },
                {
                    field: 'thu',
                    title: 'Thu'
                },
                {
                    field: 'fri',
                    title: 'Fri'
                },
                {
                    field: 'sat',
                    title: 'Sat'
                },
                {
                    field: 'sun',
                    title: 'Sun'
                }]
            };
            // $.table.init(options);

            <!-- 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>