<template>
	<view class="page">
		<view class="fixed">
			<view class="tabs" :class="[`${tab === 'base' ? 'bg1' : 'bg2'}`]">
				<view :class="['tab', { active: tab === 'base' }]" @click="tab = 'base'">基础信息</view>
				<view :class="['tab', { active: tab === 'flow' }]" @click="tab = 'flow'">流程</view>
			</view>
		</view>
		<view class="body">
			<view v-if="tab === 'base'">
				<component :is="componentName" :id="auditCtx.businessId" ref="basicRef" />
			</view>
			<view v-else>
				<FlowTimeline :nodeList="nodeList" :isEnd="isEnd" />
			</view>
		</view>
	</view>
</template>
<script>
import FlowTimeline from '@/components/flow-timeline/index.vue'
import { getSysFlowComponentPath } from '@/utils/flow-components.js'
import { getFlowLinkByInstanceIdApi, getInstanceByBusinessIdApi } from '@/api/flow.js'
export default {
	components: {
		FlowTimeline
	},
	data() {
		return {
			tab: 'base',
			auditCtx: {
				taskId: '',
				instanceId: '',
				businessId: '',
				bizFlag: ''
			},
			isEnd: false, // 流程是否结束
			nodeList: []
		}
	},
	computed: {
		componentName() {
			// sourceBusinessType 业务类型 todo 待处理--主要是合同那边使用
			const _contractType = uni.getStorageSync('contractType') || '';
			let Name = ''
			if (_contractType === 'PROCESS_STD_AGMT') {
				Name = 'PROCESS_STD_AGMT'
			}else{
				Name = this.auditCtx.bizFlag || ''
			}
			const name = getSysFlowComponentPath(Name || '')
			return name || ''
		}
	},
	onLoad() {
		const CACHE_KEY_2 = 'sourceBusinessId'; // 业务列表 跳转过来的数据存储key
		const _sourceBusinessId = uni.getStorageSync(CACHE_KEY_2) || '';
		// 流程模块 （合同那边 一个业务id 可以绑定多个流程实例）
		const _contractType = uni.getStorageSync('contractType') || '';
		console.log('审核详情__sourceBusinessId', _sourceBusinessId)
		if (_sourceBusinessId) {
			const params = {
				businessId: _sourceBusinessId,
				// 是审核时
				operateType: 'VIEW', // 原有的第二个参数
			};
			if (_contractType && _contractType !== 'PROCESS_STD_AGMT') {
				params.mode = _contractType;
			}
			getInstanceByBusinessIdApi(params).then(res => {
				console.log('审核详情__getInstanceByBusinessIdApi', res)
				const _data = res && res.data ? res.data : {};
				const _ext = JSON.parse(_data.ext || '{}');
				this.auditCtx = {
					taskId: _data.taskId || '',
					instanceId: _data.id || '',
					businessId: _data.businessId || '',
					bizFlag: _ext.bizFlag || ''
				}
				if (this.auditCtx && this.auditCtx.instanceId) {
					this.loadFlowLinkByInstanceId(this.auditCtx.instanceId)
				}
			}).catch(() => { })
		}
		const CACHE_KEY = 'FLOW_AUDIT_CACHE'; // 流程中心、我发起的 跳转过来的数据存储key
		const cache = uni.getStorageSync(CACHE_KEY) || {};
		console.log('审核详情__cache', cache)
		this.auditCtx = cache;
		if (this.auditCtx && this.auditCtx.instanceId) {
			this.loadFlowLinkByInstanceId(this.auditCtx.instanceId)
		}
	},
	onUnload() {
		try {
			uni.removeStorageSync('FLOW_AUDIT_CACHE'); // 流程中心、我发起的 跳转过来的数据存储key
			uni.removeStorageSync('sourceBusinessId'); // 业务列表 跳转过来的数据存储key
			uni.removeStorageSync('contractType'); // 流程模块 （合同那边 一个业务id 可以绑定多个流程实例）
		} catch (e) { }
	},
	methods: {
		loadFlowLinkByInstanceId(instanceId) {
			getFlowLinkByInstanceIdApi({ instanceId }).then(res => {
				console.log('审核__loadFlowLinkByInstanceId', res)
				const _data = res && res.data ? res.data : {};
				this.nodeList = _data.nodeList || [];
				this.isEnd = _data.end || false;
			}).catch(() => { })
		},
	}
}
</script>
<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh
}

.fixed {
	position: fixed;
	top: 96rpx;
	left: 0;
	right: 0;
	z-index: 2;

	.tabs {
		display: flex;
		align-items: center;
		height: 96rpx;

        &.bg1 {
            background-image: url('~@/static/images/flow/tab_1_icon.png');
            background-repeat: no-repeat;
            background-position: right center;
            background-size: cover;
        }

        &.bg2 {
            background-image: url('~@/static/images/flow/tab_2_icon.png');
            background-repeat: no-repeat;
            background-position: right center;
            background-size: cover;
        }

		.tab {
			width: 50%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);

			&.active {
				color: $theme-primary;
			}
		}
	}
}

.body {
	flex: 1;
	padding-top: 102rpx;
}
</style>