<template>
	<div class="sc-cron">
		<a-input v-model:value="innerValue" placeholder="请输入Cron表达式" allow-clear @change="handleChange" />
		<div class="cron-tips">
			<div class="tip-title">快捷设置:</div>
			<a-space>
				<a-button size="small" @click="setCron('0 0 * * *')">每天零点</a-button>
				<a-button size="small" @click="setCron('0 0 * * 0')">每周零点</a-button>
				<a-button size="small" @click="setCron('0 0 1 * *')">每月1号零点</a-button>
				<a-button size="small" @click="setCron('0 0/6 * * *')">每6小时</a-button>
				<a-button size="small" @click="setCron('0 * * * *')">每小时</a-button>
				<a-button size="small" @click="setCron('0 */30 * * *')">每30分钟</a-button>
			</a-space>
		</div>
		<div class="cron-description">格式: 秒 分 时 日 月 周</div>
	</div>
</template>

<script setup>
import { ref, watch } from 'vue'

defineOptions({
	name: 'scCron',
})

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
	shortcuts: {
		type: Array,
		default: () => [],
	},
})

const emit = defineEmits(['update:modelValue', 'change'])

const innerValue = ref(props.modelValue)

// 监听外部值变化
watch(
	() => props.modelValue,
	(newVal) => {
		innerValue.value = newVal
	},
)

// 设置Cron表达式
const setCron = (cron) => {
	innerValue.value = cron
	emit('update:modelValue', cron)
	emit('change', cron)
}

// 处理输入变化
const handleChange = (e) => {
	const value = e.target.value
	emit('update:modelValue', value)
	emit('change', value)
}
</script>

<style scoped lang="scss">
.sc-cron {
	.cron-tips {
		margin-top: 8px;
		padding: 8px;
		background: #f5f5f5;
		border-radius: 4px;

		.tip-title {
			font-size: 12px;
			color: #666;
			margin-bottom: 8px;
		}
	}

	.cron-description {
		margin-top: 4px;
		font-size: 12px;
		color: #999;
	}
}
</style>
