<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
				<el-input size="default" v-model="state.search" clearable placeholder="请输入名称" style="max-width: 180px">
				</el-input>
				<el-button size="default" type="primary" class="ml10" @click="getTableData()">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="success" class="ml10" @click="onOpenAddDept('add')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增任务
				</el-button>
			</div>
      <el-table
          :data="state.tableData.data"
          v-loading="state.tableData.loading"
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
      >
				<!--树 children是个数组 、是不是懒加载
					show-overflow-tooltip 自适应长度
				-->
				<el-table-column prop="name" label="名称" show-overflow-tooltip width="200"> </el-table-column>
				<el-table-column prop="className" label="执行类名" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="methodName" label="执行方法" show-overflow-tooltip width="220"> </el-table-column>
				<el-table-column prop="cron" label="表达式" show-overflow-tooltip width="150"> </el-table-column>
				<el-table-column prop="status" label="执行状态" show-overflow-tooltip width="120">
					<template #default="scope">
						<span v-if="scope.row.status == 0">停用</span>
						<span v-else>正常</span>
					</template>
				</el-table-column>
				<el-table-column prop="describe" label="描述" show-overflow-tooltip width="200"> </el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="240">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenZhiXing(scope.row)">立刻执行</el-button>
						<el-button size="small" text type="primary"
							@click="onOpenEditDept('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				v-model:current-page="state.tableData.param.pageNum" background
				v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total">
			</el-pagination>
		</el-card>
		<DeptDialog ref="deptDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemRegular">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import { regularApi } from "/@/api/regular/index";
import { resetSourceDefaulter } from "echarts/types/src/data/helper/sourceHelper";
import { type } from "os";
// 引入组件
const DeptDialog = defineAsyncComponent(() => import('/@/views/sys/regular/dialog.vue'));

// 定义变量内容
const deptDialogRef = ref();
const state = reactive<any>({
	search: "",
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});
// 初始化表格数据
const getTableData = async (page?: any) => {
	if (page != undefined) {
		state.tableData.param.pageNum = page
	}
	state.tableData.loading = true;
	state.tableData.data = [];
	let item = await regularApi().indexApi({
		name: state.search,
		page: state.tableData.param.pageNum,
		limit: state.tableData.param.pageSize,
	})
	if (item.code != 0)
		return ElNotification({
			title: "提示",
			message: item.msg,
			type: "error",
			duration: 3000,
		});
	state.tableData.total = item.count
	state.tableData.data = item.data
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
//立刻执行按钮
const onOpenZhiXing = async (row: any) => {
	state.tableData.loading = true;
	const data = {
		name: row.name,
		describe: row.describe,
		cron: row.cron,
		className: row.className,
		methodName: row.methodName,
		status: row.status,
		id: row.id,
	}
	let item = await regularApi().standApi(data)
	if (item.code == 200) {
		ElNotification({
			title: "提示",
			message: item.msg,
			type: "success",
			duration: 3000,
		});
		getTableData();
	} else {
		ElNotification({
			title: "提示",
			message: item.msg,
			type: "error",
			duration: 3000,
		});
	}
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
const onHandleCurrentChange = (val: number) => {
  console.log(val)
	state.tableData.param.pageNum = val;
	getTableData();
};
const onHandleSizeChange = (val: number) => {
  console.log(val)
	state.tableData.param.pageSize = val;
  console.log(state.tableData.param.pageSize)
	getTableData();
};
// 打开新增菜单弹窗
const onOpenAddDept = (type: string) => {
	deptDialogRef.value.openDialog(type);
};
// 打开编辑菜单弹窗
const onOpenEditDept = (type: string, row: DeptTreeType) => {
	deptDialogRef.value.openDialog(type, row);
};
// 删除当前行
const onTabelRowDel = (row: DeptTreeType) => {
	ElMessageBox.confirm(`此操作将永久删除任务：${row.name}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let item = await regularApi().delApi({
				id: row.id,
			})
			if (item.code == 200) {
				ElMessage.success('删除成功');
				getTableData();
			}

		})
		.catch(() => { });
};

// 页面加载时
onMounted(() => {
	getTableData('1');
});
</script>

<style scoped lang="scss">
.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    .el-table {
      flex: 1;
    }
  }
}
</style>
