<template>
	<div class="knowledge-audit-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<el-tabs v-model="state.queryParams.HasApproved" @tab-change="handleQuery">
				<el-tab-pane name="false" label="待审批" :disabled="state.loading"></el-tab-pane>
				<el-tab-pane name="true" label="已审批" :disabled="state.loading"></el-tab-pane>
			</el-tabs>
			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
				<vxe-grid v-bind="gridOptions" ref="gridRef" v-on="gridEvents" @checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent">
					<template #form>
						<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent :disabled="gridOptions.loading">
							<el-form-item label="审核类型" prop="KnowledgeApproveType">
								<el-segmented :options="state.tabAuditingNames" v-model="state.queryParams.KnowledgeApproveType" @change="handleQuery" />
							</el-form-item>
							<el-form-item label="关键字" prop="Keyword">
								<el-input
									v-model="state.queryParams.Keyword"
									placeholder="标题/创建人/创建部门/来源部门"
									clearable
									@keyup.enter="handleQuery"
									class="keyword-input"
								/>
							</el-form-item>
							<el-form-item label="是否公开" prop="IsPublic">
								<el-select v-model="state.queryParams.IsPublic" placeholder="请选择是否公开" @change="handleQuery" clearable>
									<el-option label="是" :value="true" />
									<el-option label="否" :value="false" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
								<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
							</el-form-item>
						</el-form>
					</template>
					<template #toolbar_buttons>
						<el-button
							type="primary"
							@click="onAuditBatch"
							v-if="state.queryParams.HasApproved === 'false'"
							v-auth="'knowledge:audit:batch'"
							:disabled="isChecked"
							:loading="state.loading"
							><SvgIcon name="ele-Edit" class="mr5" />批量审核<span v-if="checkTable.length">({{ checkTable.length }})</span>
						</el-button>
					</template>
					<template #title="{ row }">
						<el-button link type="primary" @click="onPreview(row.knowledge)">{{ row.knowledge?.title }}</el-button>
					</template>
					<template #action="{ row }">
						<el-button link type="primary" @click="onAudit(row)" v-auth="'knowledge:audit:audit'" v-if="row.knowledgeApproveStatus === 0">
							审核
						</el-button>
						<el-button link type="primary" @click="onHistory(row)"> 审核历史 </el-button>
					</template>
					<template #pager>
						<pagination
							@pagination="queryList"
							:total="state.total"
							v-model:current-page="state.queryParams.PageIndex"
							v-model:page-size="state.queryParams.PageSize"
							:disabled="state.loading"
						/>
					</template>
				</vxe-grid>
			</div>
		</div>
		<!--  审批  -->
		<knowledge-audit ref="knowledgeAuditRef" @updateList="queryList" />
		<!--  审批历史  -->
		<audit-history ref="auditHistoryRef" />
	</div>
</template>

<script lang="tsx" setup name="knowledgeAudit">
import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { useRouter } from 'vue-router';
import { knowledgeAuditList } from '@/api/knowledge/audit';

// 引入组件
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
const KnowledgeAudit = defineAsyncComponent(() => import('@/views/knowledge/audit/components/Knowledge-audit.vue')); // 审批
const AuditHistory = defineAsyncComponent(() => import('@/views/knowledge/audit/components/Audit-history.vue')); // 审核历史

// 定义变量内容
const state = reactive<any>({
	loading: false,
	queryParams: {
		// 查询参数
		PageIndex: 1,
		PageSize: 20,
		HasApproved: 'false', // 是否已审批
		KnowledgeApproveType: '', // 审核类型
		IsPublic: null, // 是否公开
		Keyword: null,
	},
	total: 0, // 总条数
	tabAuditingNames: [
		{
			value: '',
			label: '全部',
		},
		{
			value: 'add',
			label: '新增审核',
		},
		{
			value: 'update',
			label: '修改审核',
		},
		{
			value: 'delete',
			label: '删除审核',
		},
		{
			value: 'offshelf',
			label: '下架审核',
		},
	],
});

const gridOptions = reactive<any>({
	loading: false,
	border: true,
	showOverflow: true,
	columnConfig: {
		resizable: true,
	},
	scrollY: {
		enabled: true,
		gt: 100,
	},
	toolbarConfig: {
		zoom: true,
		custom: true,
		refresh: {
			queryMethod: () => {
				handleQuery();
			},
		},
		slots: {
			buttons: 'toolbar_buttons',
		},
	},
	customConfig: {
		storage: true,
	},
	id: 'snapshotConfigAreaUser',
	rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
	height: 'auto',
	columns: [
		{ type: 'checkbox', width: 50, align: 'center' },
		{
			field: 'knowledgeApproveTypeText',
			title: '审核类型',
			width: 120,
		},
		{
			field: 'knowledge.title',
			title: '标题',
			slots: { default: 'title' },
			minWidth: 200,
		},
		{
			field: 'knowledge.knowledgeTypeText',
			title: '知识分类',
			width: 150,
		},
		{
			field: 'knowledge.attribution',
			title: '知识归属',
			width: 140,
		},
		{
			field: 'knowledge.isPublic',
			title: '是否公开',
			width: 100,
			slots: {
				default: ({ row }) => {
					return row.knowledge?.isPublic ? '是' : '否';
				},
			},
		},
		{
			field: 'knowledge.versionDescription',
			title: '版本说明',
			minWidth: 200,
		},
		{
			field: 'knowledge.pageView',
			title: '阅读次数',
			width: 100,
			sortable: true,
		},
		{
			field: 'knowledge.creatorName',
			title: '创建人',
			width: 140,
		},
		{
			field: 'knowledge.creatorOrgName',
			title: '创建部门',
			width: 140,
		},
		{
			field: 'knowledge.creationTime',
			title: '创建时间',
			width: 160,
			sortable: true,
			formatter: 'formatDate',
		},
		{
			field: 'knowledge.lastModificationTime',
			title: '更新时间',
			width: 160,
			sortable: true,
			formatter: 'formatDate',
		},
		{ title: '操作', width: 140, fixed: 'right', align: 'center', slots: { default: 'action' } },
	],
	data: [],
});
const gridEvents = {
	sortChange(val: any) {
		state.queryParams.SortField = val.order ? val.field : null;
		// 0 升序 1 降序
		state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
		handleQuery();
	},
};
const ruleFormRef = ref<any>(null); // 表单ref
/** 搜索按钮操作 节流操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
// 获取参数列表
const queryList = () => {
	state.loading = true;
	gridOptions.loading = true;
	knowledgeAuditList(state.queryParams)
		.then((res) => {
			state.loading = false;
			gridOptions.data = res.result.items ?? [];
			state.total = res.result.total ?? 0;
			gridOptions.loading = false;
			gridRef.value.clearCheckboxRow();
			checkTable.value = [];
		})
		.finally(() => {
			state.loading = false;
			gridOptions.loading = false;
			gridRef.value.clearCheckboxRow();
			checkTable.value = [];
		});
};
// 重置表单
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
// 预览
const router = useRouter();
const onPreview = (row: any) => {
	router.push({
		name: 'knowledgePreview',
		params: {
			id: row.id,
			tagsViewName: row.title,
		},
	});
};
// 审批
const knowledgeAuditRef = ref<RefType>();
const onAudit = (row: any) => {
	knowledgeAuditRef.value.openDialog(row);
};
// 批量审核
const onAuditBatch = () => {
	const ids = checkTable.value.map((item: any) => item.id);
	knowledgeAuditRef.value.openDialog(ids, true);
};
// 查看历史记录
const auditHistoryRef = ref<RefType>();
const onHistory = (row: any) => {
	auditHistoryRef.value.openDialog(row);
};
const checkTable = ref<EmptyArrayType>([]);
const gridRef = ref<RefType>();
const selectAllChangeEvent = ({ checked }) => {
	if (gridRef.value) {
		const records = gridRef.value.getCheckboxRecords();
		checkTable.value = records;
		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
	}
};

const selectChangeEvent = ({ checked }) => {
	if (gridRef.value) {
		const records = gridRef.value.getCheckboxRecords();
		checkTable.value = records;
		console.log(checked ? '勾选事件' : '取消事件', records);
	}
};
const isChecked = computed(() => {
	return !Boolean(checkTable.value.length);
});
// 页面加载时
onMounted(() => {
	queryList();
});
</script>
