<template>
	<div class="knowledge-type-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="expand">
						<SvgIcon
							name="ele-ArrowDownBold"
							style="transition: transform var(--el-transition-duration)"
							:style="state.isExpand ? 'transform: none' : 'transform: rotateZ(180deg)'"
							class="mr5"
						/>
						{{ state.isExpand ? '收起' : '展开' }}</el-button
					>
					<el-button type="primary" @click="onOpenAdd"> <SvgIcon name="ele-Plus" class="mr5" /> 新增 </el-button>
				</div>
			</div>
			<!-- 表格 -->
			<el-table class="table" :data="state.tableData" row-key="id" default-expand-all v-loading="state.loading" :tree-props="{ children: 'child' }" ref="tableRef">
				<el-table-column prop="name" label="类型名称" />
				<el-table-column prop="sort" label="排序" width="150" />
				<el-table-column prop="isEnable" label="状态" width="150" align="center">
					<template #default="{ row }">
						<el-tag v-if="row.isEnable" type="success">
							启用
						</el-tag>
						<el-tag v-else type="info">
							停用
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300" fixed="right" align="center">
					<template #default="{ row }">
						<el-button text type="primary" @click="onOpenEdit(row)" title="修改"> 修改 </el-button>
						<el-button text type="info" @click="onDisabled(row)" v-if="row.isEnable" title="停用"> 停用 </el-button>
						<el-button text type="warning" @click="onEnable(row)" v-else title="启用"> 启用 </el-button>
						<el-button text type="info" @click="undercarriage(row)" v-if="row.isEnable" title="停用并下架关联知识"> 停用并下架 </el-button>
						<el-button text type="danger" @click="onDelete(row)" title="删除"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<Add ref="AddRef" @updateList="getList" />
		<Edit ref="EditRef" @updateList="getList" />
	</div>
</template>
<script lang="ts" setup name="knowledgeType">
import { defineAsyncComponent, ref, h, reactive, onMounted, watch } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { treelist, delType, changeAble, changestateandoffshelf } from '/@/api/knowledge/type';
import SvgIcon from '/@/views/system/menu/component/SvgIcon.vue';
// 引入组件
const Add = defineAsyncComponent(() => import('/@/views/knowledge/config/type/component/add.vue'));
const Edit = defineAsyncComponent(() => import('/@/views/knowledge/config/type/component/edit.vue'));

// 定义变量内容
const AddRef = ref();
const EditRef = ref();
const state = reactive({
	tableData: <any>[], // 获取所有菜单
	loading: false,
	isExpand: true,
});
const expand = () => {
	state.isExpand = !state.isExpand;
	toggleRowExpansionAll(state.tableData, state.isExpand);
};
const tableRef = ref();
const toggleRowExpansionAll = (data: any[], isExpansion: boolean) => {
	data.forEach((item) => {
		tableRef.value.toggleRowExpansion(item, isExpansion);
		if (item.child !== undefined && item.child !== null) {
			toggleRowExpansionAll(item.child, isExpansion);
		}
	});
};
// 打开新增菜单弹窗
const onOpenAdd = () => {
	AddRef.value.openDialog(state.tableData);
};
// 打开编辑菜单弹窗
const onOpenEdit = (row: any) => {
	EditRef.value.openDialog(row, state.tableData);
};
// 禁用·
const onDisabled = (row: any) => {
	ElMessageBox.confirm(`是否要停用该类型？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			changeAble(row.id).then(() => {
				ElMessage.success('停用成功');
				getList();
			});
		})
		.catch(() => {});
};
// 启用
const onEnable = (row: any) => {
	ElMessageBox.confirm(`是否要启用该类型？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			changeAble(row.id).then(() => {
				ElMessage.success('启用成功');
				getList();
			});
		})
		.catch(() => {});
};

// 删除当前行
const onDelete = (row: any) => {
	ElMessageBox.confirm(`是否确认删除该类型？删除后不可恢复`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			delType(row.id).then(() => {
				ElMessage.success('删除成功');
				getList();
			});
		})
		.catch(() => {});
};
const undercarriage = (row: any) => {
	ElMessageBox.confirm(`确定要停用并下架相关知识？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			changestateandoffshelf(row.id).then(() => {
				ElMessage.success('操作成功');
				getList();
			});
		})
		.catch(() => {});
};
// 获取所有部门结构
const getList = () => {
	state.loading = true;
	treelist()
		.then((res: any) => {
			state.tableData = res?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 页面加载时
onMounted(() => {
	getList();
});
</script>
<style lang="scss" scoped>
.knowledge-type-container {
	.table {
		flex: 1;
	}
}
</style>
