<template>
<el-input v-model="defaultValue" v-bind="$attrs">
	<template #append>
		<el-dropdown size="medium" @command="handleShortcuts">
			<el-button icon="el-icon-arrow-down"></el-button>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="* * * * *">每分钟</el-dropdown-item>
					<el-dropdown-item command="0 * * * *">每小时</el-dropdown-item>
					<el-dropdown-item command="0 0 * * *">每天零点</el-dropdown-item>
					<el-dropdown-item command="0 0 1 * *">每月一号零点</el-dropdown-item>
					<el-dropdown-item command="0 0 L * *">每月最后一天零点</el-dropdown-item>
					<el-dropdown-item command="0 0 ? * 1">每周星期日零点</el-dropdown-item>
					<el-dropdown-item v-for="(item, index) in shortcuts" :key="item.value" :divided="index==0" :command="item.value">{{item.text}}</el-dropdown-item>
					<el-dropdown-item icon="el-icon-plus" divided command="custom">自定义</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</template>
</el-input>
<el-dialog title="cron规则生成器" v-model="dialogVisible" :width="580" destroy-on-close append-to-body>
	<div class="sc-cron">
		<el-tabs v-model="activeName">
			<el-tab-pane v-for="(item, index) in tabsList" :key="index" :name="item.name">
				<template #label>
					<div class="sc-cron-num">
						<h2>{{item.label}}</h2>
						<h4>{{item.value}}</h4>
					</div>
				</template>
				<component :is="item.name" v-model="item.value" />
			</el-tab-pane>
		</el-tabs>
	</div>
	<template #footer>
		<el-button @click="dialogVisible=false" >取 消</el-button>
		<el-button type="primary" @click="submit()">确 认</el-button>
	</template>
</el-dialog>
</template>

<script>
import second from './components/second.vue'
import minute from './components/minute.vue'
import hour from './components/hour.vue'
import day from './components/day.vue'
import month from './components/month.vue'

export default {
	props: {
		modelValue: { type: String, default: "* * * * * ?" },
		shortcuts: { type: Array, default: () => [] }
	},
	data(){
		return {
			defaultValue: '',
			dialogVisible: false,
			activeName: 'second',
			tabsList: [
				{name: 'second', label: '秒', value: '*'},
				{name: 'minute', label: '分钟', value: '*'},
				{name: 'hour', label: '小时', value: '*'},
				{name: 'day', label: '日', value: '*'},
				{name: 'month', label: '月', value: '*'},
				// {name: 'week', label: '周', value: '*'}
				// {name: 'year', label: '年', value: '*'}
			]
		}
	},
	watch:{
		modelValue: {
			handler(val){
				this.defaultValue = val
				let arr = val.split(' ')
				this.tabsList.forEach((item, index) => {
					item.value = arr[index]
				})
			},
			immediate: true,
			deep: true
		}
	},
	components:{
		second,
		minute,
		hour,
		day,
		month
	},
	mounted(){
	},
	methods:{
		handleShortcuts(command){
				if(command == 'custom'){
					this.open()
				}else{
					this.defaultValue = command
					this.$emit('update:modelValue', this.defaultValue)
				}
		},
		open(){
			this.dialogVisible = true
		},
		submit(){
			let data = []
			for(let item of this.tabsList) {
				data.push(item.value)
			}
			this.defaultValue = data.join(' ')
			this.dialogVisible = false
			this.$emit('update:modelValue', this.defaultValue)
		}
	}
}
</script>

<style scoped>
.sc-cron:deep(.el-tabs__item) {height: auto;line-height: 1;padding:0 7px;vertical-align: bottom;}
.sc-cron-num {text-align: center;margin-bottom: 15px;width: 100%;}
.sc-cron-num h2 {font-size: 12px;margin-bottom: 15px;font-weight: normal;}
.sc-cron-num h4 {display: block;height: 32px;line-height: 30px;width: 100%;font-size: 12px;padding:0 15px;background: var(--el-color-primary-light-9);border-radius:4px;}
.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {background: var(--el-color-primary);color: #fff;}

[data-theme='dark'] .sc-cron-num h4 {background: var(--el-color-white);}
</style>
