<!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'">请选择时间范围： </label>
                                    <input th:field="${requestParam.timeBegin}" type="text" class="input-sm form-control" id="perStartTime" placeholder="开始日期" name="timeBegin"/>
                                    <span>-</span>
                                    <input th:field="${requestParam.timeEnd}" type="text" class="input-sm form-control" id="perEndTime" placeholder="结束日期" name="timeEnd" readonly/>
                            </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="el-calendar">
                <div class="el-calendar__header">
                    <div class="el-calendar__title" th:text="${currentDate}">
                    </div>
                <div>
                <div class="el-calendar__body">
                    <table id="bootstrap-table2" cellspacing="0" cellpadding="0" class="el-calendar-table is-range">
                        <thead>
                        <th>Mon</th>
                        <th>Tue</th>
                        <th>Wed</th>
                        <th>Thu</th>
                        <th>Fri</th>
                        <th>Sat</th>
                        <th>Sun</th>
                        </thead>
                        <tbody th:each="respBean,respBeanStat:${respDataList}">
                        <tr class="el-calendar-table__row">
                            <td>
                                <div th:text="${respBean.monDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.monList)} gt 0">
                                    <div th:each="performanceVo:${respBean.monList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                        <span th:text="*{performanceVo.cityName}">
                                                        </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.monList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                            <td>
                                <div th:text="${respBean.tueDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.tueList)} gt 0">
                                    <div th:each="performanceVo:${respBean.tueList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                        <span th:text="*{performanceVo.cityName}">
                                                        </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.tueList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                            <td>
                                <div th:text="${respBean.wedDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.wedList)} gt 0">
                                    <div th:each="performanceVo:${respBean.wedList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                        <span th:text="*{performanceVo.cityName}">
                                                        </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.wedList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                            <td>
                                <div th:text="${respBean.thuDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.thuList)} gt 0">
                                    <div th:each="performanceVo:${respBean.thuList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                        <span th:text="*{performanceVo.cityName}">
                                                        </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.thuList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                            <td>
                                <div th:text="${respBean.friDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.friList)} gt 0">
                                    <div th:each="performanceVo:${respBean.friList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                            <span th:text="*{performanceVo.cityName}">
                                                            </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.tueList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                            <td>
                                <div th:text="${respBean.satDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.satList)} gt 0">
                                    <div th:each="performanceVo:${respBean.satList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                            <span th:text="*{performanceVo.cityName}">
                                                            </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.satList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                            <td>
                                <div th:text="${respBean.sunDate}" class="el-calendar-day"></div>
                                <th:block th:if="${#lists.size(respBean.sunList)} gt 0">
                                    <div th:each="performanceVo:${respBean.sunList}" class="calendar-data">
                                        <div>
                                            <div>
                                                <div class="city">
                                                    <button type="button" class="el-button el-button--primary el-button--mini is-plain">
                                                            <span th:text="*{performanceVo.cityName}">
                                                            </span>
                                                    </button>
                                                    [[*{performanceVo.timeStart}]]
                                                </div>
                                                <div class="title" th:text="*{performanceVo.title}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </th:block>
                                <th:block th:if="${#lists.size(respBean.sunList)} eq 0">
                                    <div class="calendar-data">
                                        <div>
                                            <div th:text="无演出" style="text-align: center"></div>
                                        </div>
                                    </div>
                                </th:block>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </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 form = $("#formId");
            form.action = selectListUrl;
            form.submit();
        }
        $(function() {
            var options = {
                url: prefix + "/list",
                sortName: "sort",
                modalName: "演出",
                columns: [{
                    checkbox: false
                },
                {
                    field: 'mon',
                    title: 'Mon'
                },
                {
                    field: 'thu',
                    title: 'thu'
                },
                {
                    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>
<style lang="scss">
    /*html {*/
    /*    line-height: 1.15;*/
    /*    -ms-text-size-adjust: 100%;*/
    /*    -webkit-text-size-adjust: 100%;*/
    /*}*/
    /*body {*/
    /*    height: 100%;*/
    /*    -moz-osx-font-smoothing: grayscale;*/
    /*    -webkit-font-smoothing: antialiased;*/
    /*    text-rendering: optimizeLegibility;*/
    /*    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;*/
    /*}*/
    .el-calendar {
        background-color: #fff
    }

    .el-calendar__header {
        display: flex;
        justify-content: space-between;
        padding: 12px 20px;
        border-bottom: 1px solid #dfe6ec;
        margin:auto;
        vertical-align: top;
    }

    .el-calendar__title {
        color: #000;
        align-self: center
    }

    .el-calendar__body {
        padding: 12px 20px 35px
    }

    .el-calendar-table {
        table-layout: fixed;
        width: 100%
    }

    .el-calendar-table thead th {
        padding: 12px 0;
        color: #606266;
        font-weight: 400;
        background-color: #f2f8fe;
        text-align: center;
        height: 30px;
        font-size: 14px;
    }

    .el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev {
        color: #c0c4cc
    }

    .el-calendar-table td {
        border-bottom: 1px solid #dfe6ec;
        border-right: 1px solid #dfe6ec;
        vertical-align: top;
        transition: background-color .2s ease
    }

    .el-calendar-table td.is-selected {
        background-color: #f2f8fe
    }

    .el-calendar-table td.is-today {
        color: #1890ff
    }

    .el-calendar-table tr:first-child td {
        border-top: 1px solid #dfe6ec
    }

    .el-calendar-table tr td:first-child {
        border-left: 1px solid #dfe6ec
    }

    .el-calendar-table tr.el-calendar-table__row--hide-border td {
        border-top: none
    }

    .el-calendar__body .el-calendar-table{
        box-sizing: border-box;
        padding: 8px;
        height: 85px
    }

    .el-calendar-table .el-calendar-day{
        text-align: center;
        height: 30px;
        font-size: 14px;
    }

    .el-calendar-table .el-calendar-day:hover {
        cursor: pointer;
        background-color: #f2f8fe;
        text-align: center;
        height: 30px;
        font-size: 14px;
    }
    .sline {
        margin: 10px 0 20px;
        border-top: 1px dashed #d7dbe2;
    }
    .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;
    }

    .el-button--primary.is-plain {
        color: #1890ff;
        background: #e8f4ff;
        border-color: #a3d3ff;
    }
    [type=reset], [type=submit], button, html [type=button] {
        -webkit-appearance: button;
    }
    .el-button--mini {
        padding: 7px 15px;
        font-size: 12px;
        border-radius: 3px;
    }
    .el-button--primary {
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;
    }
    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-color: #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 400;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
</style>
</body>
</html>