/**
 *  author:(zengytchn@126.com)
 *  申明:仿照elementui的日期选择器
 *  inputvalchange(time) 更改时间回调函数
 *  today: 默认选中当日
 *  .calendar  外层显示，点击弹出日期选择器，样式自定义设置
 *  .calendarbox 选择器父元素
 *  .selecttime 时间赋值input
 *
 *  html 例子：
    <div>
        <div class="calendar">
            查询日期：<input type="text" class="selecttime" today readonly/>
        </div>
        <div class="calendarbox"></div>
    </div>
 * 
*/


var keyyear = '';  // 年
var keymonth = '';  // 月
var nowyear = '';   // 此刻 年
var nowmonth = '';  // 此刻 月
var dated = '';    // 时间 国际化
$(document).ready(function(){
    $('body').on('click','.calendar',function(){
        $('.calendarmodel').show()
    })
    // 获取现在年月
    dated = new date();
    nowyear = dated.getyear() + 1900;
    nowmonth = dated.getmonth() + 1;
    keyyear = nowyear;
    keymonth = nowmonth;
    selectdatemodel(keyyear,keymonth)
    $('.calendarmodel').hide()
    // 上一月
    $('body').on('click','.upmonth',function(){
        keymonth--;
        if(keymonth <= 0){
            keymonth = 12;
            keyyear--;
        }
        selectdatemodel(keyyear,keymonth)
    })
    // 下一月
    $('body').on('click','.downmonth',function(){
        keymonth++;
        if(keymonth > 12){
            keymonth = 1;
            keyyear++;
        }
        selectdatemodel(keyyear,keymonth)
    })
    // 上一年
    $('body').on('click','.upyear',function(){
        keyyear--;
        selectdatemodel(keyyear,keymonth)
    })
    // 下一年
    $('body').on('click','.downyear',function(){
        keyyear++;
        selectdatemodel(keyyear,keymonth)
    })
    // 月选择 - 上一年
    $('body').on('click','.mdupyear',function(){
        keyyear--;
        affirmmonth(keyyear);
    })
    // 月选择 - 下一年
    $('body').on('click','.mddownyear',function(){
        keyyear++;
        affirmmonth(keyyear);
    })
    // 年选择 - 上一年
    $('body').on('click','.ydupyear',function(){
        keyyear = keyyear - 10;
        selectyearmodel(keyyear);
    })
    // 年选择 - 下一年
    $('body').on('click','.yddownyear',function(){
        keyyear = keyyear + 10;
        selectyearmodel(keyyear);
    })

    // 默认显示当天
    if($('.selecttime').attr('today') != undefined){
        todayrlbutfun();
    }
})
// 渲染时间选择器首页
function selectdatemodel(year,month){
    var calendar1 = '';
    calendar1 = '<div class="calendarmodel" id="calendarmodelid">'
                +'     <ul class="yearul">'
                +'       <li class="upyear tc"><<</li>'
                +'       <li class="upmonth tc"><</li>'
                +'       <li class="showym tc">'
                +'       </li>'
                +'       <li class="downmonth tc">></li>'
                +'       <li class="downyear tc">>></li>'
                +'   </ul>'
                +'   <ul class="weekul">'
                +'           <li>日</li>'
                +'           <li>一</li>'
                +'           <li>二</li>'
                +'           <li>三</li>'
                +'           <li>四</li>'
                +'           <li>五</li>'
                +'           <li>六</li>'
                +'   </ul>'
                +'   <ul class="dateul">'
                +'   </ul>'
                +'   <button class="fr closerlbut" onclick="closerlbutfun();">取 消</button>'
                +'   <button class="fr todayrlbut" onclick="todayrlbutfun();">今 天</button>'
            +' </div>'
    var datelist = [];
    // 判断 月的1号周几
    var datestrw =  year+'/'+month+'/1';
    var mydate = new date(date.parse(datestrw));
    switch (mydate.getday()) {
        case 0:
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month)); x++){
                datelist.push(x)
            }
            break;
        case 1:
            datelist.push(monthmanydate(year,month - 1))
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month) - 1); x++){
                datelist.push(x)
            }
            break;
        case 2:
            for(var s = 1;s >= 0; s--){
                datelist.push(monthmanydate(year,month - 1) - s)
            }
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month) - 2); x++){
                datelist.push(x)
            }
            break;
        case 3:
            for(var s = 2;s >= 0; s--){
                datelist.push(monthmanydate(year,month - 1) - s)
            }
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month) - 3); x++){
                datelist.push(x)
            }
            break;
        case 4:
            for(var s = 3;s >= 0; s--){
                datelist.push(monthmanydate(year,month - 1) - s)
            }
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month) - 4); x++){
                datelist.push(x)
            }
            break;
        case 5:
            for(var s = 4;s >= 0; s--){
                datelist.push(monthmanydate(year,month - 1) - s)
            }
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month) - 5); x++){
                datelist.push(x)
            }
            break;
        case 6:
            for(var s = 5;s >= 0; s--){
                datelist.push(monthmanydate(year,month - 1) - s)
            }
            for(var w = 1;w <= monthmanydate(year,month);w++){
                datelist.push(w)
            }
            for(var x = 1;x <= (42 - monthmanydate(year,month) - 6); x++){
                datelist.push(x)
            }
            break;
        default:
            alert('日期计算错误！')
            break;
    }
    var titledate = '';
        titledate +='<div class="showym-year fl" onclick="affirmyear(\'' + year + '\');">'+year+'年</div>'
        titledate +='<div class="showym-month fl" onclick="affirmmonth(\'' + year + '\');">'+month+'月</div>'
    var nowdatevray = '';
    var dayflag = false;
    var datecolor = 0;
    for(var d = 0; d < datelist.length; d++){
        if(
            new date().getdate() == datelist[d]
            && new date().getmonth() + 1 == month
            && !dayflag
        ){
            dayflag = true;
            nowdatevray += '<li class="dateday" onclick="acknowledgement(\'' + datelist[d] + '\',' +year + ',' +month + ');">'+ datelist[d] +'</li>'
        }else{
            if(datelist[d] == 1 || datecolor == 1 || datelist[d] == monthmanydate(year,month)&&datecolor == 1){
                if(datelist[d] == 1 && datecolor == 0){
                    datecolor = 1;
                }
                if(datecolor == 1){
                    nowdatevray += '<li class="thismonth" onclick="acknowledgement(\'' + datelist[d] + '\',' +year + ',' +month + ');">'+ datelist[d] +'</li>'
                }else{
                    nowdatevray += '<li onclick="acknowledgement(\'' + datelist[d] + '\',' +year + ',' +month + ');">'+ datelist[d] +'</li>'
                }
                if(datelist[d] == monthmanydate(year,month)){
                    datecolor = 2;
                }
            }else{
                nowdatevray += '<li onclick="acknowledgement(\'' + datelist[d] + '\',' +year + ',' +month + ');">'+ datelist[d] +'</li>'
            }
        }
    }
    $('.dateul').empty();
    $('.showym').empty();
    $('.calendarbox').html(calendar1)
    $('.calendarmodel').show()
    $('.showym').append(titledate)
    $('.dateul').append(nowdatevray)
}
// 判断月共几天
function monthmanydate(year,month){
    return new date(year, month, 0).getdate()
}
// 选择月 渲染
function selectmonthmodel(yearval) {
    var monthout = '';
    monthout = '<div class="monthmodel">'
            +'    <ul class="mdyearul">'
            +'        <li class="mdupyear tc fl"><<</li>'
            +'        <li class="mdshowym tc fl">'+yearval+'年</li>'
            +'        <li class="mddownyear tc fl">>></li>'
            +'    </ul>'
            +'    <ul class="mdmothul">'
            +'        <li onclick="ensuremonth(\''+1+'\')">一月</li>'
            +'        <li onclick="ensuremonth(\''+2+'\')">二月</li>'
            +'        <li onclick="ensuremonth(\''+3+'\')">三月</li>'
            +'        <li onclick="ensuremonth(\''+4+'\')">四月</li>'
            +'        <li onclick="ensuremonth(\''+5+'\')">五月</li>'
            +'        <li onclick="ensuremonth(\''+6+'\')">六月</li>'
            +'        <li onclick="ensuremonth(\''+7+'\')">七月</li>'
            +'        <li onclick="ensuremonth(\''+8+'\')">八月</li>'
            +'        <li onclick="ensuremonth(\''+9+'\')">九月</li>'
            +'        <li onclick="ensuremonth(\''+10+'\')">十月</li>'
            +'        <li onclick="ensuremonth(\''+11+'\')">十一月</li>'
            +'        <li onclick="ensuremonth(\''+12+'\')">十二月</li>'
            +'    </ul>'
            +'</div>'        
    $('.calendarbox').html(monthout)
    $('.monthmodel').show()
}
function selectyearmodel(yearval) {
    var yearout = '';
    yearout = '<div class="yearmodel">'
            +' <ul class="ydyearul">'
            +'     <li class="ydupyear tc fl"><<</li>'
            +'     <li class="ydshowym tc fl">'+(number(yearval) - 9)+'年 - '+yearval+'年</li>'
            +'     <li class="yddownyear tc fl">>></li>'
            +' </ul>'
            +' <ul class="ydmothul">'
            +' </ul>'
        +' </div>'
    var ydhtml = '';
    for (let p = 9; p >= 0; p--) {
        ydhtml += '<li onclick="ensureyear(\''+number(yearval - p)+'\')">'+ number(yearval - p) +'</li>'
    }
    $('.calendarbox').html(yearout)
    $('.ydmothul').append(ydhtml)
    $('.yearmodel').show()
}
// 选中关闭日期选择器
function acknowledgement(datev,yearv,monthv){
    var yn = string(yearv);
    var my = monthv>9? string(monthv):'0'+string(monthv);
    var dt = number(datev)>9? datev:'0'+datev;
    var timevalue = yn +'-'+ my +'-'+dt;
    $('.selecttime').val(timevalue)
    $('.calendarmodel').hide();
    inputvalchange(timevalue);  // 选择的事件 - 触发事件
}
// 选择月份 - 界面
function affirmmonth(val) { 
    selectmonthmodel(val)
}
// 选择年份 - 界面
function affirmyear(val){
    selectyearmodel(val)
}
    // 月份 - 确定
function ensuremonth(val){
    keymonth = val;
    selectdatemodel(keyyear,keymonth)
}
// 年份 - 确定
function ensureyear(val){
    keyyear = val;
    selectmonthmodel(val)
}
// 点击 取消 关闭
function closerlbutfun(){
    $('.calendarmodel').hide();
}
// 选择今天
function todayrlbutfun(){
    acknowledgement(new date().getdate(),nowyear,nowmonth)
}