<template>
	<div class="device-tels-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<div class="flex-center-between mb20">
				<p class="table-title">信息列表</p>
				<div>
					<el-button type="primary" @click="addTimeLimit" v-waves> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
				</div>
			</div>
			<!-- 表格 -->
			<el-table :data="state.tableData" v-loading="state.loading">
				<el-table-column type="index" width="60" label="序号" />
				<el-table-column prop="timeLimitName" label="配置名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="workflowName" label="业务名称" show-overflow-tooltip width="130"></el-table-column>
				<el-table-column prop="morningEnd" label="创建人" show-overflow-tooltip width="130"></el-table-column>
				<el-table-column prop="afterBegin" label="状态" show-overflow-tooltip width="130"></el-table-column>
				<el-table-column label="操作" width="200" fixed="right" align="center">
					<template #default="scope">
						<el-button text type="primary" @click="updateTimeLimit(scope.row)" v-auth="'300503'" title="修改"> 修改 </el-button>
						<el-button text type="info" @click="detailTimeLimit(scope.row)" v-auth="'300503'" title="查看"> 查看 </el-button>
						<el-button text type="danger" @click="deleteTimeLimit(scope.row)" v-auth="'300504'" title="删除"> 删除 </el-button>
						<el-button text type="success" @click="enableTimeLimit(scope.row)" v-auth="'300504'" title="启用"> 启用 </el-button>
						<el-button text type="danger" @click="disableTimeLimit(scope.row)" v-auth="'300504'" title="禁用"> 禁用 </el-button>
					</template>
				</el-table-column>
				<template #empty>
					<Empty />
				</template>
			</el-table>
			<!-- 分页 -->
			<pagination :total="state.total" v-model:page="state.queryParams.PageIndex" v-model:limit="state.queryParams.PageSize" @pagination="getList" />
		</div>
		<AddTimeLimit ref="AddTimeLimitRef" @updateList="getList" />
		<EditTimeLimit ref="EditTimeLimitRef" @updateList="getList" />
		<Detail ref="DetailRef" @updateList="getList" />
	</div>
</template>
<script lang="ts" name="trunks" setup>
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { baseData } from '/@/api/system/timeLimit';
// 引入api
import { timelimitPaged, timelimitDelete, timelimitEnable, timelimitDisable } from '/@/api/system/timeLimit';

// 引入组件
const AddTimeLimit = defineAsyncComponent(() => import('/@/views/system/config/timeLimit/component/Add.vue'));
const EditTimeLimit = defineAsyncComponent(() => import('/@/views/system/config/timeLimit/component/Edit.vue'));
const Detail = defineAsyncComponent(() => import('/@/views/system/config/timeLimit/component/Detail.vue'));
 
// 定义变量内容
const state = reactive<any>({
	loading: false,
	queryParams: {
		PageIndex: 1,
		PageSize: 10,
		Keyword: '',
	},
	total: 0,
	tableData: [],
	multipleSelection: [],
	baseData: {},
});
const AddTimeLimitRef = ref();
const EditTimeLimitRef = ref();
const DetailRef = ref();
/** 获取时限列表 */
const getList = () => {
	state.loading = true;
	timelimitPaged(state.queryParams)
		.then((response: any) => {
			state.tableData = response.result?.items ?? [];
			state.total = response.result.total ?? 0;
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 新增时限
const addTimeLimit = () => {
	AddTimeLimitRef.value?.openDialog(state.baseData);
};
// 查看时限详情
const detailTimeLimit = (row: any)=>{
	DetailRef.value?.openDialog(row, state.baseData);
}
// 修改时限
const updateTimeLimit = (row: any) => {
	EditTimeLimitRef.value?.openDialog(row, state.baseData);
};
// 删除时限
const deleteTimeLimit = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除时限：【${row.timeLimitName}】, 是否继续?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			timelimitDelete(row.id).then(() => {
				ElMessage.success('删除成功');
				getList();
			});
		})
		.catch(() => {});
};
// 启用时限
const enableTimeLimit = (row: any) => {
	ElMessageBox.confirm(`此操作将启用：【${row.timeLimitName}】, 是否继续?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			timelimitEnable(row.id).then(() => {
				ElMessage.success('启用成功');
				getList();
			});
		})
		.catch(() => {});
};
// 禁用时限
const disableTimeLimit = (row: any) => {
	ElMessageBox.confirm(`此操作将禁用：【${row.timeLimitName}】, 是否继续?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
	})
		.then(() => {
			timelimitDisable(row.id).then(() => {
				ElMessage.success('禁用成功');
				getList();
			});
		})
		.catch(() => {});
};
onMounted(() => {
	// 基础信息
	baseData().then((res: any) => {
		state.baseData = res.result;
		state.baseData.acceptType = state.baseData.acceptType.map((v: any) => {
			return {
				key: String(v.key),
				value: v.value,
			};
		});
		state.baseData.emergencyLevel = state.baseData.emergencyLevel.map((v: any) => {
			return {
				key: String(v.key),
				value: v.value,
			};
		});
		state.baseData.identityType = state.baseData.identityType.map((v: any) => {
			return {
				key: String(v.key),
				value: v.value,
			};
		});
		state.baseData.moduleOptions = state.baseData.moduleOptions.map((v: any) => {
			return {
				key: String(v.key),
				value: v.value,
			};
		});
		state.baseData.orderType = state.baseData.orderType.map((v: any) => {
			return {
				key: String(v.key),
				value: v.value,
			};
		});
		state.baseData.sourceChannel = state.baseData.sourceChannel.map((v: any) => {
			return {
				key: String(v.key),
				value: v.value,
			};
		});
	});
});
onMounted(() => {
	getList();
});
</script>

<style lang="scss" scoped>
.device-tels-container {
	.el-table {
		flex: 1;
	}
}
</style>
