<template>
    <view class="ev_date_picker_view" :class="{'ev_date_picker_view_active': showPicker}" @click="onPopupClose">
            <view class="ev_date_picker_view_box">
                <view class="ev_date_picker_view_child" @click.stop="">
                    <view class="ev_picker_wrapper_header">
                        <text class="ev_picker_wrapper_header_cancle" @click="onPopupClose">取消</text>
                        <text class="ev_picker_wrapper_header_confim" @click="handleConfirmPicker">确定</text>
                    </view>
                    <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
                        </picker-view-column>
                        <picker-view-column>
                            <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>
    </view>
</template>

<script>
export default {
    props: {
        showPicker: {
            default: false,
            type: Boolean
        },
        startDate: {
            default: new Date().getTime(),
            type: Number
        },
        endDate: {
            default: new Date().getTime() + 30*24*60*60*1000,
            type: Number
        },
    },
    data: function () {
        const startdate = new Date(this.startDate);
        const enddate = new Date(this.endDate);
        const years = [];
        const startyear = startdate.getFullYear();
        const endyear = enddate.getFullYear();
        const months = [];
        const startmonth = startdate.getMonth() + 1;
        const endmonth = enddate.getMonth() + 1;
        const days = [];
        const startdays = [];
        const enddays = [];
        const middledays = [];
        const startday = startdate.getDate();
        const endday = enddate.getDate();
        const hours = [];
        const middlehours = [];
        const starthours = [];
        const endhours = [];
        const starthour = startdate.getHours();
        const endhour = enddate.getHours();
        const minutes = [];
        const startminutes = [];
        const endminutes = [];
        const middleminutes = [];
        const startminute = startdate.getMinutes();
        const endminute = enddate.getMinutes();
        if (startyear === endyear) {
            years.push(startyear);
        }else {
            for (let i = startyear; i <= endyear; i++) {
                years.push(i)
            }
        }
        if (startmonth === endmonth) { // 当前月
            months.push(startmonth);
            for (let i = startday; i <= endday; i++) {
                days.push(i);
                startdays.push(i);
                enddays.push(i);
            }
        }else {
            if (startyear === endyear) {
                for (let i = startmonth; i <= endmonth; i++) {
                    months.push(i);
                }
            }else {
                for (let i = startmonth; i <= 12; i++) {
                    months.push(i);
                }
            }
            let startlastDay = (new Date(startyear,startmonth,0)).getDate();
            for (let i = startday; i <= startlastDay; i++) {
                days.push(i);
                startdays.push(i);
            }
            for (let i = 1; i <= endday; i++) {
                enddays.push(i)
            }
        }
        for (let i = starthour; i <= 23; i++) {
            hours.push(i);
            starthours.push(i);
        }
        for (let i = 0; i <= endhour; i++) {
            endhours.push(i);
        }
        for (let i = 0; i <= 23; i++) {
            middlehours.push(i);
        }
        for (let i = 0; i <= 59; i++) {
            middleminutes.push(i);
        }
        for (let i = startminute; i <= 59; i++) {
            minutes.push(i);
            startminutes.push(i);
        }
        for (let i = 0; i <= endminute; i++) {
            endminutes.push(i);
        }
        return {
            showTop: true,
            title: 'picker-view',
            years,
            selectyear: startyear,
            startyear,
            endyear,
            months,
            selectmonth: startmonth,
            startmonth,
            endmonth,
            days,
            startdays,
            enddays,
            middledays,
            endday,
            startday,
            selectday: startday,
            hours,
            middlehours,
            endhours,
            endhour,
            starthours,
            selecthour: starthour,
            starthour,
            minutes,
            middleminutes,
            startminutes,
            endminutes,
            selectminute: startminute,
            startminute,
            value: [0, 0, 0, 0, 0],
            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
        }
    },
    methods: {
        bindChange: function (e) {
            const val = e.detail.value;
            this.selectyear = this.years[val[0]];
            this.selectmonth = this.months[val[1]];
            this.selectday = this.days[val[2]];
            this.selecthour = this.hours[val[3]];
            this.selectminute = this.minutes[val[4]];
            if ((this.endmonth - this.startmonth) >= 2) {
                this.middledays = [];
                let middlelastDay = (new Date(this.selectyear,this.selectmonth,0)).getDate();
                for (let i = 1; i <= middlelastDay; i++) {
                    this.middledays.push(i);
                }
            }
            if (this.endyear !== this.startyear && this.selectyear === this.endyear) {
                this.months = [];
                for (let i = 1; i <= this.endmonth; i++) {
                    this.months.push(i);
                }
            }else if (this.endyear !== this.startyear && this.selectyear === this.startyear) {
                this.months = [];
                for (let i = this.startmonth; i <= 12; i++) {
                    this.months.push(i);
                }
            }
            if(val[1] === 0 && this.selectyear === this.startyear) {
                this.days = this.startdays;
            }else if (val[1] === this.months.length - 1) {
                this.days = this.enddays;
            }else {
                this.days = this.middledays;
            }
            if (this.endyear !== this.startyear && this.selectyear === this.endyear && this.selectmonth === this.endmonth) {
                this.days = this.enddays;
            }
            if (this.days[val[2]] === this.startday && val[1] === 0 && this.selectyear === this.startyear) {
                this.hours = this.starthours;
            }else if (this.days[val[2]] === this.endday && val[1] === this.months.length - 1){
                this.hours = this.endhours;
            }else {
                this.hours = this.middlehours;
            }
            if (this.endyear !== this.startyear && this.selectyear === this.endyear && this.selectday === this.endday) {
                this.hours = this.endhours;
            }
            if (this.days[val[2]] === this.startday && val[1] === 0 && this.hours[val[3]] === this.starthour && this.selectyear === this.startyear) {
                this.minutes = this.startminutes;
            }else if (this.days[val[2]] === this.endday && val[1] === this.months.length - 1 && this.hours[val[3]] === this.endhour) {
                this.minutes = this.endminutes;
            }else {
                this.minutes = this.middleminutes;
            }
            if (this.endyear !== this.startyear && this.selectyear === this.endyear && this.selecthour === this.endhour) {
                this.minutes = this.endminutes;
            }
        },
        onPopupClose() {
			this.$emit('handleConfirmPicker', '');
        },
        handleConfirmPicker() {
            this.$emit('handleConfirmPicker', this.selectyear + '' + (this.selectmonth < 10 ? '0' + this.selectmonth : this.selectmonth) + '' + (this.selectday < 10 ? '0' + this.selectday : this.selectday)  + '' + (this.selecthour < 10 ? '0' + this.selecthour : this.selecthour) + '' + (this.selectminute < 10 ? '0' + this.selectminute : this.selectminute) + '00');
        }
    }
}
</script>

<style lang="less" scoped>
@import './../../common/common.less';
.ev_date_picker_view {
    width: 100%;
    height: 0;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -800px;
    transition: all linear 0.2s;
    .ev_date_picker_view_box {
        height: 100vh;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        .ev_date_picker_view_child {
            width: 100%;
            background: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
}
.ev_date_picker_view_active {
    bottom: 0;
}
.ev_picker_wrapper_header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d7d7d7;
    .ev_picker_wrapper_header_cancle, .ev_picker_wrapper_header_confim {
        display: inline-block;
        padding: 0 16px;
        font-size: 28upx;
    }
    .ev_picker_wrapper_header_cancle {
        color: #999;
    }
    .ev_picker_wrapper_header_confim {
        color: @baseColor;
    }
}
picker-view {
    width: 100%;
    height: 476upx;
}
.item {
    line-height: 100upx;
    text-align: center;
}
</style>

