<template>
	<v-row class="search-box">
		<v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label ft-size_14 ft-clr_g-c">
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''">
			<!-- <DatePicker /> -->
			<v-menu
				ref="fromMenu"
				v-model="menu"
				:close-on-content-click="false"
				:nudge-right="40"
				transition="scale-transition"
				offset-y
				min-width="auto"
			>
				<template v-slot:activator="{ on, attrs }">
					<v-text-field
						v-model="fromDtValue"
						readonly
						v-bind="attrs"
						v-on="on"
						append-icon="mdi-calendar"
						class="v-input__custom"
					></v-text-field>
				</template>
				<v-date-picker
					ref="fromPicker"
					type="month"
					no-title
					v-model="fromDtValue"
					:max="maxDate"
					@input="menu = false"
					@click:year="saveFromDt"
				></v-date-picker>
			</v-menu>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import DatePicker from '~/components/common/Datepicker';
import Utility from '~/plugins/utility';

export default {
	components: {
		DatePicker,
	},
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
	},
	data() {
		return {
			label: '조회연월',
			labelPrepend: true,

			menu: false,
			modal: false,
			startDateMenu: false,
			YEAR: 'MONTH',
		};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
		}),
		myCmCycle() {
			return this.searchParam[this.parentPrgmId].cmCycle;
		},
		dateFormatTypeGet() {
			return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYY-MM';
		},
		dateFormatTypeSet() {
			return this.myCmCycle == 'CYC_YEAR' ? 'YYYY' : 'YYYY-MM';
		},
		maxDate() {
			return Utility.setFormatDate('today', this.dateFormatTypeGet);
		},
		pickerType() {
			return this.myCmCycle == 'CYC_YEAR' ? 'year' : 'month';
		},
		fromDtValue: {
			get() {
				return Utility.setFormatDate(
					this.searchParam[this.parentPrgmId].fromDt,
					this.dateFormatTypeGet,
				);
			},
			set(value) {
				return this.setPageData({
					fromDt: Utility.setFormatDate(value, this.dateFormatTypeSet),
				});
			},
		},
	},
	watch: {
		fromDtValue(val) {
			if (val) {
				// alert(val);
				// this.setPageData({ isFind: true });
			}
		},
		menu(val) {
			if (val && this.myCmCycle == 'CYC_YEAR') {
				this.$nextTick(() => (this.$refs.fromPicker.activePicker = 'YEAR'));
			}
		},
	},
	created() {},
	async mounted() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({}),
		saveFromDt(date) {
			if (this.myCmCycle == 'CYC_YEAR') {
				this.$refs.fromPicker.activePicker = 'YEAR';
				this.setPageData({ fromDt: date + '' });
				this.menu = false;
			}
		},
	},
};
</script>

<style scoped lang="scss">
::v-deep {
	.v-text-field__details {
		display: none;
	}
	.v-input__slot {
		margin-bottom: 0;
	}
}
</style>
