<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="uni-title" @tap="dateClick">
                日期：{{dateObj.nian}}年{{dateObj.yue}}月{{dateObj.ri}}日
            </view>
        </view>
        <uni-popup class="popup-layout" ref="popup_ref"
                   type="bottom" :maskClick=false>
            <view class="popup-opera-layout">
                <view class="popup-opera-left" @tap="datePickerCancel">
                    取消
                </view>
                <view class="popup-opera-center">
                    选择日期
                </view>
                <view class="popup-opera-right" @tap="datePickerConfirm">
                    确定
                </view>
            </view>
            <picker-view class="popup-view-layout" :value="defaultValue"
                         :indicator-style="indicatorStyle"
                         @change="datePickerChange">
                <picker-view-column>
                    <view class="popup-view-item" v-for="(item,index) in  datePickerObj.yearArr"
                          :key="index">{{item}}年
                    </view>
                </picker-view-column>
                <picker-view-column>
                    <view class="popup-view-item" v-for="(item,index) in datePickerObj.monthArr"
                          :key="index">{{item}}月
                    </view>
                </picker-view-column>
                <picker-view-column>
                    <view class="popup-view-item" v-for="(item,index) in datePickerObj.dayArr"
                          :key="index">{{item}}日
                    </view>
                </picker-view-column>
            </picker-view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            var curDate = new Date()
            var datePickerObj = {
                yearArr: [],
                monthArr: [],
                dayArr: [],
                curYear:curDate.getFullYear(),
                curMonth: curDate.getMonth() + 1,
                curDay: curDate.getDate()
            }

            for (let i = 2020; i <= curDate.getFullYear(); i++) {
                datePickerObj.yearArr.push(i)
            }

            for (let i = 1; i <= 12; i++) {
                datePickerObj.monthArr.push(i)
            }

            for (let i = 1; i <= 31; i++) {
                datePickerObj.dayArr.push(i)
            }
            return {
                datePickerObj,
                defaultValue: [ datePickerObj.yearArr[ datePickerObj.yearArr.length-1],
                    datePickerObj.curMonth - 1, datePickerObj.curDay - 1],
                indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync()
                    .screenWidth / (750 / 100))}px;`,
                dateObj:{
                    nian: '',
                    yue: '',
                    ri: ''
                }


            }
        },
        methods: {
            datePickerChange(e) {
                var that=this;
                let cMonth;
                let cYear;
                console.log(e);
                let val = e.detail.value;
                cYear = that.datePickerObj.yearArr[val[0]];
                cMonth = that.datePickerObj.monthArr[val[1]];
                that.datePickerObj.curDay = that.datePickerObj.dayArr[val[2]];
                that.datePickerObj.curMonth = cMonth;
                that.datePickerObj.curYear = cYear;
                that.datePickerObj.dayArr = [];
                if (cMonth || y) {
                    if (cMonth == 1 || cMonth == 3 || cMonth == 5 || cMonth == 7
                        || cMonth == 8 || cMonth == 10 || cMonth == 12) {
                        for (let i = 1; i <= 31; i++) {
                            that.datePickerObj.dayArr.push(i)
                        }
                    } else if (cMonth == 4 || cMonth == 6 || cMonth == 11 || cMonth == 9) {
                        for (let i = 1; i <= 30; i++) {
                            that.datePickerObj.dayArr.push(i)
                        }

                    } else if (cMonth == 2) {
                        if (that.datePickerObj.curYear % 4 == 0
                            && (that.datePickerObj.curYear % 100 != 0
                                || that.datePickerObj.curYear % 400 == 0)) {
                            for (let i = 1; i <= 29; i++) {
                                that.datePickerObj.dayArr.push(i)
                            }
                        } else {
                            for (let i = 1; i <= 28; i++) {
                                that.datePickerObj.dayArr.push(i)
                            }
                        }
                    }

                }
            },
            dateClick() {
                this.$refs.popup_ref.open();
            },
            datePickerCancel() {
                this.$refs.popup_ref.close();
            },
            datePickerConfirm() {
                this.dateObj.nian = this.datePickerObj.curYear;
                this.dateObj.yue = this.datePickerObj.curMonth;
                this.dateObj.ri = this.datePickerObj.curDay;
                this.$refs.popup_ref.close();
            }
        }
    }
</script>

<style scoped lang="scss">
    .popup-layout {
        position: absolute;
        bottom: 0;
        width: 100vw;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background-color: #FFFFFF;
    }

    .popup-opera-layout {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px 15px;
        border-bottom: black solid 1px;
    }

    .popup-opera-left {
        color: white;
        font-size: 13px;
        text-align: center;
        border-radius: 8px;
        padding: 5px 20px;
        background-color: #BEBEBE;
    }

    .popup-opera-center {
        color: #333333;
        font-size: 17px;
        text-align: center;
        border-radius: 8px;
    }


    .popup-opera-right {
        color: #FFFFFF;
        font-size: 13px;
        text-align: center;
        border-radius: 8px;
        padding: 5px 20px;
        background-color: #1cb419;
    }


    .popup-view-layout {
        background-color: #EEEEEE;
        width: 100%;
        height: 150px;
    }

    .popup-view-item {
        line-height: 50px;
        text-align: center;
        font-size: 17px;
        text-align: center;
    }


</style>