<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="dateType" @change="changeType">
					<el-radio :label="1" border>起始时间设置</el-radio>
					<el-radio :label="2" border>区间设置</el-radio>
				</el-radio-group>
				<div class="date-cont">
					<template v-if="dateType===2">
						<date-picker
							v-model="start_date"
							type="month"
							value-type="format"
							placeholder="起始时间"
							@change="dateChange"
						></date-picker>
						<span style="margin:0 20px">至</span>
						<date-picker
							v-model="end_date"
							type="month"
							value-type="format"
							placeholder="结束时间"
							@change="dateChange"
						></date-picker>
					</template>
					<template v-else>
						<date-picker
							v-model="start_date"
							type="month"
							value-type="format"
							placeholder="起始时间"
							@change="dateChange"
						></date-picker>
						<span style="margin:0 20px">至</span>
						<el-button type="text" style="font-size: 16px">至今</el-button>
					</template>
				</div>
			</div>
			<div class="dia-bot">
				<el-button type="primary" style="margin-right:20px" @click="saveHandle">保存</el-button>
				<el-button type="primary" plain @click="cancelHandle">取消</el-button>
			</div>
		</el-dialog>
</template>

<script>
export default {
	name:'',
	props: {
		isDateDia: {
			type: Boolean,
		},
		dialogTitle: {
			type: String,
			default:'设置默认时间'
		},
		dateForm: {
			type:Object
		}
	},
	watch: {
		isDateDia(val) {
			if(val) {
				this.dateType = this.dateForm.date_type === 5 ? 2 : 1;
				this.start_date = this.dateForm.start_date;
				this.end_date = this.dateForm.end_date;
			}
		}
	},
	data () {
		return {
			dateType:1,
			start_date: '',
			end_date: '',
		};
	},
	methods: {
		/* 确认时间 返回回调 */
		saveHandle() {
			if(!this.start_date || (!this.end_date && this.dateType === 2)) {
				this.$message.warning('请选择正确的时间段')
			}else {
				this.$emit('dateBack',{
					dateType: this.dateType === 1 ? 6 : 5,
					start_date: this.start_date,
					end_date: this.dateType === 1 ? '' : this.end_date
				})
			}
		},
		changeType() {
			this.start_date = '';
			this.end_date = '';
		},
		cancelHandle() {
			this.dateType = 1;
			this.start_date = '';
			this.end_date = '';
			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: 10px 20px;
		.date-cont {
			margin-top: 30px;
		}
	}
	.dia-bot {
		margin: 52px 0 30px;
		display: flex;
		justify-content: center;
	}
}
</style>