<template>
	<view>
		<form-item
			v-for="(item,index) in listForm" 
			:key="index" 
			:objInfo="item" 
			:isEdit="false"
		></form-item>
		<!-- 附件 -->
		<!-- <view class="basic_main">
			<view>附件</view>
		</view>
		<view class="imgbox">
			<image v-for="(item,index) in detail.file_ids" :key="index" :src="item" class="imgself" @click="toPriveImg(detail.file_ids,index)" mode=""></image>
		</view> -->
		<!-- 审批流程 -->
		<approval-status :process="payment_approval"></approval-status>
		<view class="btnbox" v-if="payment_approval.is_check == 1">
			<view class="btn" style="background:#ff7800" @click="$noMultipleClicks(toRefuse)">审核拒绝</view>
			<view class="btn" @click="$noMultipleClicks(toPass)">审核通过</view>
		</view>
		<view class="botsec"></view>
	</view>
</template>

<script>
	import formItem from '@/components/form/formitem.vue'
	import { netWorkExamineForm, netWorkExamineDetail, netApprovalDetail } from '@/api/index'
	import { BASE_IMG_URL } from '@/util/api.js'
	import approvalStatus from '@/components/approvalStatus.vue'
	
	export default{
		components:{
			formItem,
			approvalStatus
		},
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				noClick:true,    //防止  重复点击
				id:'',
				formid:'',
				detail:{},
				info:{},
				listForm:[],
				payment_approval:{}
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetail()
			this.getApprovalList()
		},
		methods:{
			getApprovalList() {
				let params = {
					type: 'approval',
					relation_id: this.id
				}
				netApprovalDetail(params).then(res=>{
					this.payment_approval = res.data
				})
			},
			getDetail() {
				netWorkExamineDetail({id:this.id}).then(res=>{
					this.detail = res.data
					this.info = res.data.content
					uni.setNavigationBarTitle({
						title: res.data.formapproval.name
					})
					this.getForm()
				})
			},
			getForm() {
				netWorkExamineForm({id:this.detail.formapproval.id}).then(res=>{
					console.log(res)
					res = res.data.data
					res.forEach(ele=>{
						ele.value = this.info[ele.id]
					})
					this.listForm = res
				})
			},
			//审核通过
			toPass(type) {
				uni.navigateTo({
					url:'/pages/examine/examine?status=1&id='+this.id+'&type=approval'
				})
			},
			//审核拒绝
			toRefuse() {
				uni.navigateTo({
					url:'/pages/examine/examine?status=2&id='+this.id+'&type=approval'
				})
			},
			//预览图片
			toPriveImg(arr,index) {
				uni.previewImage({
					urls:arr,
					current: index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgbox{
		padding:24rpx;
		background:#fff;
		display: flex;
		justify-content: flex-start;
		.imgself{
			width:100rpx;
			height:100rpx;
			margin-right:24rpx;
		}
	}
	.btnbox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top:50rpx;
		.btn{
			width:220rpx;
			height:80rpx;
			border-radius: 40rpx;
			font-size:24rpx;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
			background:#007AFF;
		}
	}
	.basic_main {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #EAEAEA;
		:first-child {
			color: #999;
		}
	}
	.operation_record {
		background:#fff;
		padding: 40rpx 30rpx;
		.record_item {
			display: flex;
			justify-content: space-between;
			padding-bottom:20rpx;
			border-bottom:1rpx solid #EAEAEA;
			margin-bottom:20rpx;
			&:last-child{
				border-bottom:none;
			}
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.record_info {
				flex: 1;
				margin-left: 25rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				.info_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom:10rpx;
				}
				.shenhetext{
					font-size:26rpx;
					color:#666;
					line-height: 34rpx;
				}
			}
			.record_line {
				position: absolute;
				top: -102rpx;
				left: -26rpx;
				height: 105rpx;
				border-left: 4rpx dotted #dedede;
			}
		}
	}
</style>
