<template>
    <div>
        <div class="top">
            <div :style="{'cursor':showPrev? 'pointer':''}" class="arrowL" @click.stop="getWeekInfo('prev')"><img
                    v-show="showPrev" src="../../themes-base/images/btn-left.png" width="20"></div>
            <div class="title">{{currentWeekInfo.year}}年{{currentWeekInfo.month}}月</div>
            <div :style="{'cursor':showNext? 'pointer':''}" class="arrowR" @click.stop="getWeekInfo('next')"><img
                    v-show="showNext" src="../../themes-base/images/btn-right.png" class="fr"></div>
        </div>
        <div class="rowHeight week">
            <div @click.stop="weekDateClick(item.date)" :class="['flex1',newDateActive === item.date ? 'active' :'' ]"
                 v-for="item in currentWeekInfo.dataList" style="cursor: pointer;">
                <span>{{item.dayNum}}</span>
                <span class="colr_666666 ">周{{item.week}}</span>
            </div>

        </div>
    </div>
</template>

<script>
    import '../../../../src/utils/date.js'

    export default{
        name: "v-week-date-picker",
        props: {
            // 是否允许左翻
            showNext: Boolean,

            // 是否允许右翻
            showPrev: Boolean,

            // 当前选中时间
            dateActive: String //（默认是当前日期）
        },

        data(){
            return {
                weekSetting: ["日", "一", "二", "三", "四", "五", "六"], // 星期配置（顺序不能改变）

                firstDateOfWeek: "",// 每周的第一天

                lastDateOfWeek: "", // 每周的最后一天

                firstDayIndex: 1, // 设置第一天 0：周日 1：周一 2：周二 ...

                currentWeekInfo: {// 当前周信息
                    dataList: [],
                    month: "",
                    year: ""
                },

                newDateActive: "" // 当前选中日期
            }
        },

        methods: {
            // 获取周信息
            getWeekInfo(type){
                var result = [], self = this;

                if (type === 'current') {
                    for (var i = 0; i <= 6; i++) {
                        var date = self.dayOfCurrentWeek(i);

                        self.insertWeekInfo(result, date);
                    }
                }
                else if (type === 'prev' && this.showPrev) {
                    for (var i = -7; i < 0; i++) {
                        var date = self.dayOfPrevWeek(i);

                        self.insertWeekInfo(result, date);
                    }
                }
                else if (type === 'next' && this.showNext) {
                    for (var i = 0; i <= 6; i++) {
                        var date = self.dayOfNextWeek(i + 1);

                        self.insertWeekInfo(result, date);
                    }
                }

                if (result.length > 0) {

                    self.firstDateOfWeek = new Date(this.convertToCommDate(result[0].date));
                    self.lastDateOfWeek = new Date(this.convertToCommDate(result[6].date));

                    if (type === 'current') {
                        let now = new Date();
                        self.currentWeekInfo.month = now.getMonth() + 1;
                        self.currentWeekInfo.year = now.getFullYear();

                    }
                    else if (type === 'prev') {
                        self.currentWeekInfo.month = self.firstDateOfWeek.getMonth() + 1;
                        self.currentWeekInfo.year = self.firstDateOfWeek.getFullYear();
                    }
                    else if (type === 'next') {
                        self.currentWeekInfo.month = self.lastDateOfWeek.getMonth() + 1;
                        self.currentWeekInfo.year = self.lastDateOfWeek.getFullYear();
                    }

                    this.currentWeekInfo.dataList = result;

                    /*alert(JSON.stringify(this.currentWeekInfo))*/
                }

            },

            // 插入周信息
            insertWeekInfo(entity, date) {
                entity.push({
                    date: date.format('yyyy-MM-dd'),
                    dayNum: date.getDate(),
                    week: this.weekSetting[date.getDay()]
                });
            },

            // 日期选中
            weekDateClick(date){
                this.newDateActive = date;
                this.$emit('week-date-click', date);
            },

            // 上周的某一天
            dayOfPrevWeek(i) {
                var today = new Date(this.firstDateOfWeek);
                today.setDate(today.getDate() + i);
                return today;
            },

            // 下一周的某一天
            dayOfNextWeek(i) {
                var today = new Date(this.lastDateOfWeek);
                today.setDate(today.getDate() + i);
                return today;
            },

            // 当前周的某一天
            dayOfCurrentWeek(i) {

                var now = new Date(this.convertToCommDate(this.newDateActive));
                var n = now.getDay();

                var start = new Date();
                start.setDate(now.getDate() - n + i + this.firstDayIndex);//取得一周内的第一天、第二天、第三天...
                return start;
            },

            // 将日格式为“yyyy-MM-dd”转换为“yyyy/MM/dd”
            convertToCommDate(date){
                return date.replace(/-/g, "/");
            }
        },

        created(){

            this.newDateActive = (this.dateActive && this.dateActive.length > 0) ? this.dateActive : (new Date()).format('yyyy-MM-dd');


        },


        mounted(){
            this.getWeekInfo('current');
        },

        watch: {
            dateActive: function (newVal, oldVal) {
                this.newDateActive = newVal;
            }
        }

    }
</script>