elementui时间季度选择器2

<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="showValue1" style="width:138px;" @focus="showSeasons(1)">
			<i slot="prefix" class="el-input__icon el-icon-date"></i>
		</el-input>
		--
		<el-input placeholder="请选择季度" v-model="showValue2" style="width:138px;" @focus="showSeasons(2)">
			<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">
				<div v-if="showSeasonState==1">
					<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">{{year1}}年</span>
					<button type="button" aria-label="后一年" @click="next"
						class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
				</div>
				<div v-if="showSeasonState==2">
					<button type="button" aria-label="前一年"
						class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
						@click="prev" :disabled="year1>=year2"></button>
					<span  role="button" class="el-date-picker__header-label">{{year2}}年</span>
					<button type="button" aria-label="后一年" @click="next"
						class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
				</div>
			</div>
			<div v-if="showSeasonState==1">
				<div class="text item" style="text-align:center;">
					<el-button type="text" size="medium" style="width:40%;float:left;"
						:style="season1==0?'color: #409eff;':'color: #606266;'" @click="selectSeason(0)">第一季度</el-button>
					<el-button type="text" size="medium" style="float:right;width:40%;"
						:style="season1==1?'color: #409eff;':'color: #606266;'" @click="selectSeason(1)">第二季度</el-button>
				</div>
				<div class="text item" style="text-align:center;">
					<el-button type="text" size="medium" style="width:40%;float:left;"
						:style="season1==2?'color: #409eff;':'color: #606266;'" @click="selectSeason(2)">第三季度</el-button>
					<el-button type="text" size="medium" style="float:right;width:40%;"
						:style="season1==3?'color: #409eff;':'color: #606266;'" @click="selectSeason(3)">第四季度</el-button>
				</div>
			</div>
			<div v-if="showSeasonState==2">
				<div class="text item" style="text-align:center;">
					<el-button type="text" size="medium" style="width:40%;float:left;"
						:style="season2==0?'color: #409eff;':'color: #606266;'" @click="selectSeason(0)">第一季度</el-button>
					<el-button type="text" size="medium" style="float:right;width:40%;"
						:style="season2==1?'color: #409eff;':'color: #606266;'" @click="selectSeason(1)">第二季度</el-button>
				</div>
				<div class="text item" style="text-align:center;">
					<el-button type="text" size="medium" style="width:40%;float:left;"
						:style="season2==2?'color: #409eff;':'color: #606266;'" @click="selectSeason(2)">第三季度</el-button>
					<el-button type="text" size="medium" style="float:right;width:40%;"
						:style="season2==3?'color: #409eff;':'color: #606266;'" @click="selectSeason(3)">第四季度</el-button>
				</div>
			</div>
			
		</el-card>
	</div>
</template>
<script>
	export default {
		props: {
			valueArr: {
				default: () => {
					return ['01-03', '04-06', '07-09', '10-12']
				},
				type: Array
			},
			getValue: {
				default: () => {},
				type: Function
			},
		},
		data() {
			return {
				showSeason: false,
				season: '',
				year1: new Date().getFullYear(),
				year2: new Date().getFullYear(),
				showValue1:'',
				showValue2:'',
				season1: null,
				season2: null,
				showSeasonState:1,
			}
		},
		created() {

		},
		watch: {
			showValue1:function(val){
				this.season2=null;
				this.showValue2='';
				// year2>=year1
			},
			showValue2:function(val2){
				if(this.showValue1 && val2){
					this.showValuefun();
				}
			}
		},
		methods: {
			showValuefun(){
				console.log('开始时间',this.showValue1);
				console.log('结束时间',this.showValue2);
			},
			showSeasons(num){
				this.showSeason=true;
				this.showSeasonState=num;
			},
			//上一年
			prev() {
				if(this.showSeasonState==1){
					this.year1 = this.year1 * 1 - 1
				}else{
					this.year2 = this.year2 * 1 - 1
				}
				
			},
			//下一年
			next() {
				if(this.showSeasonState==1){
					this.year1 = this.year1 * 1 + 1
				}else{
					this.year2 = this.year2 * 1 + 1
				}
			},
			//选择第几季度
			selectSeason(i) {
				let that = this
				that.season = i + 1
				let arr = that.valueArr[i].split('-')
				
				if(this.showSeasonState==1){
					that.getValue(that.year1 + arr[0] + '-' + that.year1 + arr[1])
					that.showSeason = false;
					this.season1 = i;
					this.showValue1 = `${this.year1}年${this.season}季度`
				}else{
					that.getValue(that.year2 + arr[0] + '-' + that.year2 + arr[1])
					that.showSeason = false;
					this.season2 = i;
					this.showValue2 = `${this.year2}年${this.season}季度`
				}
			}
		}
	}
</script>