<template>
    <view>
        <view
            class="recommend-time-value"
        >
            {{ plannedTime || recommendTime }}
            <c-icon
                name="right"
                font-size="14px"
            />
        </view>
        <c-popup
            :show="showSelectDate"
            max-height="'60%'"
            class="picker-popUp"
            @masktap.stop="onCancel"
            @tap.stop
        >
            <view class="popUp-header">
                <view class="popUp-cancel" @tap.stop="onCancel">取消</view>
                <view class="popUp-title">选择计划接种时间</view>
                <view class="popUp-submit" @tap.stop="onSubmit">确定</view>
            </view>
            <picker-view
                indicator-style="color: #74fa7d"
                mask-class="maskStyle"
                style="width: 100%;height: 200px;"
                :value="value"
                @change="dateChange"
            >
                <picker-view-column>
                    <view v-for="item in years" :key="item">{{ item }}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view v-for="item in months" :key="item">{{ item }}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view v-for="item in days" :key="item">{{ item }}日</view>
                </picker-view-column>
            </picker-view>
        </c-popup>
    </view>
</template>

<script>

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import * as core from '@utils/core';

const date = new Date();
const years = [];
const months = [];

for (let i = date.getFullYear(); i <= 20 + date.getFullYear(); i++) {
    years.push(i);
}

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

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CPopup
    },
    props: {
        id: {
            type: String,
            default: ''
        },
        plannedTime: {
            'type': String,
            'default': ''
        },
        recommendTime: {
            'type': String,
            'default': ''
        },
        isReplaced: {
            type: Boolean,
            default: false
        },
        showSelectDate: {
            type: Boolean,
            default: false
        },
        vaccineIndex: {
            type: Number,
            default: 0
        },
        /**
         * 表示有效时间/日期范围的开始，仅time/date 类型有效
         */
        start: {
            type: String,
            default: ''
        },
        /**
         * 表示有效时间/日期范围的结束，仅time/date 类型有效
         */
        end: {
            type: String,
            default: ''
        },
    },
    data() {
        const nowDate = core.formatDate(new Date().getTime(), 'yyyy-MM-dd');
        return {
            nowDate,
            years,
            year: date.getFullYear(),
            months,
            month: 2,
            days: [],
            day: 2,
            value: [0, 0, 0],
        };
    },
    created() {
        // 初始化value
        this.initDays();
    },
    watch: {
        plannedTime(val) {
            this.initDays();
        }
    },
    methods: {
        // 初始化
        initDays() {
            let dateArr = (this.plannedTime || this.recommendTime).split('-');
            //年份为今年
            if (dateArr[0] <= date.getFullYear()) {
                this.startYMD(dateArr[1], dateArr[2]);
            } else {
                this.value[0] = this.years.indexOf(dateArr[0]/1);
                this.value[1] = this.months.indexOf(dateArr[1]/1);
                this.days= [];
                for (let i = 1; i <= this.getMaxDay(dateArr[0], dateArr[1]); i++) {
                    this.days.push(i);
                }
                this.value[2] = this.days.indexOf(dateArr[2]/1);
            }
            Object.assign(this, {
                year: this.years[this.value[0]],
                month: this.months[this.value[1]],
                day: this.days[this.value[2]]
            });
        },
        // 获得一个月最大天数
        getMaxDay(year, month) {
            if (month == 4 || month == 6 || month == 9 || month == 11) {
                return 30;
            }
            if (month == 2) {
                if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                    return 29;
                }
                return 28;
            }
            return 31;
        },
        dateChange(e) {
            const val = e.detail.value;
            const oldMonth = this.months[val[1]];
            const oldDay = this.days[val[2]];
            if (this.year != this.years[val[0]] || this.month != this.months[val[1]]) {
                this.$set(this.value, 0, this.years.indexOf(this.years[val[0]]));
                if (this.years[val[0]] == date.getFullYear()) {
                    this.startYMD(this.months[val[1]], this.days[val[2]]);
                } else {
                    this.months = [];
                    for (let i = 1; i <= 12; i++) {
                        this.months.push(i);
                    }
                    this.$set(this.value, 1, this.months.indexOf(oldMonth));
                    this.days= [];
                    for (let i = 1; i <= this.getMaxDay(this.years[val[0]], this.months[val[1]]); i++) {
                        this.days.push(i);
                    }
                    this.$set(this.value, 2, this.days.indexOf(oldDay) === -1 ? this.days.length -1 : this.days.indexOf(oldDay));
                }
            }
            if (this.day != oldDay) {
                this.$set(this.value, 2, val[2]);
            }
            Object.assign(this, {
                year: this.years[this.value[0]],
                month: this.months[this.value[1]],
                day: this.days[this.value[2]]
            });
        },
        //点击蒙层或取消关闭弹窗
        onCancel() {
            this.$emit('swanCloseDatePicker', this.vaccineIndex);
        },
        //保存时间
        onSubmit() {
            let date = this.year + '-' + (this.month < 10 ? '0' + this.month : this.month) + '-' + (this.day < 10 ? '0' + this.day : this.day);
            this.$emit('dateSelectChange', date, this.vaccineIndex);
        },
        //根据start时间计算月和日
        startYMD(month, day) {
            let startDateArr = this.nowDate.split('-');
            // 如果年等于开始时间的年
            this.$set(this.value, 0, 0);
            this.months = [];
            for (let i = startDateArr[1]/1; i <= 12; i++) {
                this.months.push(i);
            }
            //初始化月和天
            if (month <= startDateArr[1]){
                this.$set(this.value, 1, 0);
                this.days = [];
                for (let i = startDateArr[2]/1; i <= this.getMaxDay(date.getFullYear(), startDateArr[1]); i++) {
                    this.days.push(i);
                }
                if (month < startDateArr[1]) {
                    this.$set(this.value, 2, 0);
                } else {
                    if (day <= startDateArr[2]) {
                        this.$set(this.value, 2, 0);
                    } else {
                        this.$set(this.value, 2, this.days.indexOf(day/1) === -1 ? this.days.length -1 : this.days.indexOf(day/1));
                    }
                }
            } else {
                this.$set(this.value, 1, this.months.indexOf(month/1));
                this.days = [];
                for (let i = 1; i <= this.getMaxDay(date.getFullYear(), month); i++) {
                    this.days.push(i);
                }
                this.$set(this.value, 2, this.days.indexOf(day/1) === -1 ? this.days.length -1 : this.days.indexOf(day/1));

            }
        }
    }
};
</script>
<style lang="less" scoped>
.picker-popUp{
    padding-top: .2rem;
    text-align: center;
}
.popUp-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 9px 17px;
    background-color: #fff;
    position: relative;
    text-align: center;
    font-size: 18px;
}
.popUp-cancel, .popUp-submit {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: left;
}
.popUp-submit {
    text-align: right;
    color: #3288FF;
}
.recommend-time-value {
    display: flex;
    align-items: center;
    color: #b8b8b8;
}
</style>
