<template>
	<div class="jp-center">
		<h2 class="title">{{ title }}</h2>
		<img v-if="code === 1" class="process-status-img" src="../../../assets/img/flowable/1.png" />
		<img v-if="code === 2" class="process-status-img" src="../../../assets/img/flowable/2.png" />
		<img v-if="code === 3" class="process-status-img" src="../../../assets/img/flowable/3.png" />
		<img v-if="code === 4" class="process-status-img" src="../../../assets/img/flowable/4.png" />
		<img v-if="code === 5" class="process-status-img" src="../../../assets/img/flowable/5.png" />
		<img v-if="code === 6" class="process-status-img" src="../../../assets/img/flowable/6.png" />
		<el-tabs type="border-card" v-model="selectedTab" @tab-click="onTabChange">
			<el-tab-pane label="表单信息" name="form-first">
				<component :formReadOnly="formReadOnly" v-if="formType === '2'" :class="formReadOnly ? 'readonly' : ''"
					:status="'taskFormDetail'" ref="form" :businessId="businessId" :is="form"></component>
				<PreviewForm v-if="formType !== '2'" :processDefinitionId="procDefId" :edit="false"
					:taskFormData="taskFormData" ref="form" />
			</el-tab-pane>
			<el-tab-pane label="流程信息" v-if="procInsId" name="form-second">
				<flow-time-line :historicTaskList="historicTaskList" />
			</el-tab-pane>
			<el-tab-pane label="流程图" name="form-third">
				<el-card class="box-card" shadow="hover">
					<template #header>
						<div class="card-header">
							<span>流程图</span>
						</div>
					</template>
					<flow-chart ref="chart1" v-if="procInsId" :processInstanceId="procInsId" />
					<flow-chart ref="chart2" v-if="!procInsId" :processDefId="procDefId" />
				</el-card>
			</el-tab-pane>
			<el-tab-pane label="流转记录" v-if="procInsId" name="form-forth">
				<flow-step :historicTaskList="historicTaskList" />
			</el-tab-pane>
			<el-tab-pane label="入库修改历史" v-if="wareHouseId" name="form-sixth">
				<vxe-table border="inner" size="mini" max-height="1000px" :data="dataListHi">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column min-width="120" align="center" title="修改类型" field="updateTradeType">
						<template #default="scope">
							<span v-if="commonJS.isNotEmpty(scope.row.updateTradeType)"> {{ scope.row.updateTradeType }}
							</span>
							<span v-else> -- </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="修改商品" field="updateTradeName">
						<template #default="scope">
							<span v-if="commonJS.isNotEmpty(scope.row.updateTradeName)"> {{ scope.row.updateTradeName }}
							</span>
							<span v-else> -- </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="修改人" field="updateUser">
						<template #default="scope">
							<span v-if="scope.row.endflag === '2'">(创建人) {{ scope.row.updateUser }} </span>
							<span v-else>{{ scope.row.updateUser }} </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="修改时间" field="createTime"></vxe-column>
					<vxe-column title="操作" width="150px" fixed="right" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small" @click="hiDetail(scope.row)">修改详情</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="领用退回历史" v-if="returnId" name="form-seventh">
				<vxe-table border="inner" size="mini" max-height="1000px" :data="dataListHiCollect">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column min-width="160" align="center" title="退回物品" field="returnGoods">
						<template #default="scope">
							<span v-if="commonJS.isNotEmpty(scope.row.returnGoods)"> {{ scope.row.returnGoods }} </span>
							<span v-else> -- </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="退回申请人" field="returnUserName">
						<template #default="scope">
							<span>{{ scope.row.returnUserName }} </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="退回时间" field="createTime"></vxe-column>
					<vxe-column title="操作" width="150px" fixed="right" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small"
								@click="hiDetailCollect(scope.row)">退回详情</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="领用退回历史" v-if="psiReturnId" name="form-psi-return">
				<vxe-table border="inner" size="mini" max-height="1000px" :data="dataListHiCollect">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column min-width="160" align="center" title="退回物品" field="returnGoods">
						<template #default="scope">
							<span v-if="commonJS.isNotEmpty(scope.row.returnGoods)"> {{ scope.row.returnGoods }} </span>
							<span v-else> -- </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="退回申请人" field="returnUserName">
						<template #default="scope">
							<span>{{ scope.row.returnUserName }} </span>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="退回时间" field="createTime"></vxe-column>
					<vxe-column title="操作" width="150px" fixed="right" align="center">
						<template #default="scope">
							<el-button text type="primary" size="small"
								@click="hiPsiDetailCollect(scope.row)">退回详情</el-button>
						</template>
					</vxe-column>
				</vxe-table>
			</el-tab-pane>
			<el-tab-pane label="修改签字注师历史" v-if="sigId" name="form-eighth">
				<vxe-table ref="sigTable" border="inner" :key="111" size="small" class="vxe-table-element"
					max-height="1000px" :data="sigHiCollect">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column min-width="160" align="center" title="签字注师1" field="signatureAnnotator1"></vxe-column>
					<vxe-column min-width="160" align="center" title="签字注师2" field="signatureAnnotator2"></vxe-column>
					<vxe-column min-width="160" align="center" title="修改人" field="userName"></vxe-column>
					<vxe-column min-width="160" align="center" title="修改原因" field="reason"></vxe-column>
					<vxe-column min-width="160" align="center" title="创建时间" field="createTime"></vxe-column>
				</vxe-table>
			</el-tab-pane>
		</el-tabs>
		<WareHouseHi ref="wareHouseHi"></WareHouseHi>
		<CollectReturnHi ref="collectReturnHi"></CollectReturnHi>
		<PsiCollectReturnHi ref="psiCollectReturnHi"></PsiCollectReturnHi>
	</div>
</template>

<script>
// import FlowChart from '../modeler/FlowChart'
import UserSelect from "@/components/userSelect/index.vue";
import PreviewForm from "@/views/flowable/form/GenerateFlowableForm.vue";
import FlowStep from "@/views/flowable/components/FlowStep.vue";
import FlowTimeLine from "@/views/flowable/components/FlowTimeLine.vue";
import taskService from "@/api/flowable/taskService.js";
import formService from "@/api/flowable/formService.js";
import processService from "@/api/flowable/processService.js";
import { shallowRef } from 'vue'
import WareHouseHi from '@/views/materialManagement/wareHouse/WareHouseHi'
import CollectReturnHi from '@/views/materialManagement/collect/CollectReturnHiForm'
import PsiCollectReturnHi from '@/views/psiManagement/collect/CollectReturnHiForm'
import CollectService from '@/api/materialManagement/CollectService'
import PsiCollectService from '@/api/psi/CollectService'
import WareHouseService from '@/api/materialManagement/WareHouseService'
import projectReportService from '@/api/cw/reportManagement/ProjectReportService'
export default {
	collectService: null,
	psiCollectService: null,
	wareHouseService: null,
	beforeCreate() {
		this.collectService = new CollectService()
		this.psiCollectService = new PsiCollectService()
		this.wareHouseService = new WareHouseService()
	},
	activated() {
		this.init();
		// 读取流程表单
		if (this.formType === "2") {
			if (this.formUrl === "/404") {
				this.form = null;
				this.$message.info("没有关联流程表单!");
			} else {
				const modules = import.meta.globEager("@/views/**/*.vue");
				Object.keys(modules).forEach((path) => {
					const dir = path.split("views")[1].split(".vue")[0];
					if (dir === this.formUrl) {
						// this.form = modules[path].default;
						this.form = shallowRef(modules[path].default);
					}
				});
			}
		} else {
			// 读取流程表单
			if (this.formUrl === "/404") {
				this.$refs.form.createForm("");
			} else {
				this.$refs.form.createForm(this.formUrl);
			}
			formService
				.getHistoryTaskFormData({
					processInstanceId: this.procInsId,
					procDefId: this.procDefId,
					taskDefKey: this.taskDefKey,
				})
				.then((data) => {
					this.taskFormData = data;
				});
		}

		// 读取流程状态
		processService
			.queryProcessStatus(this.procDefId, this.procInsId)
			.then((data) => {
				this.code = data;
			});
		taskService.historicTaskList(this.procInsId).then((data) => {
			this.historicTaskList = data;
		});
	},
	components: {
		UserSelect,
		PreviewForm,
		FlowStep,
		FlowTimeLine,
		WareHouseHi,
		CollectReturnHi,
		PsiCollectReturnHi
		// FlowChart
	},
	watch: {
		selectedTab(val) {
			if (val === "form-third") {
				if (this.procInsId) {
					this.$refs.chart1.init();
				} else {
					this.$refs.chart2.init();
				}
			}
		},
	},
	methods: {
		init() {
			this.selectedTab = "form-first";
			this.procDefId = this.$route.query.procDefId;
			this.procDefKey = this.$route.query.procDefKey;
			this.formType = this.$route.query.formType;
			this.formUrl = this.$route.query.formUrl;
			this.taskId = this.$route.query.taskId;
			this.taskDefKey = this.$route.query.taskDefKey;
			this.status = this.$route.query.status;
			this.title = this.$route.query.formTitle;
			this.businessId = this.$route.query.businessId;
			this.procInsId = this.$route.query.procInsId;
			this.returnId = this.$route.query.returnId
			this.psiReturnId = this.$route.query.psiReturnId
			this.wareHouseId = this.$route.query.wareHouseId
			this.sigId = this.$route.query.sigId
			this.formReadOnly = true;
			let _this = this
			setTimeout(function () {
				try {
					_this.$refs.form.getKeyWatch(Math.random().toString())
				} catch (e) {
					console.log(e)
				}
			}, 500)
		},
		onTabChange(event) {
			if (event.props.name === 'form-sixth') {
				if (this.commonJS.isNotEmpty(this.wareHouseId)) {
					this.wareHouseService.findHiById(this.wareHouseId).then((data) => {
						this.dataListHi = data
					})
				}
			}
			if (event.props.name === 'form-seventh') {
				console.log('建立了')
				if (this.commonJS.isNotEmpty(this.returnId)) {
					this.collectService.findByReturnId(this.returnId).then((data) => {
						this.collectService.findHiById(data.id).then((data) => {
							this.dataListHiCollect = data
						})
					})
				}
			}
			if (event.props.name === 'form-psi-return') {
				if (this.commonJS.isNotEmpty(this.psiReturnId)) {
					this.psiCollectService.findByReturnId(this.psiReturnId).then((data) => {
						this.psiCollectService.findHiById(data.id).then((data) => {
							this.dataListHiCollect = data
						})
					})
				}
			}
			if (event.props.name === 'form-eighth') {
				if (this.commonJS.isNotEmpty(this.sigId)) {
					projectReportService.findByReportId(this.sigId).then((data) => {
						console.log('data', data)
						this.sigHiCollect = data
					})
				}
			}
		},
		// 打开入库修改历史详情页
		hiDetail(row) {
			if (this.commonJS.isNotEmpty(row.id)) {
				this.$refs.wareHouseHi.init(row.id)
			}
		},
		// 打开领用退回历史详情页
		hiDetailCollect(row) {
			if (this.commonJS.isNotEmpty(row.id)) {
				this.$refs.collectReturnHi.init(row.id)
			}
		},
		// 打开进销存领用退回历史详情页
		hiPsiDetailCollect(row) {
			if (this.commonJS.isNotEmpty(row.id)) {
				this.$refs.psiCollectReturnHi.init(row.id)
			}
		}
	},
	data() {
		return {
			form: null,
			formType: "",
			formUrl: "",
			selectedTab: "frist",
			historicTaskList: [],
			procDefId: "",
			code: "1",
			procInsId: "",
			readOnly: false,
			procDefKey: "",
			taskId: "",
			taskFormData: [],
			taskDefKey: "",
			status: "",
			title: "",
			businessId: "",
			returnId: "",
			psiReturnId: '',
			wareHouseId: '',
			dataListHi: [],
			dataListHiCollect: [],
			sigId: '',
			sigHiCollect: [],
		};
	},
};
</script>
<style scoped>
.jp-center {
	height: calc(100% - 34px);
	position: relative;
	padding: 10px;
}

.title {
	padding: 15px;
	text-align: center;
}

.process-status-img {
	height: 180px;
	position: absolute;
	z-index: 999;
	top: 1px;
	right: 1px;
}
</style>
