<template>
	<div>
		<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
		<v-dialog
			v-model="dialog"
			width="700"
			overlay-color="#000"
			overlay-opacity="0.8"
		>
			<v-card>
				<v-toolbar
					:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
					class="py-4 pr-3 pl-5"
					height="auto"
				>
					<v-toolbar-title>{{ label }}</v-toolbar-title>
					<!-- <v-btn
            icon
            tile
            small
            :ripple="false"
            @click="dialog = !dialog"
            :style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
          >
            <v-icon>mdi-close</v-icon>
          </v-btn> -->
				</v-toolbar>
				<!-- <v-card-title>  
          일정 상세 내용
        </v-card-title> -->
				<!-- <template v-for="(item, index) in detailList"> -->
				<template>
					<div style="padding : 20px">
						<v-col :cols="12">
							<v-row>
								<v-col :cols="3">
									<v-row class="search-box" align="center" no-gutters>
										<label class="search-box-label">
											<v-icon x-small color="#fb8200" class="mr-1"
												>mdi-record-circle</v-icon
											>
											일정 시작
										</label>
									</v-row>
								</v-col>
								<v-col :cols="4">
									<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
									<div class="startpicker-container2">
										<v-text-field
											id="startpicker2"
											ref="startpicker2"
											v-model="strtDt"
											:class="'v-input__custom'"
											:hide-details="true"
											readonly
											outlined
										>
											<template #append>
												<v-icon size="20">$icoCalendar</v-icon>
											</template>
											<template #append-outer>
												<div
													ref="startpicker-container2"
													id="startpicker-container2"
												></div>
											</template>
										</v-text-field>
									</div>
								</v-col>
								<v-col :cols="2">
									<vue-numeric-input
										v-model="strtHh"
										:min="0"
										:max="23"
										controls-type="updown"
										class="v-input__slot"
										width="100%"
										align="center"
									>
									</vue-numeric-input>
								</v-col>
								<v-col :cols="1" style="text-align: center;">
									:
								</v-col>
								<v-col :cols="2">
									<vue-numeric-input
										v-model="strtMm"
										:min="0"
										:max="59"
										controls-type="updown"
										class="v-input__slot"
										width="100%"
										align="center"
									>
									</vue-numeric-input>
								</v-col>
							</v-row>
							<v-row>
								<v-col :cols="3">
									<v-row class="search-box" align="center" no-gutters>
										<label class="search-box-label">
											<v-icon x-small color="#fb8200" class="mr-1"
												>mdi-record-circle</v-icon
											>
											일정 종료
										</label>
									</v-row>
								</v-col>
								<v-col :cols="4">
									<!-- <DatePicker v-model="endDt" :parentPrgmId="parentPrgmId"/> -->
									<div class="startpicker-container3">
										<v-text-field
											id="startpicker3"
											ref="startpicker3"
											v-model="endDt"
											:class="'v-input__custom'"
											:hide-details="true"
											readonly
											outlined
										>
											<template #append>
												<v-icon size="20">$icoCalendar</v-icon>
											</template>
											<template #append-outer>
												<div
													ref="startpicker-container3"
													id="startpicker-container3"
												></div>
											</template>
										</v-text-field>
									</div>
								</v-col>
								<v-col :cols="2">
									<vue-numeric-input
										v-model="endHh"
										:min="0"
										:max="23"
										controls-type="updown"
										class="v-input__slot"
										width="100%"
										align="center"
									>
									</vue-numeric-input>
								</v-col>
								<v-col :cols="1" style="text-align: center;">
									:
								</v-col>
								<v-col :cols="2">
									<vue-numeric-input
										v-model="endMm"
										:min="0"
										:max="59"
										controls-type="updown"
										class="v-input__slot"
										width="100%"
										align="center"
									>
									</vue-numeric-input>
								</v-col>
							</v-row>
							<v-row>
								<v-col :cols="3">
									<v-row class="search-box" align="center" no-gutters>
										<label class="search-box-label">
											<v-icon x-small color="#fb8200" class="mr-1"
												>mdi-record-circle</v-icon
											>
											일정 제목
										</label>
									</v-row>
								</v-col>
								<v-col :cols="9">
									<v-text-field
										v-model="planTitle"
										class="v-input__custom"
										outlined
										:hide-details="true"
									></v-text-field>
								</v-col>
							</v-row>
							<v-row>
								<v-col :cols="3">
									<v-row class="search-box" align="center" no-gutters>
										<label class="search-box-label">
											<v-icon x-small color="#fb8200" class="mr-1"
												>mdi-record-circle</v-icon
											>
											일정 상세 내용
										</label>
									</v-row>
								</v-col>
								<v-col :cols="9">
									<v-textarea
										v-model="planCntn"
										class="v-input__custom"
										outlined
										:hide-details="true"
										:maxlength="1000"
									></v-textarea>
								</v-col>
							</v-row>
							<v-row>
								<v-col :cols="3">
									<v-row class="search-box" align="center" no-gutters>
										<v-icon x-small color="#fb8200" class="mr-1"
											>mdi-record-circle</v-icon
										>
										표시 색상
									</v-row>
								</v-col>
								<v-col :cols="1">
									<div
										id="redDiv"
										class="colPk redBg"
										@click="colorClick('red')"
									></div>
								</v-col>
								<v-col :cols="1">
									<div
										id="blueDiv"
										class="colPk blueBg"
										@click="colorClick('blue')"
									></div>
								</v-col>
								<v-col :cols="1">
									<div
										id="pupleDiv"
										class="colPk pupleBg"
										@click="colorClick('puple')"
									></div>
								</v-col>
								<v-col :cols="1">
									<div
										id="greenDiv"
										class="colPk greenBg"
										@click="colorClick('green')"
									></div>
								</v-col>
								<v-col :cols="1">
									<div
										id="orangeDiv"
										class="colPk orangeBg"
										@click="colorClick('orange')"
									></div>
								</v-col>
								<v-col :cols="1">
									<div
										id="pinkDiv"
										class="colPk pinkBg"
										@click="colorClick('pink')"
									></div>
								</v-col>
							</v-row>
						</v-col>
					</div>
				</template>
				<v-card-actions class="justify-end">
					<v-btn :ripple="false" @click="btnAction('save')">저장</v-btn>
					<v-btn
						v-show="popUpAction === 'update'"
						:ripple="false"
						@click="btnAction('delete')"
						>삭제</v-btn
					>
					<v-btn :ripple="false" @click="btnAction('close')">닫기</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import VueNumericInput from 'vue-numeric-input';
import InputText from '~/components/common/form/InputText';
import InputNumber from '~/components/common/form/InputNumber';
import TextArea from '~/components/common/form/TextArea';
import SelectBox from '~/components/common/form/SelectBox';
import SelectBoxes from '~/components/common/form/SelectBoxes';
import CheckBox from '~/components/common/form/CheckBox';
import Label from '~/components/common/form/Label';
import DatePicker from '~/components/common/Datepicker';
import mixinGlobal from '@/mixin/global.js';
import Utility from '~/plugins/utility';
import TuiDatepicker from 'tui-date-picker';

export default {
	mixins: [mixinGlobal],
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		detailList: {
			type: Array,
			require: false,
			default: () => {
				return [];
			},
		},
		label: {
			type: String,
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		gridName: {
			type: String,
			require: false,
		},
	},
	components: {
		InputText,
		InputNumber,
		TextArea,
		SelectBox,
		SelectBoxes,
		CheckBox,
		Label,
		DatePicker,
		Utility,
		TuiDatepicker,
		VueNumericInput,
	},
	data() {
		return {
			dialog: false,
			popUpAction: '',
			param: {},
			planCntn: '',
			planTitle: '',
			strtHh: 0,
			strtMm: 0,
			endHh: 1,
			endMm: 0,
			strtDt:null,
			endDt:null,
			// strtDt: new Date().toISOString().substr(0, 10),
			// endDt: new Date().toISOString().substr(0, 10),
			planColor: '',
			startDatepickerInstance: null,
			startDatepickerInstance3: null,
			planSeq: '',
			blocId: '',
			addPlanData:{
			}
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
		chkDialog() {
			return this.dialog;
		},
	},
	watch: {
		async chkDialog(val) {
			if (val) {
				this.openDialog();

				this.$nextTick(() => {});
			} else {
			}
		},
		strtDt(val){		
			console.log('strtDt : ', val);
			this.checkStrtAndEndDateTime('start');
			if(this.startDatepickerInstance3){
				this.startDatepickerInstance3.setDate(new Date(this.endDt));
			}
		},
		endDt(val){
			console.log('endDt : ', val);
			this.checkStrtAndEndDateTime('end');
			if(this.startDatepickerInstance){
				this.startDatepickerInstance.setDate(new Date(this.strtDt));
			}
		},
		strtHh(val) {
			console.log('strtHh : ', val);
			this.checkStrtAndEndDateTime('start');
		},
		endHh(val) {
			console.log('endHh : ', val);
			this.checkStrtAndEndDateTime('end');
		},
		strtMm(val) {
			this.checkStrtAndEndDateTime('start');
		},
		endMm(val) {
			this.checkStrtAndEndDateTime('end');
		},
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
		}),
		...mapActions({
			postUpdateApi: 'modules/list/postUpdateApi',
			getDomain: 'modules/list/getDomain',
		}),
		async checkStrtAndEndDateTime(startEndFlag){
			var startDateTime = this.strtDt + ' ' + this.strtHh + ':' + this.strtMm;
			var endDateTime = this.endDt + ' ' + this.endHh + ':' + this.endMm;

			startDateTime = new Date(startDateTime);
			endDateTime = new Date(endDateTime);

			if(startDateTime > endDateTime){
				if(startEndFlag == 'start'){ // 시작 부분이 변경됨	-> 끝 부분 값을 변경
					this.endDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.strtDt).getDate() + 1)));
					this.startDatepickerInstance3.setDate(new Date(this.endDt));
				}else if(startEndFlag == 'end'){	// 끝 부분이 변경됨 -> 시작 부분 값을 변경
					this.strtDt = this.convertDateToString(new Date(new Date().setDate(new Date(this.endDt).getDate() - 1)));
					this.startDatepickerInstance.setDate(new Date(this.strtDt));
				}
			}
		},
		async tuiCalendarInit() {
			const startContainer = document.getElementById('startpicker-container2');
			const startTarget = document.getElementById('startpicker2');

			const startContainer3 = document.getElementById('startpicker-container3');
			const startTarget3 = document.getElementById('startpicker3');

			var dt1 = new Date();
			var dt2 = new Date();

			if(this.strtDt){
				dt1 = this.strtDt;
			}

			if(this.endDt){
				dt2 = this.endDt;
			}

			this.startDatepickerInstance = new TuiDatepicker(startContainer, {
				// date: new Date(),
				date : dt1,
				language: 'ko',
				type: 'date',
				input: {
					element: startTarget,
					format: 'YYYY-MM-DD',
				},
				timePicker: false,
			});
			this.startDatepickerInstance.on('change', () => this.getStartDt());

			this.startDatepickerInstance3 = new TuiDatepicker(startContainer3, {
				// date: new Date(),
				date : dt2,
				language: 'ko',
				type: 'date',
				input: {
					element: startTarget3,
					format: 'YYYY-MM-DD',
				},
				timePicker: false,
			});
			this.startDatepickerInstance3.on('change', () => this.getEndDt());
		},
		getStartDt() {
			const dt = this.startDatepickerInstance.getDate();

			// console.log('dt[getStartDt] : ', dt);
			// console.log('dt[getStartDt] : ', dt.toISOString());

			// this.strtDt = dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
			// this.strtDt = String(dt.toISOString()).substr(0, 10);
			// this.strtDt = this.convertStringToDateFormat(this.strtDt);

			this.strtDt = this.convertDateToString(dt);
			this.startDatepickerInstance.setDate(new Date(this.strtDt));
		},
		getEndDt() {
			const dt = this.startDatepickerInstance3.getDate();

			// console.log('dt[getEndDt] : ', dt);
			// console.log('dt[getendDt] : ', dt.toISOString());

			// this.endDt = dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
			// this.endDt = String(dt.toISOString()).substr(0, 10);
			// this.endDt = this.convertStringToDateFormat(this.endDt);

			this.endDt = this.convertDateToString(dt);
			this.startDatepickerInstance3.setDate(new Date(this.endDt));
		},
		convertDateToString(dt){
			return dt.getFullYear() + '-' + String(dt.getMonth()+1).padStart(2, '0') + '-' + String(dt.getDate()).padStart(2, '0');
		},
		convertStringToDateFormat(val) {
			var result = '';

			result = Utility.setFormatDate(val, 'YYYY-MM-DD');

			return result;
		},
		convertDateFormatToString(val) {
			return val.replaceAll('-', '');
		},
		async openDialog() {
			this.$nextTick(() => {
				this.tuiCalendarInit();
				switch (this.popUpAction) {
					case 'read':
						this.strtDt = this.convertStringToDateFormat(
							this.searchParam.rowGridSelectData.chkDd,
						);
						this.endDt = this.convertStringToDateFormat(
							this.searchParam.rowGridSelectData.chkDd,
						);
						break;
					case 'insert':
						this.insertPlanData();
						break;
					case 'update':
						this.getPlanData();
						break;
				}
			});
		},
		async insertPlanData(){
			var year = this.addPlanData.year;
			var month = this.addPlanData.month;
			var day = this.addPlanData.day;
			// this.strtDt = this.convertStringToDateFormat(this.strtDt);
			// this.endDt = this.convertStringToDateFormat(this.endDt);
			this.strtHh = 0;
			this.strtMm = 0;
			this.endHh = 1;
			this.endMm = 0;
			this.planTitle = '';
			this.planCntn = '';
			this.planColor = '';
			document.getElementById('redDiv').classList.remove('colPkSelect');
			document.getElementById('blueDiv').classList.remove('colPkSelect');
			document.getElementById('pupleDiv').classList.remove('colPkSelect');
			document.getElementById('greenDiv').classList.remove('colPkSelect');
			document
				.getElementById('orangeDiv')
				.classList.remove('colPkSelect');
			document.getElementById('pinkDiv').classList.remove('colPkSelect');

			// this.strtDt = this.convertStringToDateFormat(this.strtDt);
			// this.endDt = this.convertStringToDateFormat(this.endDt);
			// console.log('this.strtDt[insertPlanData] : ', this.strtDt);
			// console.log('this.endDt[insertPlanData] : ', this.endDt);

			// this.startDatepickerInstance.setDate(new Date(this.strtDt));
			// this.startDatepickerInstance3.setDate(new Date(this.endDt));

			// this.startDatepickerInstance.setDate(new Date(this.strtDt));
			// this.startDatepickerInstance3.setDate(new Date(this.endDt));

			// this.strtDt = Utility.setFormatDate(this.strtDt, 'YYYY-MM-DD');
			// this.endDt = Utility.setFormatDate(this.endDt, 'YYYY-MM-DD');

			this.strtDt = year + '-' + String(month).padStart(2, '0')  + '-' + String(day).padStart(2, '0');
			this.endDt = year + '-' + String(month).padStart(2, '0')  + '-' + String(day).padStart(2, '0');
		},
		async getPlanData() {
			let res = await this.postApiReturn({
				apiKey: 'selectWorkCaldDetlOne',
				resKey: 'workcaldDetlOneData',
				sendParam: {
					blocId: this.blocId,
					planSeq: this.planSeq,
					comId: this.comId,
				},
			});
			let returnData = res[0];
			this.strtDt = Utility.setFormatDate(returnData.strtDt, 'YYYY-MM-DD');
			this.endDt = Utility.setFormatDate(returnData.endDt, 'YYYY-MM-DD');
			this.strtHh = returnData.strtHh;
			this.strtMm = returnData.strtMm;
			this.endHh = returnData.endHh;
			this.endMm = returnData.endMm;
			this.planTitle = returnData.planTitle;
			this.planCntn = returnData.planCntn;
			this.planColor = returnData.planColor;
			this.colorClick(this.planColor);
		},

		async btnAction(action) {
			switch (action) {
				case 'close':
					this.dialog = !this.dialog;
					break;
				case 'save':
					if (this.popUpAction === 'insert') {
						if (
							this.strtDt === '' ||
							this.endDt === '' ||
							this.strtHh === '' ||
							this.strtMm === '' ||
							this.endHh === '' ||
							this.endMm === '' ||
							this.planTitle === '' ||
							this.planCntn === '' ||
							this.planColor === ''
						) {
							alert('필수값을 입력해주세요.');
						} else {
							this.dialog = !this.dialog;
							await this.insertDetail();
						}
					} else if (this.popUpAction === 'update') {
						if (
							this.strtDt == '' ||
							this.endDt == '' ||
							this.strtHh == '' ||
							this.strtMm == '' ||
							this.endHh == '' ||
							this.endMm == '' ||
							this.planTitle == '' ||
							this.planCntn == '' ||
							this.planColor == ''
						) {
							alert('필수값을 입력해주세요.');
						} else {
							this.dialog = !this.dialog;
							await this.updateDetail();
						}
					}
					break;
				case 'delete':
					this.dialog = !this.dialog;
					await this.deleteDetail();
					break;
			}
			//console.log(this);
		},
		async insertDetail() {
			var params = {
				strtDt: this.strtDt,
				endDt: this.endDt,
				strtHh: this.strtHh.toString(),
				strtMm: this.strtMm.toString(),
				endHh: this.endHh.toString(),
				endMm: this.endMm.toString(),
				blocId: this.blocId,
				planTitle: this.planTitle,
				planCntn: this.planCntn,
				planColor: this.planColor,
			};

			await this.postUpdateApi({
				apiKey: 'savePlanDetl',
				sendParam: {
					datas: {
						savePlanDetl: [params],
					},
					params: {},
				},
			});
			this.setPageData({
				isFind: true,
			});
		},
		async updateDetail() {
			var params = {
				strtDt: this.strtDt.substr(0, 10),
				endDt: this.endDt.substr(0, 10),
				strtHh: this.strtHh.toString(),
				strtMm: this.strtMm.toString(),
				endHh: this.endHh.toString(),
				endMm: this.endMm.toString(),
				planTitle: this.planTitle,
				planCntn: this.planCntn,
				planColor: this.planColor,
				blocId: this.blocId,
				planSeq: this.planSeq,
			};

			await this.postUpdateApi({
				apiKey: 'updatePlanDetl',
				sendParam: {
					datas: {
						updatePlanDetl: [params],
					},
					params: {},
				},
			});
			this.setPageData({
				isFind: true,
			});
		},
		async deleteDetail() {
			var params = {
				blocId: this.blocId,
				planSeq: this.planSeq,
			};

			await this.postUpdateApi({
				apiKey: 'deletePlanDetl',
				sendParam: {
					datas: {
						deletePlanDetl: [params],
					},
					params: {},
				},
			});
			this.setPageData({
				isFind: true,
			});
		},
		colorClick(t) {
			if (t == 'red') {
				document.getElementById('redDiv').classList.add('colPkSelect');
				document.getElementById('blueDiv').classList.remove('colPkSelect');
				document.getElementById('pupleDiv').classList.remove('colPkSelect');
				document.getElementById('greenDiv').classList.remove('colPkSelect');
				document.getElementById('orangeDiv').classList.remove('colPkSelect');
				document.getElementById('pinkDiv').classList.remove('colPkSelect');

				this.planColor = 'red';
			} else if (t == 'blue') {
				document.getElementById('redDiv').classList.remove('colPkSelect');
				document.getElementById('blueDiv').classList.add('colPkSelect');
				document.getElementById('pupleDiv').classList.remove('colPkSelect');
				document.getElementById('greenDiv').classList.remove('colPkSelect');
				document.getElementById('orangeDiv').classList.remove('colPkSelect');
				document.getElementById('pinkDiv').classList.remove('colPkSelect');

				this.planColor = 'blue';
			} else if (t == 'puple') {
				document.getElementById('redDiv').classList.remove('colPkSelect');
				document.getElementById('blueDiv').classList.remove('colPkSelect');
				document.getElementById('pupleDiv').classList.add('colPkSelect');
				document.getElementById('greenDiv').classList.remove('colPkSelect');
				document.getElementById('orangeDiv').classList.remove('colPkSelect');
				document.getElementById('pinkDiv').classList.remove('colPkSelect');

				this.planColor = 'puple';
			} else if (t == 'green') {
				document.getElementById('redDiv').classList.remove('colPkSelect');
				document.getElementById('blueDiv').classList.remove('colPkSelect');
				document.getElementById('pupleDiv').classList.remove('colPkSelect');
				document.getElementById('greenDiv').classList.add('colPkSelect');
				document.getElementById('orangeDiv').classList.remove('colPkSelect');
				document.getElementById('pinkDiv').classList.remove('colPkSelect');

				this.planColor = 'green';
			} else if (t == 'orange') {
				document.getElementById('redDiv').classList.remove('colPkSelect');
				document.getElementById('blueDiv').classList.remove('colPkSelect');
				document.getElementById('pupleDiv').classList.remove('colPkSelect');
				document.getElementById('greenDiv').classList.remove('colPkSelect');
				document.getElementById('orangeDiv').classList.add('colPkSelect');
				document.getElementById('pinkDiv').classList.remove('colPkSelect');

				this.planColor = 'orange';
			} else if (t == 'pink') {
				document.getElementById('redDiv').classList.remove('colPkSelect');
				document.getElementById('blueDiv').classList.remove('colPkSelect');
				document.getElementById('pupleDiv').classList.remove('colPkSelect');
				document.getElementById('greenDiv').classList.remove('colPkSelect');
				document.getElementById('orangeDiv').classList.remove('colPkSelect');
				document.getElementById('pinkDiv').classList.add('colPkSelect');

				this.planColor = 'pink';
			}
		},
	},
};
</script>

<style scoped lang="scss">
::v-deep {
	.v-toolbar__content {
		justify-content: space-between;
		padding: 0;

		.v-btn {
			margin-right: 0 !important;
		}
	}

	.v-card__actions {
		padding-bottom: 30px !important;
	}
	.colPk {
		width: 25px;
		height: 25px;
		text-align: center;
		border-radius: 5px 5px;
		cursor: pointer;
	}
	.colPkSelect {
		border: 2px solid;
	}
	.redBg {
		background-color: rgba(229, 62, 62, var(--bg-opacity));
		background-color: #e53e3e;
	}
	.blueBg {
		background-color: rgba(66, 153, 225, var(--bg-opacity));
		background-color: #4299e1;
	}
	.pupleBg {
		background-color: rgba(102, 126, 234, var(--bg-opacity));
		background-color: #667eea;
	}
	.greenBg {
		background-color: rgba(56, 178, 172, var(--bg-opacity));
		background-color: #38b2ac;
	}
	.orangeBg {
		background-color: rgba(237, 137, 54, var(--bg-opacity));
		background-color: #ed8936;
	}
	.pinkBg {
		background-color: rgba(237, 100, 166, var(--bg-opacity));
		background-color: #ed64a6;
	}
}

.startpicker-container2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;

	.v-input {
		.v-input__append-outer {
			margin-top: 0;
			margin-left: 0;

			#startpicker-container2,
			#endpicker-container2 {
				width: 100%;
				position: absolute;
				top: 36px;
				left: 0;
			}
		}
	}
}

.startpicker-container3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;

	.v-input {
		.v-input__append-outer {
			margin-top: 0;
			margin-left: 0;

			#startpicker-container3,
			#endpicker-container3 {
				width: 100%;
				position: absolute;
				top: 36px;
				left: 0;
			}
		}
	}
}

.v-input__custom {
	flex: 0 0 auto;
	&.half {
		width: calc(50% - 20px);
	}
}
::v-deep {
	.tui-timepicker-row {
		display: flex;
		justify-content: space-around;
		background-color: #edf4fc;
		.tui-timepicker-column.tui-timepicker-colon {
			color: #000 !important;
		}
	}
}
</style>
