<template>
	<view class="info_detail">
		<view class="info_item">
			<view class="basic_main">
				<view>门店名称</view>
				<view>{{info.customer ? info.customer.name : ''}}</view>
			</view>
		<!-- 	<view class="basic_main">
				<view>关联商机</view>
				<view>{{info.business ? info.business.name :''}}</view>
			</view> -->
			<view class="basic_main">
				<view>门店签约人</view>
				<view>{{info.contacts ? info.contacts.name : ''}}</view>
			</view>
			<view class="basic_main">
				<view>公司签约人</view>
				<view>{{info.order_staff ? info.order_staff.name : ''}}</view>
			</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>
			</view>
			<view class="pro_warp" v-if="info.product && info.product.length != 0">
				<view class="li_warp" v-for="(item,index) in info.product" :key="index">
					<image class="pro_img" :src="item.img" mode=""></image>
					<view class="cell_con">
						<view class="cell_con_top">
							<view class="contitle">{{item.name}}</view>
						</view>
						<view class="context">编号：{{item.num}}</view>
						<view class="info_l">
							<view class="context">单价：{{item.unit}}</view>
							<view class="context">数量：{{item.number}}</view>
						</view>
						<view class="context">零售价：￥{{item.price}}</view>
						<view class="context">批发价：￥{{item.wholesale}}</view>
						<view class="context" v-if="item.remark">备注：{{item.remark}}</view>
					</view>
				</view>
			</view>
			<view class="basic_main" v-if="info.ratios && info.ratios.length != 0">
				<view>业绩分配比例</view>
				<view></view>
			</view>
			<view class="ach_list" v-if="info.ratios && info.ratios.length != 0">
				<view class="ach_li" v-for="(item,index) in info.ratios" :key="index">
					<view class="ach_rate">
						业绩占比<span>({{item.ratio}}%)</span>
					</view>
					<view class="ach_staff">
						<image :src="item.staff.img?item.staff.img:BASE_IMG_URL+'/headImg.png'" style="border-radius: 50%;" class="uploadimg"></image>
						<view class="ach_t">{{item.staff.name}}</view>
					</view>
					<view class="ach_money">可分业绩<span>({{item.money}}元)</span></view>
				</view>
			</view>
		</view>
		<!-- 审批流程 -->
		<approval-status :process="payment_approval"></approval-status>
	</view>
</template>

<script>
	import { netPaymentApproval } from '@/api/kehu.js'
	import { netSetForm,  } 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 {
		props:{
			info:{
				type:Object,
				default:{}
			},
			payment_approval:{   //审批流程
				type:Object,
				default:{}
			}
		},
		components:{
			formItem,
			approvalStatus
		},
		data() {
			return {
				listForm:[],
				showSearch: false,
				BASE_IMG_URL :BASE_IMG_URL
			}
		},
		created() {
			//获取 form
			this.getForm()
		},
		methods: {
			getForm() {
				netSetForm({type:'contract'}).then(res=>{
					res = res.data.data
					res.forEach(ele=>{
						ele.value = this.info[ele.id]?this.info[ele.id]:''
					})
					this.listForm = res
				})
			},
		}
	}
</script>

<style lang="scss">
	// 业绩分配
	.ach_list{
		background:#fff;
		padding:30rpx;
		border-bottom:1rpx solid #f5f5f5;
		margin-bottom:24rpx;
		.ach_li{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-bottom:24rpx;
			margin-bottom:24rpx;
			border-bottom:1rpx solid #f5f5f5;
			&:last-child{
				border-bottom:0;
				margin-bottom:0;
			}
			.ach_rate{
				font-size:24rpx;
				color:#666;
				margin-right:30rpx;
				span{
					color:$uni-text-color;
				}
			}
			.ach_staff{
				display: flex;
				flex-direction: column;
				text-align: center;
				.uploadimg{
					width:80rpx;
					height:80rpx;
				}
				.staffinfo{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size:24rpx;
					color:#666;
					.staffimg{
						width:80rpx;
						height:80rpx;
						border-radius: 50%;
						margin-right:24rpx;
					}
				}
				.ach_t{
					font-size:24rpx;
					color:#666;
					margin-top:10rpx;
				}
			}
			.ach_money{
				margin-left:30rpx;
				font-size:26rpx;
				span{
					color:$uni-text-color;
				}
			}
		}
	}
	.pro_warp{
		padding:30rpx 24rpx;
		background:#fff;
		margin-bottom:24rpx;
		.li_warp{
			padding-bottom:24rpx;
			margin-bottom:24rpx;
			border-bottom:1rpx solid #f5f5f5;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			.pro_status{
				font-size:26rpx;
				color:#007AFF;
				position: absolute;
				right:35rpx;
				top:10rpx;
			}
			.pro_img{
				width:160rpx;
				height:160rpx;
				flex-shrink: 0;
				margin-right:24rpx;
			}
			.cell_con{
				padding:0 40rpx 0 0;
				.cell_con_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.contitle{
						font-size:28rpx;
						color:#333;
					}
				}
				.context{
					font-size:26rpx;
					color:#999;
					margin-top:10rpx;
				}
				.info_l{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.context{
						font-size:26rpx;
						color:#999;
						margin-right:24rpx;
						&:last-child{
							margin-right:0;
						}
					}
				}
				.con_info{
					margin-top:15rpx;
					.contitle{
						font-size:26rpx;
						color:#333;
					}
					.config_li{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-top:24rpx;
						border-bottom:1rpx solid #f5f5f5;
						&:last-child{
							border-bottom:0;
						}
						.conimg{
							width:80rpx;
							height:80rpx;
							border-radius: 10rpx;
							margin-right:20rpx;
						}
						.config_name{
							width:100rpx;
							font-size:24rpx;
							color:#333;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						.config_step{
							margin-left:24rpx;
						}
					}
				}
				.conbot{
					margin-top:10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.conmoney{
						font-size:26rpx;
						color:#333;
					}
				}
			}
			.right_del_btn{
				width:90rpx;
				height:240rpx;
				background:#F00;
				color:#fff;
				text-align: center;
				line-height: 224rpx;
			}
		}
		.total_money{
			text-align: right;
			font-size:26rpx;
			span{
				font-size:26rpx;
				color:#F00;
			}
		}
	}
	.warpbox {
		width: 750rpx;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.7);
		.scrollbox{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			background: #fff;
			height:377rpx;
			border-radius:30rpx 30rpx 0 0 ;
			.img{
				position: absolute;
				top: 60rpx;
				right: 64rpx;
			}
			image{
				width: 25rpx;
				height: 25rpx;
			}
			.head{
				text-align: center;
				font-size: 35rpx;
				color: #999;
				margin-top: 65rpx;
			}
			.f_foot{
				margin-top: 100rpx;
				display: flex;
				justify-content: space-around;
				.f-box{
					border: 1px solid #999;
					color: #333;
					padding: 5rpx 15rpx;
					border-radius: 10rpx;
				}
			}
		}
		.screen_content {
			width: 702rpx;
			z-index: 2;
			border-top: 1rpx solid #CCCCCC;
			background-color: #fff;
			padding: 24rpx;
			}
		}
.info_detail {
	margin-bottom: 100rpx;
	.basic_head {
		display: flex;
		padding: 30rpx 24rpx 30rpx;
		:last-child {
			font-weight: 700;
			margin-left: 8rpx;
		}
	}
	.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;
		}
		>view{
			font-size: 32rpx;
		}
	}
}

	.foot{
		background: #fff;
		height: 200rpx;
		.f_left{
			margin: 26rpx 30rpx;
			width: 80rpx;
			height: 80rpx;
			float: left;
			border-radius: 50%;
			background: red;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.f_right{
			font-size: 30rpx;
			color: #999;
			float: left;
			width:570rpx ;
			margin-top: 40rpx;
			.f_r_top{
				p{margin-bottom: 10rpx;
					span{
						float: right;
					}
				}
			}
			.f_r_center{
				margin-bottom: 10rpx;
			}
			.f_r_foot{
				
			}
		}
	}
	.footer{
		height: 100rpx;
		margin-top: 20rpx;
		background: #fff;
		// text-align: center;
		line-height: 100rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-top: 25rpx;
			margin-right:25rpx;
			margin-left: 290rpx;
			float: left;
		}
	}
</style>
