<!--todo 校验存在问题-->
<template>
	<div class="pi-date">
		<el-date-picker v-model="value" :disabled="checked" type="date" :placeholder="placeholder" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
		<el-checkbox v-show="show" v-model="checked" @change="changeValue" class="pi-checkbox">长期</el-checkbox>
	</div>
</template>

<script>
export default {
	name: "piDate",
	props: {
		modelValue: {
			type: String,
			default: ""
		},
		placeholder: {
			type: String,
			default: ""
		},
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			value: '',
			checked: false
		};
	},
	watch: {
		modelValue: {
			handler(newValue) {
				if (newValue == "2099-12-31" || newValue == "长期") {
					this.value = "2099-12-31"
					this.checked = true
				}else{
					this.value = newValue
				}
			},
			immediate: true,
			deep: true
		},
		value: {
			handler(newValue) {
				this.$emit('update:modelValue', newValue)
			},
			immediate: false,
			deep: true
		},
	},
	methods: {
		changeValue(e) {
			if (e) {
				this.value = '2099-12-31'
			}else{
				this.value = ''
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.pi-date {
	width: 100%;
	display: flex;

	.pi-checkbox {
		margin-left: 10px;
	}
}
</style>
