<script setup>

import useUtils from "@/utils/utils.js"
import {onMounted, ref} from "vue"
import TInputText from "@/components/ui/TInputText.vue";
import TDatePicker from "@/components/ui/TDatePicker.vue";
import "@/lib/date.js"

const utils = useUtils()

const props = defineProps(["v-name", "v-timestamp"])

const leadingZero = function (s, l) {
	s = s.toString()
	if (l <= s.length) {
		return s
	}
	for (let i = 0; i < l - s.length; i++) {
		s = "0" + s
	}
	return s
}

const {timestamp, day, hour, minute, second, hasDayError, hasHourError, hasMinuteError, hasSecondError} = (function () {
	let timestamp = props.vTimestamp
	if (timestamp != null) {
		timestamp = parseInt(timestamp)
		if (isNaN(timestamp)) {
			timestamp = 0
		}
	} else {
		timestamp = 0
	}

	let day = ""
	let hour = ""
	let minute = ""
	let second = ""

	if (timestamp > 0) {
		let date = new Date()
		date.setTime(timestamp * 1000)

		let year = date.getFullYear().toString()
		let month = leadingZero((date.getMonth() + 1).toString(), 2)
		day = year + "-" + month + "-" + leadingZero(date.getDate().toString(), 2)

		hour = leadingZero(date.getHours().toString(), 2)
		minute = leadingZero(date.getMinutes().toString(), 2)
		second = leadingZero(date.getSeconds().toString(), 2)
	}

	return {
		timestamp: ref(timestamp),
		day: ref(day),
		hour: ref(hour),
		minute: ref(minute),
		second: ref(second),

		hasDayError: ref(false),
		hasHourError: ref(false),
		hasMinuteError: ref(false),
		hasSecondError: ref(false)
	}
})()

const change = function () {
	// day
	if (!/^\d{4}-\d{1,2}-\d{1,2}$/.test(day.value)) {
		hasDayError.value = true
		timestamp.value = 0
		return
	}
	let pieces = day.value.split("-")
	let year = parseInt(pieces[0])

	let month = parseInt(pieces[1])
	if (month < 1 || month > 12) {
		hasDayError.value = true
		return
	}

	let _day = parseInt(pieces[2])
	if (_day < 1 || _day > 32) {
		hasDayError.value = true
		return
	}

	hasDayError.value = false

	// hour
	if (!/^\d+$/.test(hour.value)) {
		hasHourError.value = true
		return
	}
	let _hour = parseInt(hour.value)
	if (isNaN(_hour)) {
		hasHourError.value = true
		return
	}
	if (_hour < 0 || _hour >= 24) {
		hasHourError.value = true
		return
	}
	hasHourError.value = false

	// minute
	if (!/^\d+$/.test(minute.value)) {
		hasMinuteError.value = true
		return
	}
	let _minute = parseInt(minute.value)
	if (isNaN(_minute)) {
		hasMinuteError.value = true
		return
	}
	if (_minute < 0 || _minute >= 60) {
		hasMinuteError.value = true
		return
	}
	hasMinuteError.value = false

	// second
	if (!/^\d+$/.test(second.value)) {
		hasSecondError.value = true
		return
	}
	let _second = parseInt(second.value)
	if (isNaN(_second)) {
		hasSecondError.value = true
		return
	}
	if (_second < 0 || _second >= 60) {
		hasSecondError.value = true
		return
	}
	hasSecondError.value = false

	let date = new Date(year, month - 1, _day, _hour, _minute, _second)
	timestamp.value = Math.floor(date.getTime() / 1000)
}

const resultTimestamp = function () {
	return timestamp.value
}

const nextYear = function () {
	let date = new Date()
	date.setFullYear(date.getFullYear() + 1)
	day.value = date.getFullYear() + "-" + leadingZero(date.getMonth() + 1, 2) + "-" + leadingZero(date.getDate(), 2)
	hour.value = leadingZero(date.getHours(), 2)
	minute.value = leadingZero(date.getMinutes(), 2)
	second.value = leadingZero(date.getSeconds(), 2)
	change()
}

const nextDays = function (days) {
	let date = new Date()
	date.setTime(date.getTime() + days * 86400 * 1000)
	day.value = date.getFullYear() + "-" + leadingZero(date.getMonth() + 1, 2) + "-" + leadingZero(date.getDate(), 2)
	hour.value = leadingZero(date.getHours(), 2)
	minute.value = leadingZero(date.getMinutes(), 2)
	second.value = leadingZero(date.getSeconds(), 2)
	change()
}

const nextHours = function (hours) {
	let date = new Date()
	date.setTime(date.getTime() + hours * 3600 * 1000)
	day.value = date.getFullYear() + "-" + leadingZero(date.getMonth() + 1, 2) + "-" + leadingZero(date.getDate(), 2)
	hour.value = leadingZero(date.getHours(), 2)
	minute.value = leadingZero(date.getMinutes(), 2)
	second.value = leadingZero(date.getSeconds(), 2)
	change()
}

defineExpose({
	resultTimestamp
})

onMounted(() => {
	if (timestamp.value < 0) {
		day.value = new Date().format("Y-m-d")
		hour.value = "23"
		minute.value = "59"
		second.value = "59"
	}
	change()
})

</script>

<template>
	<div>
		<input type="hidden" :name="vName" :value="timestamp"/>
		<div class="flex items-center gap-3" style="padding: 0; margin:0">
			<div class="ui field" :class="{error: hasDayError}">
				<TDatePicker type="text" v-model="day" placeholder="YYYY-MM-DD" style="width:8.2em" maxlength="10" @change="change"/>
			</div>
			<div class="ui field" :class="{error: hasHourError}">
				<TInputText type="text" v-model="hour" maxlength="2" style="width:3.6em" placeholder="时" @input="change"/>
			</div>
			<div class="ui field">:</div>
			<div class="ui field" :class="{error: hasMinuteError}">
				<TInputText type="text" v-model="minute" maxlength="2" style="width:3.6em" placeholder="分" @input="change"/>
			</div>
			<div class="ui field">:</div>
			<div class="ui field" :class="{error: hasSecondError}">
				<TInputText type="text" v-model="second" maxlength="2" style="width:3.6em" placeholder="秒" @input="change"/>
			</div>
		</div>
		<p class="comment">常用时间：<a href="" @click.prevent="nextHours(1)"> &nbsp;1小时&nbsp; </a>
			<span class="disabled">|</span> <a href="" @click.prevent="nextDays(1)"> &nbsp;1天&nbsp; </a>
			<span class="disabled">|</span> <a href="" @click.prevent="nextDays(3)"> &nbsp;3天&nbsp; </a>
			<span class="disabled">|</span> <a href="" @click.prevent="nextDays(7)"> &nbsp;1周&nbsp; </a>
			<span class="disabled">|</span> <a href="" @click.prevent="nextDays(30)"> &nbsp;30天&nbsp; </a>
			<span class="disabled">|</span> <a href="" @click.prevent="nextYear()"> &nbsp;1年&nbsp; </a></p>
	</div>
</template>

<style scoped>
</style>
