<template>
		<el-dialog
		:modal-append-to-body='false'
		:title="dialogTitle" 
		:visible.sync="isDateDia"
		:close-on-click-modal="false"
		@close="cancelHandle"
		center
		v-dialogDrag 
		custom-class="dateDialog"
		width="650px">
			<div class="dialog-min">
				<el-radio-group v-model="radioType" @change="changeType">
					<el-radio :label="1" border>最近N年</el-radio>
					<el-radio :label="2" border>区间设置</el-radio>
				</el-radio-group>
				<div class="date-cont">
					<template v-if="radioType===1">
						<span style="margin:0 20px;color: #000000;">年数</span>
						<el-input v-model.number="count_year" placeholder="请输入数字"></el-input>
					</template>
					<template v-else>
						<el-date-picker
							v-show="dateType==1"
							v-model="start_date"
							type="date"
							value-type="format"
							value-format="yyyy-MM-dd"
							placeholder="选择日期"
							:picker-options="pickerOptions"
						></el-date-picker>
						<el-date-picker
							v-show="dateType==2"
							v-model="dates"
							type="daterange"
							unlink-panels
							value-type="format"
							value-format="yyyy-MM-dd"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
						></el-date-picker>
						<el-checkbox label="至今" :checked="dateType == 1" @change="changeDateType"
						style="margin-left: 18px;"></el-checkbox>
					</template>
				</div>
			</div>
			<div class="dia-bot">
				<el-button plain @click="cancelHandle" style="width: 120px;">取消</el-button>
				<el-button type="primary" style="width: 120px;margin-left:30px" @click="saveHandle">保存</el-button>
			</div>
		</el-dialog>
</template>

<script>
export default {
	name:'',
	props: {
		isDateDia: {
			type: Boolean,
		},
		dialogTitle: {
			type: String,
			default:'时间长度设置'
		},
		dateForm: {
			type:Object
		},
		// 最早的日期，开始时间不得早于这个
		earliestDate:{
			type: String,
			default:'0000-00-00'
		}
	},
	watch: {
		isDateDia(val) {
			if(val) {
				this.radioType = this.dateForm.date_type === 5 || this.dateForm.date_type === 6 ? 2 : 1;
				this.dateType = this.dateForm.date_type === 5 ? 2 : 1;
				this.start_date = this.dateForm.start_date;
				this.end_date = this.dateForm.end_date;
				this.dates = this.radioType == 2&&this.dateType==2?[this.start_date,this.end_date]:[]
				this.count_year = this.dateForm.count_year
			}
		},
		dates(value){
			if(!value){
				this.start_date = ''
				this.end_date = ''
				return 
			}

			if(value && value.length>0){
				this.start_date = value[0]
				this.end_date = value[1]
			}
		}
	},
	data () {
		return {
			radioType:1,
			dateType:2,
			start_date: '',
			end_date: '',
			count_year:'',// 年数
			dates:[],
			pickerOptions:{
				disabledDate:(date)=>{
					return date < (new Date(`${this.earliestDate} 00:00:00`) || 0)
				},
			}
		};
	},
	methods: {
		/* 确认时间 返回回调 */
		saveHandle() {
			if(this.radioType == 1 && (!parseInt(this.count_year))) {
				this.$message.warning('请输入正确的数字')
				return 
			}
			// console.log(this.radioType,this.dateType,this.start_date,this.end_date,this.dates,this.count_year);

			if(this.radioType == 2 && (!this.start_date || (!this.end_date && this.dateType === 2))) {
				this.$message.warning('请选择正确的时间段')
			}else {
				this.$emit('dateBack',{
					dateType: this.radioType==1?20:this.dateType === 1 ? 6 : 5,
					start_date: this.start_date,
					end_date: this.dateType === 1 ? '' : this.end_date,
					count_year:this.count_year
				})
			}
		},
		changeType() {
			this.dateType=1
			this.dates=null
			this.count_year = ''
		},
		changeDateType(check){
			this.dateType=check?1:2
			this.dates=null
		},
		cancelHandle() {
			this.radioType = 1
			this.dateType = 1;
			this.dates=null
			this.count_year = ''
			this.$emit('cancel')
		}
	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss'>
.dateDialog {
	.el-dialog__header {
		background-color: #5882EF;
		/* padding: 0; */
		.el-dialog__close {
			color: #fff;
		}
	}
	.el-dialog__body {
		padding: 25px 25px 30px;
	}
	.mx-datepicker {
		width: 220px !important;
	}
	.dialog-min {
		padding: 0 35px 60px;
		.date-cont {
			margin-top: 50px;
		}
	}
	.dia-bot {
		margin: 60px 0 30px;
		display: flex;
		justify-content: center;
	}
}
</style>