@model calendar
@{
    ViewBag.Title = "日历 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
@section CSS{
<link href="~/Statics/libs/v1/clndr/clndr.css" rel="stylesheet" />
<style>
    .withWeight {
       
        background-color: gold;
   
    }
</style>
}
@section JS
    {
<script src="~/Statics/libs/base/lodash.min.js?v=@(HtmlUtil.JsVersion)"></script>
<script src="~/Statics/libs/v1/clndr/clndr.js?v=@(HtmlUtil.JsVersion)"></script>
<script src="~/Statics/libs/moment/lang/zh-cn.min.js?v=@(HtmlUtil.JsVersion)"></script>

<script type="text/javascript">
     var timer = null;
     var Calendar = @Html.JsonSerialize(Model);
     var submitclick_calendar = false;
     var list_year = new Array();
     var HolidyObj = null;
     var loadHolidayObj = null;

     $(function () {
         $(".datepicker").datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, showOtherMonths: true, selectOtherMonths: true });
     });

     function checkSubmitData() {
         var pass = $('#calendarEditForm').valid();
         return pass;
     }

     function savecalendar() {
         //todo test
         var thisMonth = moment().format('YYYY-MM');
         var eventArray = [
             {
                 title: 'Multi-Day Event',
                 endDate: thisMonth + '-2',
                 startDate: thisMonth + '-1'
             }, {
                 endDate: thisMonth + '-6',
                 startDate: thisMonth + '-5',
                 title: 'Another Multi-Day Event'
             }, {
                 date: thisMonth + '-20',
                 title: 'Single Day Event'
             }
         ];
         main.clndr.passInATemplate.setEvents(eventArray);

         return;
     }

     function closecalendarWindow() {
         try { window.parent.layer.closeAll(); } catch (e) {}
         try { window.parent.$('#modal-editcalendar .close').click(); } catch (e) { }
         try { window.parent.$('#modal-calendarEditInner .close').click(); } catch (e) { }
         try { if (window.parent.location.href.indexOf("calendarEdit") >= 0) {  window.close();  } } catch (e) {}
     }

    function showPreview(sorce) {
        var file = sorce.files[0];
        if (window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function (e) {
                var HolidyJson = e.target.result;
                try {
                    var HolidyObj = JSON.parse(HolidyJson);

                    list_year = new Array();
                    $.each(HolidyObj, function (i) {
                        list_year.push(i);
                    });

                    if (list_year != null && list_year.length > 0) {
                        main.clndr = {};
                        loadHolidayObj = HolidyObj[list_year[0]];
                        //resetCalendarDiv()
                        for (var month = 1; month <= 12; month++) {
                            $("#Year").val(list_year[0]);
                            setMonthCalendar(list_year[0], month, "month" + month, loadHolidayObj);
                        }
                        $("#divyearmonth").show();
                    }
                } catch (e) {
                    main.alert("解析日历文件出错!请检查是否符合导入的日历数据格式实例:[\"2018, 01, 01\",\"2018, 01, 02\"......](注:1、文件只需一年的日历。2、只需要节假日日期列表。)");
                }

            };
            fr.readAsText(file);
        }
    }

    function setMonthCalendar(year, month, id, holidyObj) {
         //var month = 1;
         //var year = Calendar.Year;
         //一月份所有事件
         var momentMonth = moment({ year: year, month: (month-1) });
         var monthpad = (month + "").padStart(2,"0");
         var startDate = "{0}-{1}-01".template(year, monthpad);
         var endDate = "{0}-{1}-{2}".template(year, monthpad, momentMonth.daysInMonth());
         var eventArray1 = [];  //控件需要日期
         //Calendar.HolidyObj = JSON.parse(Calendar.HolidayJson);
         var monthArray = [year, monthpad ];
         var holidays1 = $.grep(holidyObj, function (val) {
             return val.indexOf(monthArray.join(",")) >= 0;
         });

         $.each(holidays1, function (i, d) {
             var wWeight = d.indexOf("*") > 0 ? d.split('*')[1] : "";
             eventArray1.push({ startDate: d, endDate: d, withWeight: wWeight });
         });

         $('#'+id).clndr({
             template: $('#clndr-template').html(),
             events: eventArray1,
             constraints: {
                 startDate: startDate,
                 endDate: endDate
             },
             multiDayEvents: {
                 singleDay: 'date',
                 endDate: 'endDate',
                 startDate: 'startDate'
             },
             clickEvents: {
                 click: function (target) {
                     var calObj = this;
                     eventArray1 = calObj.eventsThisInterval;
                     clearTimeout(timer);
                     timer = setTimeout(function () {
                         var clickday = target.date.format("YYYY,MM,DD");
                         //维护eventArray1
                         var existholiday = $.grep(eventArray1, function (v) {
                             return v.startDate.indexOf(clickday) >= 0;
                         });
                         if (existholiday.length == 0) {
                             eventArray1.push({ startDate: clickday, endDate: clickday });
                         } else {
                             eventArray1 = $.grep(eventArray1, function (v) {
                                 return v.startDate.indexOf(clickday) < 0;
                             });
                         }
                         //维护Calendar.Holiday
                         holidyObj = $.grep(holidyObj, function (val) {
                             return val.indexOf(monthArray.join(",")) < 0;
                         });
                         $.each(eventArray1, function (i, d) {
                             holidyObj.push(d.startDate);
                         });
                         holidyObj.sort(function (a, b) { return b - a; });
                         loadHolidayObj = JSON.stringify(holidyObj);
                         calObj.setEvents(eventArray1);


                     }, 230);
                 },
                 today: function () {
                 },
                 nextMonth: function () {
                 },
                 previousMonth: function () {
                 },
                 onMonthChange: function () {
                 },
                 nextYear: function () {
                 },
                 previousYear: function () {
                 },
                 onYearChange: function () {
                 },
                 nextInterval: function () {
                 },
                 previousInterval: function () {
                 },
                 onIntervalChange: function () {
                 }
             }
         });
     }

     $(function () {
         //设置monthdiv



         //main.clndr = {};
         //for (var month = 1; month <= 12; month++) {
         //    setMonthCalendar(Calendar.Year, month, "month" + month);
         //}

         // Pass in a template
         // =========================================================================

     });

     function deletecalendar(id) {
         if (confirm("确定删除吗?")) {
             $.ajax({
                 type: "Post",
                 url: "/calendar/Deletecalendar",
                 data: { id: id, d: new Date() },
                 success: function (data) {
                     alert(data.msg);
                     if (data.success == true) {
                         window.parent.location = window.parent.location;
                         window.close();
                     }
                 },
                 error: function (msg) {
                     alert("error:" + msg);
                 }
             });
         }
     }

     function save_yearcalendar()
     {
         $("#HolidayJson").val(JSON.stringify(loadHolidayObj));
         var data = $("#calendarEditForm").serialize();
         var pass = $('#calendarEditForm').valid();
         if (!pass){
             return;
         }
         main.post("/calendar/SaveUploadCalendar", data).done(function () {
             try {
                 window.parent.reloadcalendar();
                 parent.layer.closeAll();
             } catch (e) {

             }
         });
     }

     function saveSetWeight() {
         var kob = this;
         var newWeight = $('#setWeightInput').val().trim();
         if (newWeight !== "") {
             var savedWeight = parseFloat(newWeight);
             if (!savedWeight || savedWeight < 0 || savedWeight > 1) {
                 return main.alert('请设置合理的权重(0~1范围)');
             }
         } else { newWeight = "0"; }

         var curdate = $("#holidayDate").val();//可能带权重的旧值
         var curyearmonth = curdate.split(',')[0] + "," + curdate.split(',')[1];
         var datepart = curdate.indexOf('*') >= 0 ? curdate.split('*')[0] : curdate;
         var newcurDate = datepart + (newWeight !== "0" ? "*" + newWeight : "");
         var eventArray1 = [];
         var curclndr = $("#month" + parseInt(curdate.split(',')[1]));
         debugger;

         Calendar.HolidyObj = JSON.parse(Calendar.HolidayJson);
         Calendar.HolidyObj = $.grep(Calendar.HolidyObj, function (val) {
             return val.indexOf(curdate) < 0;
         });
         Calendar.HolidyObj.push(newcurDate);//update
         Calendar.HolidyObj.sort(function (a, b) { return b - a; });
         Calendar.HolidayJson = JSON.stringify(Calendar.HolidyObj);

         $.each(Calendar.HolidyObj, function (i, d) {
             if (d.indexOf(curyearmonth) >= 0) { //限当月
                 var wWeight = d.indexOf("*") > 0 ? d.split('*')[1] : "";
                 eventArray1.push({ startDate: d, endDate: d, withWeight: wWeight });
             }
         });

         curclndr.clndr().setEvents(eventArray1);//re-render calendar
         layer.closeAll();

         if (newWeight === "0") {
             layer.msg('已清除权重');
         }
         else {
             layer.msg('设置成功');
         }

     }

     //设置日期权重
     function showDateWeight(parm) {
         clearTimeout(timer);
         debugger;
         if (transferChineseToMonth(parm.curMonth) !== parm.curDay.split('-')[1]) {
             return;
         }

         var curdate = parm.curDay.replace(new RegExp("-", "g"), ',');
         var curWeight = parm.wWeight;
         console.log(parm);
         $("#setWeightInput").val(curWeight);
         $("#holidayDate").val(curWeight === "" ? curdate : curdate + "*" + curWeight);
         layer.open({
             type: 1,
             title: "当前为日期: <b>" + parm.curDay + "</b> 设置权重",
             area: '350px',
             content: $('#setWeight')
         });
     }

     function transferChineseToMonth(cnMonth) {

         if (cnMonth == "一月") {
             return "01";
         }
         else if (cnMonth == "二月") {
             return "02";
         }
         else if (cnMonth == "三月") {
             return "03";
         } else if (cnMonth == "四月") {
             return "04";
         } else if (cnMonth == "五月") {
             return "05";
         } else if (cnMonth == "六月") {
             return "06";
         } else if (cnMonth == "七月") {
             return "07";
         } else if (cnMonth == "八月") {
             return "08";
         } else if (cnMonth == "九月") {
             return "09";
         } else if (cnMonth == "十月") {
             return "10";
         } else if (cnMonth == "十一月") {
             return "11";
         } else if (cnMonth == "十二月") {
             return "12";
         }
     }

</script>
}

@using (Html.BeginForm("calendarEdit", "calendar", FormMethod.Post, new { id = "calendarEditForm" }))
{
    <div class="well" style="margin:0px auto;margin-top:10px;">
        <fieldset>
            <legend>日历上传</legend>

            <!--目前框架新增和修改同一界面，造成的问题就是输入的字段新增和修改都一样-->
            @if (Model != null)
            {
                <input type="hidden" value="@Model.id" name="id" id="id" />
            }
            @Html.HiddenFor(model => model.EncryptId)
            @Html.HiddenFor(model => model.HolidayJson)
            @Html.MyTextFor(model => model.Country)
            @Html.MyTextFor(model => model.Year)
            @*@Html.MyTextFor(model => model.Year)
                @Html.MyTextFor(model => model.HolidayJson)*@
            @Html.MyDropdownFor(model => model.ValidState, ConsGlobal.ValidStates(), "", false)
            <input id="CalendarImport" name="CalendarImport" type="file" accept="text/plain,application/json" onchange="showPreview(this)" />

        </fieldset>
    </div>
    <div>
        <div class="day event text-center" style="width:80px;display:inline-block;background-color:#B4E09F">假日</div>
        <div class="day event text-center withWeight" style="width:120px;display:inline-block;margin-left: 5px;padding:2px" title="双击日期设置权重">带权重假日</div>
        <div style="margin:0px auto;padding:10px;">
            @if (Model != null)
            {
                @MyControls.Btn("删除", "deletecalendar('" + Model.EncryptId + "');")
            }
            @MyControls.Btn("保存", "save_yearcalendar();")
            @MyControls.Btn("关闭", "closecalendarWindow()")

        </div>
    </div>

    <div class="well" style="margin:0px auto;margin-top:10px;display:none;" id="divyearmonth">
        <div class="form-group">
            <div class="col-sm-3">
                <div id="month1" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month2" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month3" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month4" class="cal2"></div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-3">
                <div id="month5" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month6" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month7" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month8" class="cal2"></div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-3">
                <div id="month9" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month10" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month11" class="cal2"></div>
            </div>
            <div class="col-sm-3">
                <div id="month12" class="cal2"></div>
            </div>
        </div>
    </div>

    <script type="text/template" id="clndr-template">
        <div class="clndr-controls">
            <div class="month"><%= month %></div>
        </div>
        <div class="clndr-grid">
            <div class="days-of-the-week">
                <% _.each(daysOfTheWeek, function (day) { %>
                <div class="header-day"><%= day %></div>
                <% }); %>
                <div class="days">
                    <% _.each(days, function (day) {   var curDay = day.date._d.Format('yyyy-MM-dd'); var bholiday =false; var wWeight=""; %>
                    <% var event = $.grep(eventsThisMonth, function (val) { return val.startDate.replace(new RegExp(",","g"),'-').indexOf(curDay)>=0; });    if(event.length>0){bholiday=true; wWeight= event[0].withWeight;}   %>
                    <%if(bholiday){ var title = !wWeight?"": "权重:"+ wWeight%>
                    <div ondblclick='showDateWeight({curMonth:"<%= month %>",curDay:"<%= curDay%>", wWeight:"<%= wWeight%>"});' title='<%= title%>' class="withWeight <%= day.classes %>"><%= day.day %></div>
                    <%} else {%>
                    <div ondblclick='showDateWeight({curMonth:"<%= month %>",curDay: "<%= curDay%>", wWeight:""});' class="<%= day.classes %>"><%= day.day %></div>
                    <% } %>
                    <% }); %>
                </div>

            </div>
        </div>
    </script>
}