<template>
	<div>
		<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
		<v-dialog v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8">
			<v-card>
				<v-card-title class="px-6 py-4 d-flex align-center justify-space-between">
					<span class="custom-title-4">{{ label }}</span>
					<a-button icon="close" type="text" @click="dialog = !dialog"></a-button>
				</v-card-title>
				<!-- <v-toolbar
					:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
					class="py-4 pr-3 pl-5"
					height="auto"
				>
					<v-toolbar-title>{{ label }}</v-toolbar-title>
				</v-toolbar> -->
				<!-- <v-card-title>  
          일정 상세 내용
        </v-card-title> -->
				<!-- <template v-for="(item, index) in detailList"> -->
				<template>
					<div class="pa-6 pt-0">
						<v-row no-gutters class="mb-4">
							<v-col :cols="12">
								<label class="search-box-label">
									<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
									일정 시작
								</label>
							</v-col>
							<v-col :cols="6" class="py-0 pr-2">
								<!-- <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="6" class="py-0 pl-2">
								<!-- <DatePicker v-model="strtDt" :parentPrgmId="parentPrgmId"/> -->
								<component :parentPrgmId="parentPrgmId" :is="'SelectBoxTime'" ref="SelectBox1"
									:propsValue="selectTimeValue1" :itemList="selectTimeValueList1" :minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
										" @update:propsValue="selectTimeValue1 = $event" />
								<!-- <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 no-gutters class="mb-4">
							<v-col :cols="12">
								<label class="search-box-label">
									<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
									일정 종료
								</label>
							</v-col>
							<v-col :cols="6" class="pr-2">
								<!-- <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="6" class="pl-2">
								<component :parentPrgmId="parentPrgmId" :is="'SelectBoxTime'" ref="SelectBox2"
									:propsValue="selectTimeValue2" :itemList="selectTimeValueList2" :minInterval="selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
										" @update:propsValue="selectTimeValue2 = $event" />
							</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 no-gutters class="mb-4">
							<v-col :cols="12">
								<label class="search-box-label">
									<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
									일정 제목
								</label>
							</v-col>
							<v-col :cols="12" class="py-0">
								<v-text-field v-model="planTitle" class="v-input__custom" outlined
									:hide-details="true"></v-text-field>
							</v-col>
						</v-row>
						<v-row no-gutters class="mb-4">
							<v-col :cols="12">
								<label class="search-box-label">
									<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
									일정 상세 내용
								</label>
							</v-col>
							<v-col :cols="12" class="py-0">
								<v-textarea v-model="planCntn" class="v-input__custom" outlined :hide-details="true"
									:maxlength="1000"></v-textarea>
							</v-col>
						</v-row>
						<v-row no-gutters class="mb-4">
							<v-col :cols="12">
								<label class="search-box-label">
									<v-icon small :class="['mr-1', 'icon-orange']">$icoBulletPoint</v-icon>
									표시 색상
								</label>

							</v-col>
							<v-col :cols="6">
								<div class="d-flex calendar-color" style="gap:16px">

									<div id="redDiv" class="colPk redBg" @click="colorClick('red')">
										<div class="inner-color"></div>
									</div>

									<div id="blueDiv" class="colPk blueBg" @click="colorClick('blue')">
										<div class="inner-color"></div>
									</div>


									<div id="pupleDiv" class="colPk pupleBg" @click="colorClick('puple')">
										<div class="inner-color"></div>
									</div>


									<div id="greenDiv" class="colPk greenBg" @click="colorClick('green')">
										<div class="inner-color"></div>
									</div>


									<div id="orangeDiv" class="colPk orangeBg" @click="colorClick('orange')">
										<div class="inner-color"></div>
									</div>


									<div id="pinkDiv" class="colPk pinkBg" @click="colorClick('pink')">
										<div class="inner-color"></div>
									</div>

								</div>
							</v-col>
						</v-row>
					</div>
				</template>
				<v-card-actions class="justify-end">
					<a-button :ripple="false" @click="btnAction('close')" class="mr-2">닫기</a-button>
					<a-button type="primary" :ripple="false" @click="btnAction('save')" class="mr-2">저장</a-button>
					<a-button v-show="popUpAction === 'update'" type="danger" ghost danger :ripple="false"
						@click="btnAction('delete')">삭제</a-button>

				</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';
import SelectBoxTime from "@/components/common/select/SelectBoxTime";

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,
		},
		selectBoxTimeItemList: {
			type: Object,
			require: false,
			default: () => {
				return {
					selectTimeValue1: "00 : 00", // selectBoxTime에 필요한 prop
					selectTimeValueList1: [], // selectBoxTime에 필요한 prop
					selectTimeValue2: "01 : 00", // selectBoxTime에 필요한 prop
					selectTimeValueList2: [], // selectBoxTime에 필요한 prop
					minInterval: 10,
				};
			},
		},
	},
	components: {
		InputText,
		InputNumber,
		TextArea,
		SelectBox,
		SelectBoxes,
		CheckBox,
		Label,
		DatePicker,
		Utility,
		TuiDatepicker,
		VueNumericInput,
		SelectBoxTime,
	},
	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: {
			},
			selectTimeValue1:
				this.selectBoxTimeItemList.selectTimeValue1 != undefined
					? this.selectBoxTimeItemList.selectTimeValue1
					: null, // selectBoxTime에 필요한 prop
			selectTimeValueList1:
				this.selectBoxTimeItemList.selectTimeValueList1 != undefined
					? this.selectBoxTimeItemList.selectTimeValueList1
					: [], // selectBoxTime에 필요한 prop
			selectTimeValue2:
				this.selectBoxTimeItemList.selectTimeValue2 != undefined
					? this.selectBoxTimeItemList.selectTimeValue2
					: null, // selectBoxTime에 필요한 prop
			selectTimeValueList2:
				this.selectBoxTimeItemList.selectTimeValueList2 != undefined
					? this.selectBoxTimeItemList.selectTimeValueList2
					: [], // selectBoxTime에 필요한 prop
		};
	},
	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) {

			// const [hh, mm] = selectTimeValue1.split(':');
			// console.log(`Hours: ${hh}, Minutes: ${mm}`);

			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');
		},
		selectTimeValue1(val) {
			this.setPageData({ selectTimeValue1: val });
		},
		selectTimeValue2(val) {
			this.setPageData({ selectTimeValue2: val });
		}
	},
	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.selectTimeValue1 = returnData.strtHh + ' : ' + returnData.strtMm;
			this.selectTimeValue2 = returnData.endHh + ' : ' + 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.selectTimeValue1 === '' ||
							this.selectTimeValue2 === '' ||
							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.selectTimeValue1 === '' ||
							this.selectTimeValue2 === '' ||
							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() {

			const [strtHh, strtMm] = this.selectTimeValue1 ? this.selectTimeValue1.split(':') : '00:00'.split(':');
			const [endHh, endMm] = this.selectTimeValue2 ? this.selectTimeValue2.split(':') : '01:00'.split(':');

			var params = {
				strtDt: this.strtDt,
				endDt: this.endDt,
				strtHh: strtHh.trim().toString(),
				strtMm: strtMm.trim().toString(),
				endHh: endHh.trim().toString(),
				endMm: endMm.trim().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() {
			const [strtHh, strtMm] = this.selectTimeValue1 ? this.selectTimeValue1.split(':') : '00:00'.split(':');
			const [endHh, endMm] = this.selectTimeValue2 ? this.selectTimeValue2.split(':') : '01:00'.split(':');

			var params = {
				strtDt: this.strtDt.substr(0, 10),
				endDt: this.endDt.substr(0, 10),
				strtHh: strtHh.trim().toString(),
				strtMm: strtMm.trim().toString(),
				endHh: endHh.trim().toString(),
				endMm: endMm.trim().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;
	}

	.inner-color {
		width: 100%;
		height: 100%;
		border-radius: 4px;
	}

	.colPk {
		width: 28px;
		height: 28px;
		text-align: center;
		border-radius: 6px 6px;
		cursor: pointer;
		padding: 4px
	}

	.colPkSelect {
		border: 1px solid #00000073;
	}

	.redBg .inner-color {
		background-color: rgba(229, 62, 62, var(--bg-opacity));
		background-color: #FF4D4F;
	}

	.blueBg .inner-color {
		background-color: rgba(66, 153, 225, var(--bg-opacity));
		background-color: #597EF7;
	}

	.pupleBg .inner-color {
		background-color: rgba(102, 126, 234, var(--bg-opacity));
		background-color: #9254DE;
	}

	.greenBg .inner-color {
		background-color: rgba(56, 178, 172, var(--bg-opacity));
		background-color: #73D13D;
	}

	.orangeBg .inner-color {
		background-color: rgba(237, 137, 54, var(--bg-opacity));
		background-color: #FFA940;
	}

	.pinkBg .inner-color {
		background-color: rgba(237, 100, 166, var(--bg-opacity));
		background-color: #F759AB;
	}
}




.v-input__custom {


	&.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;
		}
	}

	.startpicker-container2 {
		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 {
		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;
				}
			}
		}
	}
}
</style>
