<template>
    <div>
        <mark
                style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
                v-show="showSeason"
                @click.stop="showSeason=false"
        ></mark>
        <el-input placeholder="请选择季度" v-model="showValue" style="width:180px;" @focus="showSeason=true">
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
        </el-input>
        <el-card
                class="box-card"
                style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
                v-show="showSeason"
        >
            <div slot="header" class="clearfix" style="text-align:center;padding:0">
                <button
                        type="button"
                        aria-label="前一年"
                        class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
                        @click="prev"
                ></button>
                <span role="button" class="el-date-picker__header-label">{{year}}年</span>
                <button
                        type="button"
                        aria-label="后一年"
                        @click="next"
                        :disabled="disabledYear"
                        class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
                ></button>
            </div>
            <div class="text item" style="text-align:center;">
                <el-button
                        type="text"
                        size="medium"
                        style="width:40%;color: #606266;float:left;"
                        @click="selectSeason(0)"
                        :disabled="disabledSeason1"
                >第一季度</el-button>
                <el-button
                        type="text"
                        size="medium"
                        style="float:right;width:40%;color: #606266;"
                        @click="selectSeason(1)"
                        :disabled="disabledSeason2"
                >第二季度</el-button>
            </div>
            <div class="text item" style="text-align:center;">
                <el-button
                        type="text"
                        size="medium"
                        style="width:40%;color: #606266;float:left;"
                        @click="selectSeason(2)"
                        :disabled="disabledSeason3"
                >第三季度</el-button>
                <el-button
                        type="text"
                        size="medium"
                        style="float:right;width:40%;color: #606266;"
                        @click="selectSeason(3)"
                        :disabled="disabledSeason4"
                >第四季度</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
    import moment from "moment";

    /**
     * @file:  View 组件 季节选择控件
     * @author: v_zhuchun
     * @date: 2019-05-23
     * @description: UI组件  可选择季节
     * @api: valueArr : 季度value defalut['01-03', '04-06', '07-09', '10-12'] 默认值待设置
     */
    export default {
        props: {
            valueArr: {
                default: () => {
                    return ['01','02','03','04','05','06','07','08','09','10','11','12',]
                },
                type: Array
            },
            getValue: {
                default: () => {},
                type: Function
            },
            defaultValue: {
                default: '',
                type: String
            }
        },
        data() {
            return {
                showSeason: false,
                season: '',
                year: new Date().getFullYear(),
                showValue: '',
                nowYear: Number(new Date().getFullYear()),
                disabledYear: false,
                disabledSeason1: false,
                disabledSeason2: false,
                disabledSeason3: false,
                disabledSeason4: false,
            }
        },
        mounted() {
            if (this.defaultValue) {
                let value = this.defaultValue
                let arr = value.split('-')
                this.year = arr[0]
                let str = arr[1]
                let arrAll = this.valueArr
                this.season = Math.floor(arrAll.indexOf(str)/3) + 1
                this.showValue = `${this.year}年${this.season}季度`
                let msg = this.year + '-' + (this.season*3<10?'0'+this.season*3:this.season*3)
                this.$emit('getValue',this.showValue)
            }
            this.disabledFun()
        },
        watch: {
            defaultValue: function(value, oldValue) {
                console.log(value, oldValue,'==========')
                let arr = value.split('-')
                this.year = arr[0]
                let str = arr[1]
                let arrAll = this.valueArr
                this.season = Math.floor(arrAll.indexOf(str)/3) + 1
                this.showValue = `${this.year}年${this.season}季度`
                let msg = this.year + '-' + (this.season*3<10?'0'+this.season*3:this.season*3)
                this.$emit('getValue',this.showValue)
                this.disabledFun()
            }
        },
        methods: {
            one() {
                this.showSeason = false
            },
            prev() {
                this.year = this.year * 1 - 1
                this.disabledFun()
            },
            next() {
                this.year = this.year * 1 + 1
                this.disabledFun()
            },
            selectSeason(i) {
                let that = this
                that.season = i + 1
                let arr = that.valueArr[i].split('-')
                that.getValue(that.year + arr[0] + '-' + that.year + arr[1])
                that.showSeason = false
                this.showValue = `${this.year}年${this.season}季度`
                let str = this.year + '-' + (this.season*3<10?'0'+this.season*3:this.season*3)
                this.$emit('getValue',this.showValue)
                this.disabledFun()
            },
            disabledFun() {
                if(Number(this.nowYear) <= Number(this.year)){
                    this.disabledYear = true
                }else{
                    this.disabledYear = false
                }
                this.disabledSeason()
            },
            disabledSeason() {
                let timeArr = moment().subtract(3, 'month').calendar().split('/')
                let jd =''  //当前时间所对应的季度
                if(timeArr[0] == '01' || timeArr[0] == '02' || timeArr[0] == '03'){
                    jd = 1
                }else if(timeArr[0] == '04' || timeArr[0] == '05' || timeArr[0] == '06'){
                    jd = 2
                }else if(timeArr[0] == '07' || timeArr[0] == '09' || timeArr[0] == '09'){
                    jd = 3
                }else{
                    jd = 4
                }

                if(this.year == timeArr[2] && jd == 1){
                    this.disabledSeason1 = false
                    this.disabledSeason2 = true
                    this.disabledSeason3 = true
                    this.disabledSeason4 = true
                }else if(this.year == timeArr[2] && jd == 2){
                    this.disabledSeason1 = false
                    this.disabledSeason2 = false
                    this.disabledSeason3 = true
                    this.disabledSeason4 = true
                }else if(this.year == timeArr[2] && jd == 3){
                    this.disabledSeason1 = false
                    this.disabledSeason2 = false
                    this.disabledSeason3 = false
                    this.disabledSeason4 = true
                }else {
                    this.disabledSeason1 = false
                    this.disabledSeason2 = false
                    this.disabledSeason3 = false
                    this.disabledSeason4 = false
                }
            },
            formatDateTime(date) {
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? "0" + m : m;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                let h = date.getHours();
                h = h < 10 ? "0" + h : h;
                let minute = date.getMinutes();
                minute = minute < 10 ? "0" + minute : minute;
                let second = date.getSeconds();
                second = second < 10 ? "0" + second : second;
                return y + '-' + m;
            },
        }
    }
</script>
