<template>
	<div class="system-timeLimit-container layout-pd">
		<el-card shadow="never">
      <div class="mb20">
          <el-button type="primary" @click="addTimeLimit" v-waves v-auth="'system:timeLimit:add'">
            <SvgIcon name="ele-Plus" class="mr5" />新增
          </el-button>
      </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="250" fixed="right" align="center">
          <template #default="{row}">
            <el-button link type="primary" @click="updateTimeLimit(row)" v-auth="'system:timeLimit:edit'" title="修改时效"> 修改 </el-button>
            <el-button link type="info" @click="detailTimeLimit(row)" v-auth="'system:timeLimit:detail'" title="查看详情"> 查看 </el-button>
            <el-button link type="danger" @click="deleteTimeLimit(row)" v-auth="'system:timeLimit:delete'" title="删除"> 删除 </el-button>
            <el-button link type="success" @click="enableTimeLimit(row)" v-auth="'system:timeLimit:enabled'" title="启用"> 启用 </el-button>
            <el-button link type="danger" @click="disableTimeLimit(row)" v-auth="'system:timeLimit:disabled'" 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="queryList"
      />
    </el-card>
		<time-limit-add ref="timeLimitAddRef" @updateList="queryList" />
		<time-limit-edit ref="timeLimitEditRef" @updateList="queryList" />
		<time-limit-detail ref="timeLimitDetailRef" @updateList="queryList" />
	</div>
</template>
<script lang="ts" name="timeLimit" setup>
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { throttle } from '/@/utils/tools';
import { auth } from '/@/utils/authFunction';
import { baseData } from '/@/api/system/timeLimit';
// 引入api
import { timeLimitPaged, timeLimitDelete, timeLimitEnable, timeLimitDisable } from '/@/api/system/timeLimit';

// 引入组件
const TimeLimitAdd = defineAsyncComponent(() => import('/@/views/system/config/timeLimit/component/Time-limit-add.vue'));
const TimeLimitEdit = defineAsyncComponent(() => import('/@/views/system/config/timeLimit/component/Time-limit-edit.vue'));
const TimeLimitDetail = defineAsyncComponent(() => import('/@/views/system/config/timeLimit/component/Time-limit-detail.vue'));

// 定义变量内容
const state = reactive<any>({
	loading: false, // 加载状态
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页显示条数
		Keyword: '',  // 关键字
	},
	total: 0, // 总条数
	tableData: [],  // 表格数据
	baseData: {}, // 基础数据
});
const timeLimitAddRef = ref<RefType>();
const timeLimitEditRef = ref<RefType>();
const timeLimitDetailRef = ref<RefType>();
/** 获取时限列表 */
const queryList = throttle(() => {
	if (!auth('system:timeLimit:query')) ElMessage.error('抱歉，您没有权限获取时效列表！');
	else {
		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;
			});
	}
}, 500);
// 新增时限
const addTimeLimit = () => {
	timeLimitAddRef.value?.openDialog(state.baseData);
};
// 查看时限详情
const detailTimeLimit = (row: any) => {
  timeLimitDetailRef.value?.openDialog(row, state.baseData);
};
// 修改时限
const updateTimeLimit = (row: any) => {
	timeLimitEditRef.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('删除成功');
				queryList();
			});
		})
		.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('启用成功');
				queryList();
			});
		})
		.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('禁用成功');
				queryList();
			});
		})
		.catch(() => {});
};
onMounted(() => {
	queryList();
	// 基础信息
	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,
			};
		});
	});
});
</script>

<style lang="scss" scoped>
.device-tels-container {
}
</style>
