<template>
    <div class="v-m-date-picker-component">

        <!--标题-->
        <span>{{label}}</span>

        <!--输入框-->
        <span 
            :class="['v-m-date-picker-input','v-m-date-picker-'+size]"
            :style="inputStyle"  
            @click="openDialog">{{currentDate}}
        </span>

        <div class="v-m-date-picker" v-if="isShow">

            <!--操作区域-->
            <div class="v-m-date-picker-operator">
                <span class="v-m-date-picker-operator-cancel" @click="btnCancel">取消</span>
                <span class="v-m-date-picker-value">{{ title? title: realTimeDate}}</span>
                <span class="v-m-date-picker-operator-ok" @click="btnOk">确定</span>
            </div>            

            <div class="v-m-date-picker-items">

                <!--年组件-->
                <dateRing 
                    :datelist="yearList" 
                    @date-change="yearChange" 
                    :value="year"
                    :date-type="0"
                    v-if="mode<=5" 
                    :item-height="itemHeight" 
                    :show-count="showCount" >
                </dateRing>

                <!--月组件-->
                <dateRing 
                    :datelist="monthList" 
                    @date-change="monthChange" 
                    v-if="mode>0 && this.mode<=5" 
                    :value="month"
                    :date-type="1" 
                    :item-height="itemHeight" 
                    :show-count="showCount" >
                </dateRing>

                <!--日组件-->
                <dateRing 
                    :datelist="dayList" 
                    @date-change="dayChange"  
                    v-if="[2,3,4,5].indexOf(mode)!=-1" 
                    :value="day"
                    :date-type="2" 
                    :item-height="itemHeight" 
                    :show-count="showCount" >
                </dateRing>

                <!--时组件-->
                <dateRing 
                    :datelist="hourList" 
                    @date-change="hourChange"  
                    v-if="mode>2" 
                    :value="hour"
                    :date-type="2" 
                    :item-height="itemHeight" 
                    :show-count="showCount" >
                </dateRing>

                <!--分组件-->
                <dateRing 
                    :datelist="minuteList" 
                    @date-change="minuteChange"  
                    v-if="[4,5,7,8].indexOf(mode)!=-1" 
                    :value="minute"
                    :date-type="2" 
                    :item-height="itemHeight" 
                    :show-count="showCount" >
                </dateRing>

                <!--秒组件-->
                <dateRing 
                    :datelist="secondList" 
                    @date-change="secondChange"  
                    v-if="[5,8].indexOf(mode)!=-1" 
                    :value="second"
                    :date-type="2" 
                    :item-height="itemHeight" 
                    :show-count="showCount" >
                </dateRing>

            </div>
        </div>

        <!--遮罩层-->
        <div class="v-m-date-picker-modal" v-if="isShow"></div>

    </div>
    
</template>
<script>

import dateRing from './dateRing.vue';//日期滑动组件
import mixins from './mixins.js';

export default {
    name:'v-m-date-picker',
    mixins:[mixins],
    components:{
        dateRing
    },
    data(){
        return {
            year:null,
            month:null,
            day:null,
            hour:null,
            minute:null,
            second:null,
            isShow:false,
            currentDate:null,
            yearList:[],
            monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
            dayList:[],
            hourList:[],
            minuteList:[],
            secondList:[],
            isValid:false,
            max_Date:null,
            min_Date:null
        };
    },
    computed:{
        //实时日期
        realTimeDate(){

            return this.generateDate(this.year,this.month,this.day,this.hour,this.minute,this.second);

        },
        inputStyle(){

            return this.width?{width:this.width+'px'}:'';

        }
    },
    props:{
        //标题
        label:{
            type:String,
            default:''
        },
        //最大日期
        maxDate:{
            type:String,
            default:null
        },
        //最小日期
        minDate:{
            type:String,
            default:null
        },
        //当前日期往前推的年数
        back:{
            type:Number,
            default:10
        },
        //展示的日期行数
        showCount:{
            type:Number,
            default:5
        },
        //每一项的高度
        itemHeight:{
            type:Number,
            default:36
        },
        /*
        *日期模式
        *0:YYYY(年模式)
        *1:YYYY-MM(年月模式)
        *2:YYYY-MM-DD(年月日模式)
        *默认值:0:YYYY(年模式)
         */
        mode:{
            type:Number,
            default:0
        },
        //默认日期
        value:{
            type:String,
            default:null
        },
        //输入框宽度
        width:{
            type:Number
        },
        //输入框尺寸
        size:{
            type:String,
            default:'small'
        },
        title:{
            type:String,
            default:null
        }
    },
    methods:{
        //年日期切换事件
        yearChange(value){

            this.year=value;
            this.generateMonthData();//更新月日期
            this.generateDayData();//更新日日期数据

        },
        //月日期切换事件
        monthChange(value){

            this.month=value;
            this.generateDayData();//更新日日期数据

        },
        //日日期切换事件
        dayChange(value){

            this.day=value;
            this.generateHourData();//更新小时数据

        },
        //小时切换事件
        hourChange(value){

            this.hour=value;
            this.generateMinuteData();//更新分钟数据

        },
        //分钟切换事件
        minuteChange(value){

            this.minute=value;
            this.generateSecondData();//更新秒钟数据

        },
        secondChange(value){

            this.second=value;

        },
        //确定事件
        btnOk(){

            this.currentDate= this.generateDate(this.year,this.month,this.day,this.hour,this.minute,this.second);
            this.isShow=false;

        },
        //取消事件
        btnCancel(){

            this.isShow=false;

        },
        //打开日期弹窗
        openDialog(){

            if(this.isValid){

                this.setDefaultSelectedDate(this.currentDate);

                this.isShow=true;
                
            }            

        },
        //创建日期
        createDate(){

            this.init();//初始化
            this.isValid= this.analysisDate();//解析日期

            if(this.isValid){

                this.generateYearData();//生成年数据
                this.generateMonthData();//生成月数据
                this.setDefaultSelectedDate(this.value);//设置默认选中日期
                this.generateDayData();//生成日数据
                this.generateHourData();//生成小时数据
                this.generateMinuteData();//生成分钟数据
                this.generateSecondData();//生成秒钟数据

                this.currentDate= this.generateDate(this.year,this.month,this.day,this.hour,this.minute,this.second);

            }

        }
    },
    created(){

        this.createDate();
        
    },
    watch:{
        value(){

            this.createDate();

        },
        currentDate(){

            this.$emit('input',this.currentDate);

        },
        maxDate(){

            this.max_Date=this.maxDate;
            this.createDate();

        },
        minDate(){

            this.min_Date=this.minDate;
            this.createDate();

        }
    }
}
</script>

