<template>
    <div class="y_datetimePicker">
        <y-picker cursor-class="y_datetimePicker_cursor"
                  :columns="columns"
                  :value-key="valueA"
                  @update:valueKey="fnSelectChange"></y-picker>
    </div>
</template>

<script>
    import yPicker from "./yPicker";
    import {getTime,newDate } from "../utils/utils";
    import Vue from "vue";

    export default {
        name: "yDatetimePicker",
        components:{
            yPicker
        },
        computed:{
            maxDateFormat(){
                let ret = "";
                if(this.maxDate == "now"){
                    ret = new Date();
                }
                else{
                    ret = this.maxDate ? newDate(this.maxDate) : "";
                }
                if(this.type == 'dateHour' && this.hourPools && this.hourPools.indexOf(ret.getHours())<0){
                    ret = new Date(new Date(ret.getTime()-24*60*60*1000).setHours(this.hourPools[this.hourPools.length-1]))
                }
                return ret;
            },
            minDateFormat(){
                let ret = "";
                if(this.minDate == "now"){
                    ret = new Date();
                }
                else{
                    ret = this.minDate ? newDate(this.minDate) : "";

                }
                return ret;
            },
            maxDay(){
                let ret = new Date(this.valueA[0], this.valueA[1], 0).getDate();
                if(!ret){
                    ret = 31;
                }
                if(this.maxDateFormat && this.largeYear == this.valueA[0] && this.largeMonth == this.valueA[1]){
                    ret = this.maxDateFormat.getDate()
                }
                return  ret;
            },
            largeYear(){
                let ret = this.maxYear;
                if(this.maxDateFormat){
                    ret = this.maxDateFormat.getFullYear();
                }
                return ret;
            },
            largeMonth(){
                let ret = 12;
                if(this.maxDateFormat){
                    if(this.largeYear == this.valueA[0]){
                        ret = this.maxDateFormat.getMonth()  +1 ;
                    }
                }
                return ret;
            },
            largeHour(){
                let ret = 23;
                if(this.type == 'dateHour') {
                    if (this.maxDateFormat && this.largeYear == this.valueA[0] && this.largeMonth == this.valueA[1] && this.maxDay == this.valueA[2]) {
                        ret = this.maxDateFormat.getHours() ;
                    }
                }
                return ret;
            },
            beginDay(){
                let ret = 1
                if(this.minDateFormat && this.beginYear == this.valueA[0] && this.beginMonth == this.valueA[1]){
                    ret = this.minDateFormat.getDate();
                    if(this.type == 'dateHour' &&  this.hourPools &&  this.hourPools.length>0 &&　this.minDateFormat){
                        let ccArr = [];
                        this.hourPools.forEach(item=>{
                            ccArr.push(parseInt(item));
                        })
                        ccArr =ccArr.sort((a,b)=>{
                            if(a>b){
                                return 1;
                            }
                            else if(a<b){
                                return -1
                            }
                            else{
                                return 0;
                            }
                        });
                        if(this.minDateFormat.getHours() > ccArr[ccArr.length-1]){
                            ret = ret +1;
                        }
                    }
                }
                return  ret;
            },

            beginYear(){
                let ret = this.minYear;
                if(this.minDateFormat){
                    ret = this.minDateFormat.getFullYear();
                }
                return ret;
            },


            beginMonth(){
                let ret = 1;
                if(this.minDateFormat){
                    if(this.beginYear == this.valueA[0]){
                        ret = this.minDateFormat.getMonth()  +1 ;
                    }
                }
                return ret;
            },

            beginHour(){
                let ret = 0;
                if(this.type == 'dateHour') {
                    if (this.minDateFormat &&  this.beginYear == this.valueA[0] && this.beginMonth == this.valueA[1] && this.beginDay == this.valueA[2]) {
                        ret = this.minDateFormat.getHours() ;
                    }
                }
                return ret;
            },
            isDate(){
                return this.type == "date";
            },
        },
        data(){
            return {
                columns:[],
                outValue:"",
                valueA:{}
            }
        },
        methods:{
            changeMonth(){
                if(this.valueA[2]>this.maxDay){
                    this.valueA[2] = this.maxDay;
                }
                this.columns.splice(2,1,this.getPickList(1))
            },
            changeDay(){
                if(this.valueA[2]>this.maxDay){
                    this.valueA[2] = this.maxDay;
                }
                this.columns.splice(2,1,this.getPickList(1))
            },
            changeHour(){
                if(this.valueA[3]>this.largeHour){
                    this.valueA[3] = this.largeHour;
                }
                this.columns.splice(3,1,this.getPickList(4))
            },
            dayList(){
                let ret = [];
                let maxDay = this.maxDay;
                for(let n=this.beginDay;n<=maxDay;n++){
                    ret.push(n)
                }
                return ret;
            },
            hourList(){
                let ret = [];

                for(let n=this.beginHour;n<=this.largeHour;n++){
                    if(this.hourPools && this.hourPools.length>0){
                        if(this.hourPools.indexOf(n)>-1) {
                            ret.push(n)
                        }
                    }
                    else{
                        ret.push(n)
                    }
                }
                if(ret.length < 1){
                    ret = this.hourPools;
                }
                return ret;
            },
            formatSingle(valueA){
                valueA = parseInt(valueA);
                if(valueA<10){
                    valueA = "0" + valueA;
                }
                return valueA;
            },
            getPickList(type){
                let list,label,style;
                switch (type) {
                    case 1:
                        list = this.dayList();
                        label = this.labelDay;
                        style = {
                            textAlign:"center",
                            textIndent:"3em"
                        }
                        break;
                    case 2:
                        list = this.monthList();
                        label = this.labelMonth;
                        style = {
                            textAlign:"center",
                            textIndent:"3em"
                        }
                        break;
                    case 3:
                        list = this.yearList();
                        label = this.labelYear;
                        style = {
                            textAlign:"center",
                            textIndent:(this.isDate || this.type == 'dateHour' ? "5em" : "3em")
                        }
                        break;
                    case 4:
                        list = this.hourList();
                        label = this.labelHour;
                        style = {
                            textAlign:"center",
                            textIndent:"3em"
                        }
                        break;
                }
                return {
                    values:list,
                    label:label,
                    style:style
                }
            },
            monthList(){
                let ret = [];
                for(let n=this.beginMonth;n<=this.largeMonth;n++){
                    ret.push(n)
                }
                return ret;
            },
            setPicker(){
                this.columns.splice()
                if(this.isDate){
                    this.columns[0] = this.getPickList(3);
                    this.columns[1] = this.getPickList(2);
                    this.columns[2] = this.getPickList(1);
                }
                else if(this.type == 'dateHour'){
                    this.columns[0] = this.getPickList(3);
                    this.columns[1] = this.getPickList(2);
                    this.columns[2] = this.getPickList(1);
                    this.columns[3] = this.getPickList(4);
                }
            },
            setDate(time){
                let ccDate = newDate(time || this.date || "");
                if(ccDate.getTime()< this.minDateFormat.getTime()){
                    ccDate = this.minDateFormat;
                }
                if(ccDate.getTime() > this.maxDateFormat.getTime()){
                    ccDate = this.maxDateFormat;
                }
                if(!isNaN(ccDate.getTime())){
                    let day = ccDate.getDate();
                    let month = ccDate.getMonth()+1;
                    let year = ccDate.getFullYear();
                    let hours = ccDate.getHours();
                    if(this.isDate){
                        /*
                        this.valueA[0] = year;
                        this.valueA[1] = month;
                        this.valueA[2] = day;
                         */
                        this.valueA = [year,month,day];
                    }
                    else if(this.type == "dateHour"){
                        /*this.valueA[0] = year;
                        this.valueA[1] = month;
                        this.valueA[2] = day;
                        this.valueA[3] = hours;*/
                        this.valueA = [year,month,day,hours];
                    }
                    this.outValue =this.date;
                }
            },
            yearList(){
                let maxYear = this.largeYear;
                let minYear = this.beginYear;
                let ret = [];
                for(let n=minYear;n<=maxYear;n++){
                    ret.push(n)
                }
                return ret;
            },
            fnSelectChange(val){
                const self = this;

                let str = "";
                if (this.type == "date") {
                    str = val[0] + "-" + val[1] + "-" + val[2];
                }
                if (this.type == "dateHour") {
                    str = val[0] + "-" + val[1] + "-" + val[2] + " " + val[3] + ":00:00";
                }
                let ccDate = newDate(str);
                let isOver = false;
                if(ccDate.getTime()< this.minDateFormat.getTime()){
                    ccDate = this.minDateFormat;
                    isOver = true;
                }
                if(ccDate.getTime() > this.maxDateFormat.getTime()){
                    ccDate = this.maxDateFormat;
                    isOver = true;
                }
                if(isOver){
                    self.setDate(str);
                }
                else{
                    Vue.set(this.valueA,"0",val[0]);
                    if(val[1]>this.largeMonth){
                        val[1] = this.largeMonth;
                    }
                    else if(val[1] < this.beginMonth){
                        val[1] = this.beginMonth;
                    }
                    Vue.set(this.valueA,"1",val[1]);

                    if(val[2]>this.maxDay){
                        val[2] = this.maxDay;
                    }
                    else if(val[2] < this.beginDay){
                        val[2] = this.beginDay;
                    }
                    Vue.set(this.valueA,"2",val[2]);
                    if(this.type == "dateHour") {
                        if (val[3] > this.largeHour) {
                            val[2] = this.largeHour;
                        } else if (val[2] < this.beginHour) {
                            val[2] = this.beginHour;
                        }
                        Vue.set(this.valueA, "3", val[3]);
                    }
                }

                setTimeout(ast=>{
                    self.setPicker();
                },20)
            }
        },
        model:{
            prop:"date",
            event:"update:date"
        },
        props:{
            date:{},
            dateFormat:"",
            hourPools:Array,
            maxYear:{
                default:2100,
            },
            minYear:{
                default:1900,
            },
            maxDate:{
                default:"now"
            },
            minDate:{
                default:"1990-03-09 08:00:00"
            },
            labelYear:{
                default:"年"
            },
            labelHour:{
                default:"时"
            },
            labelMonth:{
                default:"月"
            },
            labelDay:{
                default:"日"
            },
            type:{
                default:"date"
            },
        },
        watch:{
            /*"valueA.0"(){
                this.changeDay();
                this.columns[1] = this.getPickList(2);
            },
            "valueA.1"(){
                this.changeDay();
            },
            "valueA.2"(){
                if(this.type == "dateHour"){
                    this.changeHour();
                }
            },*/
            valueA(){
                if(this.isDate){
                    let year =  this.valueA[0];
                    let month =  this.formatSingle(this.valueA[1]);
                    let day =  this.formatSingle(this.valueA[2]);
                    let ret = new Date(year+ "-"+ month + "-" +day).getTime();
                    if(this.dateFormat){
                        ret = getTime(ret,this.dateFormat);
                    }
                    this.outValue = ret;
                }
                if(this.type == 'dateHour'){
                    let year =  this.valueA[0];
                    let month =  this.formatSingle(this.valueA[1]);
                    let day =  this.formatSingle(this.valueA[2]);
                    let hours =  this.formatSingle(this.valueA[3]);
                    let ret = new Date(year+ "/"+ month + "/" +day+" "+hours + ":00:00").getTime();
                    if(this.dateFormat){
                        ret = getTime(ret,this.dateFormat);
                    }
                    this.outValue = ret;
                }


                this.$emit("update:date",this.outValue);
            },
            date(){
                this.setDate();
            }
        },
        created(){
            if(this.date){
                this.setDate();
            }
            this.setPicker();
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    .y_datetimePicker{
        font-size: $font_size_t3;
    }
    .y_datetimePicker_cursor{
        &>div {
            text-align: center;
            text-indent: 3em;
            &:first-child {

                text-indent: 5em;
            }

        }
    }
</style>
