<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>抄送事项
				<el-badge class="mark" v-if="flowCopyCount !== 0" :value="flowCopyCount" :max="99" style="line-height: 0;margin-top: 8px"/>
				</span>
				<div style="float:right;">
					<el-button type="text" @click="refreshList()">刷新</el-button>
					<el-button type="text" @click="toPendingList()">更多>></el-button>
				</div>
			</div>
		</template>
		<el-table :data="dataList" style="width: 100%" height="480" border="inner" :menu-config="{}" @sort-change="sortChangeHandle"
				  :sort-config="{remote:true}"  resizable>
			<el-table-column
				min-width="200px"
				label="实例标题"
				prop="procInsName"
			></el-table-column>
			<el-table-column
				min-width="200px"
				label="抄送日期"
				prop="createTime"
			></el-table-column>
			<el-table-column
				min-width="200px"
				label="抄送发起人"
				prop="createBy.name"
			></el-table-column>
			<el-table-column
				label="操作"
				min-width="200px"
				fixed="right"
				align="center"
			>
				<template #default="scope">
					<el-button
						type="primary"
						text
						icon="view-filled"
						@click="detail(scope.row)"
					>查阅</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<vxe-pager
			background
			size="small"
			:current-page="tablePage.currentPage"
			:page-size="tablePage.pageSize"
			:total="tablePage.total"
			:page-sizes="[
				10,
				20,
				100,
				1000,
				{ label: '全量数据', value: 1000000 },
			]"
			:layouts="[
				'PrevPage',
				'JumpNumber',
				'NextPage',
				'FullJump',
				'Sizes',
				'Total',
			]"
			@page-change="currentChangeHandle"
		>
		</vxe-pager>
	</el-card>
	<MonthlyForm ref="monthlyForm" @refreshList="refreshList"></MonthlyForm>
</template>

<script>
import flowCopyService from "@/api/flowable/flowCopyService";
import taskService from "@/api/flowable/taskService";
import MonthlyForm from '@/views/jy/monthly/MonthlyForm'
import pick from "lodash.pick";
export default {
	title: "抄送事项",
	icon: "flowCopy",
	description: "抄送事项",
	layout: {
		w: 6,
		h: 15,
	},
	components: {
		MonthlyForm
	},
	data() {
		return {
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: [],
			},
			loading: false,
		};
	},
	created () {
	},
	computed:{
		flowCopyCount(){
			return this.$store.state.global.flowCopyCount
		},
	},
	mounted() {
		this.refreshList();
	},

	activated() {
		this.refreshList();
	},
	methods: {
		// 获取数据列表
		refreshList() {
			this.loading = true;
			flowCopyService
				.list({
					current: this.tablePage.currentPage,
					size: this.tablePage.pageSize,
					orders: this.tablePage.orders,
					...this.searchForm,
				})
				.then((data) => {
					this.dataList = data.records;
					this.tablePage.total = data.total;
					this.$store.state.global.flowCopyCount = data.total
					this.loading = false;
				});
		},
		// 当前页
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage;
			this.tablePage.pageSize = pageSize;
			this.refreshList();
		},
		// 排序
		sortChangeHandle(column) {
			this.tablePage.orders = [];
			if (column.order != null) {
				this.tablePage.orders.push({
					column: this.$utils.toLine(column.property),
					asc: column.order === "asc",
				});
			}
			this.refreshList();
		},
		// 查看
		detail(row) {
			if (row.procInsName.includes("月报")){
				this.$refs.monthlyForm.init('view',row.procInsId)
			}else {
				taskService
					.getTaskDef({
						procInsId: row.procInsId,
						procDefId: row.procDefId,
					})
					.then((data) => {
						this.$router.push({
							path: "/flowable/task/TaskFormDetail",
							query: {
								readOnly: true,
								title: row.procInsName,
								formTitle: row.procInsName,
								...pick(
									data,
									"formType",
									"formUrl",
									"procDefKey",
									"taskDefKey",
									"procInsId",
									"procDefId",
									"taskId",
									"status",
									"title",
									"businessId"
								),
							},
						});
					});
			}
		},
		resetSearch() {
			this.$refs.searchForm.resetFields();
			this.refreshList();
		},
		toPendingList () {
			this.$router.push('/flowable/extension/FlowCopyList')
		},
	},
};
</script>
<style scoped>
.box-card {
	height: 100%;
}
</style>
