<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 class="footer">
			<button v-if="extraBtnText" class="btn extra" @click="onExtra">{{ extraBtnText }}</button>
			<button class="btn reject" @click="onReject">驳回</button>
			<button class="btn pass" type="primary" @click="onPass">通过</button>
		</view>

		<uni-popup ref="approvePopup" type="center" :mask-click="false">
			<view class="action-modal">
				<view class="action-modal_header">{{ approveType === 'PASS' ? '通过' : '驳回' }}</view>
				<view class="action-modal_body">
					<text class="tip">{{ approveType === 'PASS' ? '您将通过该信息的审核' : '您将驳回该信息的审核' }}</text>
					<uni-easyinput v-model="message" :placeholder="approveType === 'PASS' ? '请输入通过原因' : '请输入驳回原因'" />
				</view>
				<view class="action-modal_footer">
					<button class="btn cancel" @click="cancelApprove">取消</button>
					<button class="btn confirm" type="primary" @click="confirmApprove">{{ approveType === 'PASS' ? '通过'
						: '驳回' }}</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="customerInfoPopup" type="bottom" :mask-click="false">
			<view class="dialog">
				<view class="dialog_header">
					<text>上传客户信息</text>
					<view class="dialog_close" @click="closeCustomerInfo">×</view>
				</view>
				<view class="dialog_body">
					<view class="dialog_row">
						<text class="dialog_label">上传工商信息</text>
						<FileUpload v-model="businessFile" />
					</view>
					<view class="dialog_row">
						<text class="dialog_label">上传股东信息</text>
						<FileUpload v-model="shareholderFile" />
					</view>
				</view>
				<view class="dialog_footer">
					<button class="btn confirm" type="primary" @click="onCustomerInfoSave">保存</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="companyReviewPopup" type="bottom" :mask-click="false">
			<view class="dialog">
				<view class="dialog_header">
					<text>公司评审</text>
					<view class="dialog_close" @click="closeCompanyReview">×</view>
				</view>
				<view class="dialog_body">
					<uni-list>
						<uni-list-item>
							<template v-slot:body>
								<view class="item-title"><text class="required">*</text><text>结算期限</text></view>
							</template>
							<template v-slot:footer>
								<uni-easyinput v-model="companyReview.companySettlementPeriod" placeholder="请输入结算期限"
									:inputBorder="false" />
							</template>
						</uni-list-item>
						<uni-list-item title="加工操作方案">
							<template v-slot:footer>
								<uni-easyinput v-model="companyReview.companyMaterialSupplyPlan" placeholder="请输入加工操作方案"
									:inputBorder="false" />
							</template>
						</uni-list-item>
						<uni-list-item class="select-item" clickable
							:rightText="companyReview.companySuggestedCategoryName || '请选择'" showArrow
							@click="openSheet('companySuggestedCategory')">
							<template v-slot:body>
								<view class="item-title"><text>客户分类</text></view>
							</template>
						</uni-list-item>
						<uni-list-item>
							<template v-slot:body>
								<view class="item-title"><text class="required">*</text><text>授信额度</text></view>
							</template>
							<template v-slot:footer>
								<view class="amount-row">
									<uni-easyinput type="number" v-model="companyReview.companyCreditLimit"
										placeholder="0.00" :inputBorder="false" />
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
				<view class="dialog_footer">
					<button class="btn confirm" type="primary" @click="onCompanyReviewSave">保存</button>
				</view>
			</view>
		</uni-popup>

		<SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options"
			v-model="sheet.value" @confirm="onSheetConfirm" />
	</view>
</template>
<script>
import FlowTimeline from '@/components/flow-timeline/index.vue'
import SingleSelectSheet from '@/components/single-select/index.vue'
import FileUpload from '@/components/file-upload/index.vue'
import { getSysFlowComponentPath } from '@/utils/flow-components.js'
import { getFlowLinkByInstanceIdApi, getInstanceByBusinessIdApi, approvePassApi, approveRefuseApi } from '@/api/flow.js'
import { getDicByCodeApi } from '@/api/base.js'
export default {
	components: {
		FlowTimeline,
		SingleSelectSheet,
		FileUpload
	},
	data() {
		return {
			tab: 'base',
			auditCtx: {
				taskId: '',
				instanceId: '',
				businessId: '',
				bizFlag: ''
			},
			isEnd: false, // 流程是否结束
			nodeList: [],
			approveType: 'PASS',
			message: '',
			customerInfoVisible: false,
			companyReviewVisible: false,
			businessFile: { id: '', name: '' },
			shareholderFile: { id: '', name: '' },
			customerInfo: { businessFileName: '', businessFileId: '', shareholderFileName: '', shareholderFileId: '' },
			companyReview: { companySettlementPeriod: '', companyMaterialSupplyPlan: '', companySuggestedCategory: '', companySuggestedCategoryName: '', companyCreditLimit: '' },
			categoryOptions: [],
			sheet: { visible: false, title: '请选择', options: [], value: '', field: '' }
		}
	},
	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 || ''
		},
		roleCodes() {
			const g = this.$store && this.$store.getters
			return (g && g.roleCodes) || []
		},
		extraBtnText() {
			let text = ''
			if (String(this.auditCtx.bizFlag || '') === 'CUSTOMER_CREDIT_EDIT') {
				const codes = Array.isArray(this.roleCodes) ? this.roleCodes : []
				if (codes.includes('yzkzg')) {
					text = '公司评审'
				} else if (codes.includes('yzkday')) {
					text = '客户信息'
				}
			}
			return text
		}
	},
	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: 'AUDIT', // 原有的第二个参数
			};
			if (_contractType && _contractType !== 'PROCESS_STD_AGMT') {
				params.mode = _contractType;
			}
			getInstanceByBusinessIdApi(params).then(res => {
				console.log('审核详情__getInstanceByBusinessIdApi', res)
				// todo 审批 在bizFlag值后面拼 _EDIT，这个配置一个新的审核组件
				// 1.在映射的地方，如果审核和审批详情一样 就映射成同一个组件
				// 2.在映射的地方，如果审核和审批详情不一样 就映射成两一个组件
				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 + '_EDIT' || ''
				}
				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)
		}
		this.loadCategoryOptions()
	},
	onUnload() {
		try {
			uni.removeStorageSync('FLOW_AUDIT_CACHE'); // 流程中心、我发起的 跳转过来的数据存储key
			uni.removeStorageSync('sourceBusinessId'); // 业务列表 跳转过来的数据存储key
			uni.removeStorageSync('contractType'); // 流程模块 （合同那边 一个业务id 可以绑定多个流程实例）
		} catch (e) { }
	},
	methods: {
		async loadCategoryOptions() {
			try {
				const res = await getDicByCodeApi('CUSTOMER_CATEGORY')
				const list = res.data || []
				this.categoryOptions = (list || []).map(it => ({ label: it.name || '', value: it.code || '' }))
			} catch (e) {
				this.categoryOptions = []
			}
		},
		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(() => { })
		},
		getPayload() {
			const ref = this.$refs.basicRef
			const vals = ref && typeof ref.getFormValues === 'function' ? ref.getFormValues() : {}
			return {
				...vals,
			}
		},
		//  驳回
		onReject() {
			this.approveType = 'REFUSE'
			this.message = ''
			this.$refs.approvePopup.open()
		},
		//  通过
		//  在这里增加业务判断  比如 资信管理，判断有没有填写客户信息、公司评审（这些是不同角色进行操作的）
		onPass() {
			console.log('审核__roles&&bizFlag', this.roleCodes, this.auditCtx.bizFlag);
			// 客户资信的审核
			if (this.auditCtx.bizFlag === 'CUSTOMER_CREDIT_EDIT') {
				//  运作科档案员审核（yzkday） --显示客户信息按钮，可上传工商信息、股东信息的图片
				if (this.roleCodes.includes('yzkday') && !this.hsCustomerInfo()) {
					uni.showToast({
						title: '请填写客户信息',
						icon: 'none'
					})
					return
				}
				//  运作科主管审核（yzkzg） --显示公司评审按钮，可对加工操作方案、授信额度、结算期限、客户等级进行修改
				if (this.roleCodes.includes('yzkzg') && !this.hsCompanyReview()) {
					uni.showToast({
						title: '请填写公司评审信息',
						icon: 'none'
					})
					return
				}
			}
			this.approveType = 'PASS'
			this.message = ''
			this.$refs.approvePopup.open()
		},
		// 是否填写-客户信息
		hsCustomerInfo() {
			if (this.customerInfo.businessFileId || this.customerInfo.shareholderFileId) {
				return true
			}
			return false
		},
		// 是否填写-公司评审信息
		hsCompanyReview() {
			if (this.companyReview.companySettlementPeriod || this.companyReview.companyMaterialSupplyPlan || this.companyReview.companySuggestedCategory || this.companyReview.companySuggestedCategoryName || this.companyReview.companyCreditLimit) {
				return true
			}
			return false
		},
		// 更多按钮操作
		onExtra() {
			if (this.extraBtnText === '客户信息') {
				this.$refs.customerInfoPopup && this.$refs.customerInfoPopup.open()
			} else if (this.extraBtnText === '公司评审') {
				this.$refs.companyReviewPopup && this.$refs.companyReviewPopup.open()
			}
		},
		// 上传客户信息 保存
		onCustomerInfoSave() {
			const b = this.businessFile || {}
			const s = this.shareholderFile || {}
			this.customerInfo.businessFileId = b.id || ''
			this.customerInfo.businessFileName = b.name || ''
			this.customerInfo.shareholderFileId = s.id || ''
			this.customerInfo.shareholderFileName = s.name || ''
			this.$refs.customerInfoPopup && this.$refs.customerInfoPopup.close()
			console.log('审核__customerInfo', this.customerInfo)
			uni.showToast({ title: '已保存', icon: 'none' })
		},
		openSheet(field) {
			if (field === 'companySuggestedCategory') {
				const current = this.companyReview.companySuggestedCategory
				const match = (this.categoryOptions || []).find(o => String(o.value) === String(current) || String(o.label) === String(current))
				this.sheet = { ...this.sheet, visible: true, title: '建议客户分类', options: this.categoryOptions, value: match ? match.value : '', field }
			}
		},
		closeCustomerInfo() {
			this.$refs.customerInfoPopup && this.$refs.customerInfoPopup.close()
		},
		closeCompanyReview() {
			this.$refs.companyReviewPopup && this.$refs.companyReviewPopup.close()
		},
		onSheetConfirm({ value, label }) {
			const field = this.sheet.field
			if (!field) return
			if (field === 'companySuggestedCategory') {
				this.companyReview.companySuggestedCategory = value || ''
				this.companyReview.companySuggestedCategoryName = label || ''
			}
			this.sheet.visible = false
		},
		// 公司评审 保存
		onCompanyReviewSave() {
			if (!this.companyReview.companySettlementPeriod) {
				uni.showToast({ title: '请输入结算期限', icon: 'none' })
				return
			}
			if (!this.companyReview.companyCreditLimit) {
				uni.showToast({ title: '请输入授信额度', icon: 'none' })
				return
			}
			this.$refs.companyReviewPopup && this.$refs.companyReviewPopup.close();
			console.log('审核__companyReview', this.companyReview)
			uni.showToast({ title: '已保存', icon: 'none' })
		},
		cancelApprove() {
			this.$refs.approvePopup.close()
		},
		confirmApprove() {
			let _data = this.getPayload() || {};
			// 客户资信的审核
			if (this.auditCtx.bizFlag === 'CUSTOMER_CREDIT_EDIT') {
				//  运作科档案员审核（yzkday） --客户信息数据
				if (this.roleCodes.includes('yzkday')) {
					_data = {
						..._data,
						...this.customerInfo
					}
				}
				//  运作科主管审核（yzkzg） --公司评审数据
				if (this.roleCodes.includes('yzkzg')) {
					_data = {
						..._data,
						...this.companyReview
					}
				}
			}
			const payload = {
				variables: _data,
				message: this.message,
				taskId: this.auditCtx.taskId
			}
			console.log('审核__confirmApprove', payload)
			if (this.approveType === 'PASS') {
				approvePassApi(payload).then(res => {
					console.log('审核__approvePass', res)
					if (res.code === 200) {
						uni.showToast({
							title: '已通过',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({ url: '/pages/flow/approval' })
						}, 300)
					}
				}).catch(() => { })
			} else {
				approveRefuseApi(payload).then(res => {
					console.log('审核__approveRefuse', res)
					if (res.code === 200) {
						uni.showToast({
							title: '已驳回',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({ url: '/pages/flow/approval' })
						}, 300)
					}
				}).catch(() => { })
			}
			console.log('审核__confirmApprove', payload)
			this.$refs.approvePopup.close()
			uni.showToast({
				title: this.approveType === 'PASS' ? '已通过' : '已驳回',
				icon: 'none'
			})
		}
	}
}
</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: 104rpx;
	padding-bottom: 150rpx;
}

.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32rpx;
	padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
	display: flex;
	gap: 32rpx;
	z-index: 10;

	.btn {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		flex: 1;
	}

	.reject {
		background: #fff;
		color: #D54941;
		border: 1rpx solid #D54941;
	}

	.pass {
		background: $theme-primary;
		color: #fff;
	}

	.extra {
		background: #fff;
		color: $theme-primary;
		border: none;

		&::after {
			border: none;
		}
	}
}

.action-modal {
	width: 560rpx;
	padding: 32rpx 28rpx 20rpx;
	background: #fff;
	border-radius: 20rpx;

	&_header {
		text-align: center;
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 12rpx;
		color: rgba(0, 0, 0, 0.9);
	}

	&_body {
		padding: 12rpx 4rpx 24rpx;

		.tip {
			display: block;
			text-align: center;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.6);
			margin-bottom: 32rpx;
		}

		::v-deep .uni-easyinput {
			width: 100%;
		}
	}

	&_footer {
		display: flex;
		justify-content: space-between;
		gap: 16rpx;

		.btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-size: 32rpx;

			&::after {
				border: none;
			}
		}

		.cancel {
			background: #fff;
			color: rgba(0, 0, 0, 0.9);
		}

		.confirm {
			background: #fff !important;
			color: $theme-primary !important;
		}
	}
}

.dialog {
	width: 100%;
	max-height: 70vh;
	overflow-y: auto;
	padding: 32rpx 28rpx calc(20rpx + env(safe-area-inset-bottom));
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;

	&_header {
		position: relative;
		text-align: center;
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 12rpx;
		color: rgba(0, 0, 0, 0.9);
	}

	&_body {
		padding: 12rpx 4rpx 24rpx;
	}

	&_footer {
		padding-top: 12rpx;
		display: flex;
		justify-content: center;

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 12rpx;
			font-size: 32rpx;
			background: $theme-primary;
			color: #fff;

			&::after {
				border: none;
			}
		}
	}
}

.dialog_close {
	position: absolute;
	right: 16rpx;
	top: -14rpx;
	width: 64rpx;
	height: 64rpx;
	line-height: 64rpx;
	text-align: center;
	font-size: 36rpx;
	color: rgba(0, 0, 0, 0.6);
}

.dialog_row {
	margin-bottom: 24rpx;
}

.dialog_label {
	display: block;
	margin-bottom: 12rpx;
	font-size: 28rpx;
	color: rgba(0, 0, 0, 0.9);
}

.upload-show {
	margin-top: 8rpx;
	font-size: 26rpx;
	color: rgba(0, 0, 0, 0.6);
}

.select-item .item-title {
	font-size: 28rpx;
	color: rgba(0, 0, 0, 0.9);
}

.amount-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.amount-row .unit {
    color: rgba(0, 0, 0, 0.6);
}

::v-deep .uni-list {
  background: transparent;

  &-item {
    &__extra-text { font-size: 32rpx; }
    &__content-title { font-size: 32rpx; color: rgba(0,0,0,0.9); }

    &__container {
      padding: 32rpx;
      align-items: center;

      .uni-easyinput {
        .is-disabled { background-color: transparent !important; }
        &__placeholder-class { font-size: 32rpx; color: rgba(0,0,0,0.4); }
        &__content {
          border: none;
          &-input { padding-left: 0 !important; height: 48rpx; line-height: 48rpx; font-size: 32rpx; }
          .content-clear-icon { font-size: 44rpx !important; }
        }
      }

      .amount-row {
        flex: 1;
        display: flex;
        align-items: center;
        .uni-easyinput { flex: 1; }
        .unit { margin-left: 16rpx; color: rgba(0,0,0,0.9); }
      }

      .item-title,
      .uni-list-item__content {
        flex: none;
        min-height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        position: relative;
        width: 210rpx;
        margin-right: 32rpx;
        color: rgba(0,0,0,0.9);
        padding-right: 0;

        .required {
          color: red;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -16rpx;
        }
      }
    }

    &.select-item {
      &.is-empty { .uni-list-item__extra-text { color: rgba(0,0,0,0.4) !important; } }
      &.is-filled { .uni-list-item__extra-text { color: rgba(0,0,0,0.9) !important; } }
    }

    &.mgb10 { margin-bottom: 20rpx; }
  }
}
</style>