<template>
	<view class="group_company">
		<view class="contractinfo">
			<view class="constatus">
				<view class="con_status" v-if="info && info.check_status == 0">
					待审核
				</view>
				<view class="con_status" v-if="info && info.check_status == 1">
					审核中
				</view>
				<view class="con_status" v-if="info && info.check_status == 2">
					审核通过
				</view>
				<view class="con_status" style="color:#ec7f51"  v-if="info && info.check_status == 3">
					审核未通过
				</view>
				<view class="con_status" style="color:#ec7f51" v-if="info && info.check_status == 4">
					已撤回
				</view>
			</view>
			<view class="nameli">
				<view class="name">{{info && info.number}}</view>
			</view>
			<view class="content">
				回款方式 ： {{info && info.return_type}}
			</view>
			<view class="content">
				回款时间 ： {{info && info.return_time}}
				<span>&yen;{{info && info.money}}</span>
			</view>
		</view>
		<view class="btnlist" v-if="payment_approval.is_check == 1">
			<view class="btn pass" @click="toPass">通过</view>
			<view class="btn refuse" @click="toRefuse">拒绝</view>
		</view>
		<!-- 标签栏 -->
		<view class="group_tab"> 
			<view class="info_detail">
				<view class="info_item">
					<view class="basic_head">
						<view>基本信息</view>
					</view>
					<view class="basic_main">
						<view>负责人</view>
						<view class="b_m_right">{{info && info.owner_staff.name}}</view>
					</view>
					<view class="basic_main">
						<view>审核状态</view>
						<view  class="b_m_right" v-if="info && info.check_status == 0">待审核</view>
						<view class="b_m_right" v-if="info && info.check_status == 1">审核中</view>
						<view class="b_m_right" v-if="info && info.check_status == 2">审核通过</view>
						<view class="b_m_right" v-if="info && info.check_status == 3">审核未通过</view>
					</view>
					<view class="basic_main">
						<view>合同编号</view>
						<view class="b_m_right">{{info && info.contract.num}}</view>
					</view>
					<view class="basic_main">
						<view>合同名称</view>
						<view class="b_m_right">{{info && info.contract.name}}</view>
					</view>
					<view class="basic_main">
						<view>客户名称</view>
						<view class="b_m_right">{{info && info.customer.name}}</view>
					</view>
					<form-item v-for="(item,index) in otherForm" :key="index" :objInfo="item" :isEdit="false"></form-item>
					<view class="basic_main">
						<view>创建人</view>
						<view class="b_m_right">{{info && info.create_staff.name}}</view>
					</view>
					<view class="basic_main">
						<view>创建时间</view>
						<view class="b_m_right">{{info && info.createtime}}</view>
					</view>
					<view class="basic_main">
						<view>更新时间</view>
						<view class="b_m_right">{{info && info.updatetime}}</view>
					</view>
					<!-- 审批流程 -->
					<approval-status :process="payment_approval"></approval-status>
				</view>
			</view>
		</view>
		<view style="height:130rpx"></view>
	</view>
</template>

<script>
	import { netPaymentDetail, netPaymentCancel } from '@/api/kehu.js'
	import { netSetForm, netApprovalDetail } from '@/api/index.js'
	import formItem from '@/components/form/formitem.vue'
	import { BASE_IMG_URL } from '@/util/api.js'
	import approvalStatus from '@/components/approvalStatus.vue'
	export default {
		data() {
			return {
				noClick:true,    //防止  重复点击
				id:'',   //回款 id
				info:null,
				payment_approval:{},   //审批流程
				otherForm:[],
				BASE_IMG_URL:BASE_IMG_URL,
			}
		},
		components:{
			formItem,
			approvalStatus
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.otherForm = []
			this.getInfo()
			//获取  审批 流程
			this.getApprovalList()
		},
		methods: {
			getForm() {
				netSetForm({type:'examine'}).then(res=>{
					res = res.data.data
					res.forEach(ele=>{
						ele.value = this.info[ele.id]?this.info[ele.id]:''
						this.otherForm.push(ele)
					})
				})
			},
			getInfo() {
				netPaymentDetail({id:this.id}).then(res=>{
					this.info = res.data
					this.getForm()
				})
			},
			getApprovalList() {
				let params = {
					type: 'receivables',
					relation_id: this.id
				}
				netApprovalDetail(params).then(res=>{
					this.payment_approval = res.data
				})
			},
			//通过
			toPass() {
				uni.navigateTo({    //status   1成功   2失败
					url:'/pages/examine/examine?id='+this.id+'&type=receivables&status=1'
				})
			},
			//拒绝
			toRefuse() {
				uni.navigateTo({    //status   1成功   2失败
					url:'/pages/examine/examine?id='+this.id+'&type=receivables&status=2'
				})
			},
			//撤回 审批
			cancelExamine() {
				netPaymentCancel({id:this.id}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						this.getInfo()
					},2000)
				})
			},
			//编辑 回款
			editPayment() {
				uni.navigateTo({
					url:'/pagesB/contract/editPayment?id='+this.id+'&contractid='+this.info.contract.id
				})
			},
			//客户详情
			toKehuInfo() {
				uni.navigateTo({
					url:'/pages/index/groupCompany/groupCompany?id='+this.info.customer.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.contractinfo{
		background:#fff;
		padding:20rpx 0;
		position: relative;
		.constatus{
			position:absolute;
			right:24rpx;
			top:24rpx;
			background:$uni-text-color-opcity ;
			padding: 5rpx 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:$uni-text-color;
			border-radius: 10rpx;
			.clockimg{
				width:32rpx;
				height:32rpx;
				margin-right:10rpx;
			}
		}
		.nameli{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom:24rpx;
			.zhangimg{
				width:40rpx;
				height:40rpx;
				margin-right:15rpx;
			}
			.name{
				font-size:32rpx;
				color:#333333;
				margin-left: 32rpx;
			}
		}
		.content{
			font-size:26rpx;
			color:#999;
			margin:15rpx 0;
			margin-left: 32rpx;
			margin-right: 30rpx;
			span{
				float: right;
				font-size: 34rpx;
				color: $uni-text-color;
				font-weight: 600;
			}
		}
	}
	.tabinfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx;
		background:#fff;
		border-top:1rpx solid #C0C0C0;
		.tableft{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.headerimg{
				width:45rpx;
				height:45rpx;
				border-radius: 50%;
			}
			.name{
				font-size:34rpx;
				color:#333;
				margin-left:30rpx;
			}
		}
		.rightimg{
			width:32rpx;
			height:32rpx;
		}
	}
	.btnlist{
		padding:20rpx 24rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top:1rpx solid #DDDDDD;
		background:#fff;
		.btn{
			width:300rpx;
			height:60rpx;
			border-radius: 8rpx;
			font-size:24rpx;
			color:#fff;
			text-align: center;
			line-height: 60rpx;
		}
		.pass{
			background:$uni-text-color;
		}
		.refuse{
			background:#F43F3B;
		}
	}
	.info_detail {
		margin-bottom: 100rpx;
		.basic_head {
			display: flex;
			padding:26rpx 30rpx;
			font-size: 30rpx;
			color: #333;
		}
		.basic_main {
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			background-color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #EAEAEA;
			font-size: 32rpx;
			color: #999;
			.b_m_right{
				color:#333;
				font-size: 30rpx;
			}
		}
	}
	
	.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;
					font-size: 30rpx;
					color: #999;
				}
				.shenhetext{
					font-size:26rpx;
					color:#666;
					line-height: 34rpx;
				}
			}
			.record_line {
				position: absolute;
				top: -102rpx;
				left: -26rpx;
				height: 105rpx;
				border-left: 4rpx dotted #dedede;
			}
		}
	}
	.bntbox{
		width:750rpx;
		height:120rpx;
		background:#fff;
		position: fixed;
		left:0;
		bottom:0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top:1rpx solid #CCCCCC;
		.botbtn{
			width:680rpx;
			height:80rpx;
			border-radius: 40rpx;
			font-size: 26rpx;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
			background:$uni-text-color;
		}
	}
</style>
