<template>
	<div class="crew-trigger-config">
		<el-form label-width="100px" size="small">
			<el-form-item label="手动触发">
				<el-switch v-model="config.manual" @change="emitChange" />
			</el-form-item>
			<el-form-item label="定时触发">
				<el-switch v-model="config.cron.enabled" @change="emitChange" />
			</el-form-item>
			<template v-if="config.cron.enabled">
				<el-form-item label="Cron 表达式">
					<el-input
						v-model="config.cron.expression"
						placeholder="0 9 * * *"
						@change="emitChange"
					/>
				</el-form-item>
				<el-form-item label="时区">
					<el-input
						v-model="config.cron.timezone"
						placeholder="Asia/Shanghai"
						@change="emitChange"
					/>
				</el-form-item>
			</template>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";

const props = defineProps<{ modelValue?: any }>();
const emit = defineEmits<{ (e: "update:modelValue", val: any): void }>();

const config = reactive({
	manual: true,
	cron: { enabled: false, expression: "0 9 * * *", timezone: "Asia/Shanghai" },
});

watch(
	() => props.modelValue,
	(val) => {
		if (val) {
			config.manual = val.manual ?? true;
			if (val.cron) Object.assign(config.cron, val.cron);
		}
	},
	{ immediate: true }
);

function emitChange() {
	emit("update:modelValue", JSON.parse(JSON.stringify(config)));
}
</script>

<style scoped lang="scss">
.crew-trigger-config {
	padding: 8px 0;
}
</style>
