<template>
    <div>
        <el-popover placement="bottom-start" title="" trigger="manual" content="" width="235" v-model="showCard">
        <el-input slot="reference" v-model="fullValue" placeholder="请选择季度" :size="size" clearable
            prefix-icon="el-icon-date" readonly @click.stop.native="showCard = true"></el-input>
        <div ref="el-quarter-select-wrap">
            <!-- 年份切换 -->
            <div class="choose-year-wrap">
                <div>
                    <el-button icon="el-icon-arrow-left" type="text" style="color:#303133;"
                        @click="onYearChange('prev')"></el-button>
                </div>
                <div style="font-size: 16px;">{{ displayYear.getFullYear() }}</div>
                <div>
                    <el-button icon="el-icon-arrow-right" type="text" style="color:#303133;"
                        @click="onYearChange('next')"></el-button>
                </div>
            </div>

            <!-- 季度列表 -->
            <div class="choose-quarter-wrap">
                <div class="quarter-item" v-for="(item,index) in quarterOptions" :key="index">
                    <el-link :type="isActive(item.value) ? 'primary' : ''" :underline="false" @click="selectQuarterEvent(item)">{{ item.label }}</el-link>
                </div>
            </div>
        </div>
    </el-popover>
    </div>
</template>

<script>
//虽说是季度选择，但是输出的是月份
export default {
    props: {
        //控件大小
        size: {
            type: String,
            default: "small"
        },
        //当前值 2024-Q4
        value: {
            type: String,
            default: "",
        }
    },
    //v-model指令配置
    model: {
        prop: "value",//定义v-model的值传递给那个prop属性
        event: "change",//定义此事件触发时，自动更新父组件v-model对应的数据  
    },
    data() {
        return {
            displayYear: new Date(),//展示的年份

            year: "",//当前年份
            quarter: "",//当前季度

            quarterOptions: [
                {value: "Q1", label:"第一季度"},{value: "Q2", label:"第二季度"},
                {value: "Q3", label:"第三季度"},{value: "Q4", label:"第四季度"}
            ],

            showCard: false,//是否展示下拉
        }
    },
    created() {
        //对值进行解析
        if (this.value) {
            this.parseValue(this.value)
        }
    },
    watch: {
        value(newVal) {
            if (newVal) {
                this.parseValue(newVal)
            } else {
                //重置
                this.year = ""
                this.quarter = ""
            }
        }
    },
    mounted(){
        //模拟蒙版点击，关闭下拉
        document.addEventListener('click', (event)=> {
            // 检查点击事件是否来自特定的元素或其子元素
            if(event.target !== this.$refs['el-quarter-select-wrap']) {
                //点击了页面的其他区域，关闭下拉
                this.showCard = false
            }
        })
    },
    methods: {
        //对值进行解析
        parseValue(value) {
            //年
            var year = value.split("-")[0] || new Date().getFullYear()
            //季度
            var quarter = value.split("-")[1]
            var quarterList = ["Q1","Q2","Q3","Q4"]
            //初始化
            if(quarterList.includes(quarter)){
                this.quarter = quarter
                this.year = year
            }
        },
        //年份切换
        onYearChange(type){
            if(type == 'next'){
                //时间往前后一年
                var year = this.displayYear.getFullYear() + 1
            }else if(type == 'prev'){
                //时间往前推一年
                var year = this.displayYear.getFullYear() - 1
            }
            var time = new Date()
            time.setFullYear(year)
            //更新展示年份
            this.displayYear = time
        },
        //选择季度事件
        selectQuarterEvent(item){
            //记录当前季度和年份
            this.quarter = item.value
            this.year = this.displayYear.getFullYear()
            //通知父组件
            this.$emit('change', this.fullValue)
            //关闭下拉
            this.showCard = false
        },
        //判断选中的时间和展示的时间是否匹配
        isActive(quarter){
            var tempFullValue = `${this.displayYear.getFullYear()}-${quarter}`
            if(tempFullValue == this.fullValue){
                return true
            }else{
                return false
            }
        },

    },
    computed: {
        //当前季度值
        fullValue(){
            if(this.year && this.quarter){
                return `${this.year}-${this.quarter}`
            }else{
                return ""
            }
        }
    }
}
</script>


<style scoped>
.choose-year-wrap{
    display: flex;align-items: center;justify-content: space-between;
}
.choose-quarter-wrap{
    display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;
}
.choose-quarter-wrap .quarter-item{
    width:50%;text-align: center;margin-bottom: 5px;
}
</style>