<template>
	<el-container class="mainBox">
		<el-main class="nopadding">
			<div class="searchMain">
				<div class="title">任务信息</div>
				<div class="formRow">
					<el-form ref="form" :size="size" :model="form" label-width="100px">
						<el-form-item label="任务名称" prop="name">
							<el-select type="text" v-model="form.name" placeholder="请选择任务名称" style="width: 100%;" @visible-change="getNameList" @change="nameChange">
								<el-option v-for="(item,index) in setMap.nameList" :key="index" :value="item.name" :label="item.name">
									<span style="float: left">{{ item.name }}</span>
									<span style="float: right;color: var(--el-text-color-secondary);">{{ item.memo }}</span>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="任务描述" prop="memo">
							<el-input type="text" v-model="form.memo" placeholder="请输入任务描述" disabled></el-input>
						</el-form-item>
						<el-form-item label="定时任务表达式" prop="cron_expression">
							<el-input type="text" v-model="form.cron_expression" @input="cronExpressionInput" placeholder="请输入定时任务表达式"></el-input>
						</el-form-item>
						<el-form-item label="表达式描述" prop="cron_expression_desc">
							<el-input type="text" v-model="form.cron_expression_desc" placeholder="请输入表达式描述" disabled></el-input>
						</el-form-item>
						<el-form-item label="">
							<el-button :size="size" type="primary" @click="save" :loading="isSave">保存配置</el-button>
						</el-form-item>
					</el-form>
					<el-image class="img" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/mingling.png" fit="contain"></el-image>
				</div>
				<div class="title">配置列表
					<span class="tip">注意：此配置由专业IT管理员操作；无配置时以系统默认定时任务配置为准。</span>
				</div>
			</div>
			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" stripe :size="size" highlightCurrentRow :hideDo="true" :hidePagination="true">
				<sc-table-column label="序号" align="center" type="index"></sc-table-column>
				<el-table-column width="200" label="任务名称" prop="name"></el-table-column>
				<el-table-column width="200" label="任务描述" prop="memo"></el-table-column>
				<el-table-column width="200" label="任务表达式" prop="cron_expression"></el-table-column>
				<el-table-column label="表达式描述" prop="cron_expression_desc" show-overflow-tooltip></el-table-column>
				<el-table-column width="100" label="状态" fixed="right" align="center">
					<template #default="scope">
						<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="160">
					<template #default="scope">
						<el-dropdown>
							<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button>
							<template #dropdown>
								<div v-auth="'crontabDelete'">
									<el-dropdown-menu>
										<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete">删除配置</el-dropdown-item>
									</el-dropdown-menu>
								</div>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "regularTime",
	data(){
		return{
			size:'small',
			isSave:false,
			setMap:{
				nameList:[]
			},
			form:{
				memo:"",
				name:"",
				cron_expression:"",
				cron_expression_desc:"",
				callback:{
					command:""
				},
				type:""
			},
			list:{
				apiObj:this.$API.setup.crontab.list,
				column:[]
			}
		}
	},
	mounted() {

	},
	methods:{
		async getNameList() {
			const res = await this.$API.setup.crontab.configList.get()
			if(res.code == 200){
				this.setMap.nameList = res.data;
			}
		},
		nameChange(e){
			this.setMap.nameList.forEach(item=>{
				if(item.name == e){
					this.form.memo = item.memo;
					this.form.cron_expression = item.cron_expression;
					this.form.cron_expression_desc = item.cron_expression_desc;
					this.form.callback = item.callback;
					this.form.task_type = item.type;

					this.setDescribe();
				}
			})
		},
		cronExpressionInput(){
			this.setDescribe();
		},
		// 表达式转换备注
		async setDescribe() {
			let params = {
				cron_expression: this.form.cron_expression
			}
			const res = await this.$API.setup.crontab.describe.post(params);
			if(res.code == 200){
				this.form.cron_expression_desc = res.data.cron_expression;
			}
		},
		save(){
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.isSave = true;
					const res = await this.$API.setup.crontab.add.post(this.form);
					this.isSave = false;
					if(res.code == 200){
						this.$refs.table.reload();
						this.visible = false;
						this.$message.success("操作成功")
					}
				}
			})
		},
		table_del(row){
			this.$confirm(`确定删除 ${row.name} 吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const reqData = {id: row.id};
				const res = await this.$API.setup.crontab.delete.post(reqData);
				if(res.code == 200){
					this.$refs.table.refresh()
					this.$message.success("删除成功")
				}
			}).catch(()=>{})
		},
		// 状态
		changeSwitch(val, row) {
			row.$switch_yx = true;
			setTimeout(async () => {
				let params = {
					id: row.id,
					status: row.active_status,
				};
				const res = await this.$API.setup.crontab.status.post(params);
				if(res.code !=200){
					row.active_status = !row.active_status;
				}
				delete row.$switch_status;
				delete row.$switch_yx;
			}, 500);
		},
	}
}
</script>

<style scoped lang="scss">
	.el-main.nopadding .searchMain{
		align-items: flex-start;
		.title{
			font-weight: 500;
			padding: 0 0 5px 0;
			font-size: 13px;
			display: flex;
			align-items: center;
			.tip{
				margin-left: 10px;
				color: var(--el-color-warning);
				font-weight: 400;
				font-size: 12px;
			}
		}
	}
	.searchMain{
		flex-direction: column;
		justify-content: flex-start;
		.el-input{
			width: 400px;
		}
	}
	.formRow{
		display: flex;
		.img{
			margin-left: 30px;
			height: 165px;
			border-radius: 8px;
		}
	}
</style>
