<template>
	<div class="prosess-unit">
		
		<i class="ico" :class=" { 'ico-bh': item.APPROVED_TYPE==9000,'ico-tg':item.APPROVED_TYPE!=9000&&item.APPROVED_TYPE!=0,'ico-yj':item.APPROVED_TYPE==0}"></i>
		<div class="process-content">
			<div class='process-title'>
				<span>【{{getAdviceName}}】</span>
				<span class="process-adv">{{getTime}}<i class="ico ico-yd" v-if="item.APPROVED_MARK==2000"></i></span>
			</div>
			<div class="process-title" v-if="item.APPROVED_INFO.length<16">
				<p class="pl16">
					<span class="process-role">{{item.APPROVED_INFO!='' ? `${item.APPROVED_STAFF}：` : `${item.APPROVED_STAFF}`}}</span>
					<span v-if="item.APPROVED_INFO">{{item.APPROVED_INFO}}</span>
					
				</p>
				<span class="process-adv">{{item.SUMTIMES}}</span>
			</div>
			<block  v-else>
				
				<div class="process-title">
					<p class="pl16">
						<span class="process-role">{{item.APPROVED_INFO!='' ? `${item.APPROVED_STAFF}：` : `${item.APPROVED_STAFF}`}}</span>
					
					</p>
					<span class="process-adv">{{item.SUMTIMES}}</span>
				</div>
				<p class="pl16" >
					
					<span v-if="item.APPROVED_INFO">{{item.APPROVED_INFO}}</span>
					
				</p>
			</block>
		</div>
	
	</div>
</template>
<script>
	export default {
		props: {
			item:{
				required: true,
				type: Object
			},
			approveType:{ // 1 通过
				required: true,
				type: Number
			}
		},
		computed: {
			getAdviceName () {
				let _this = this
				if (_this.item) {
					let name = _this.item.APPROVED_NAME
					return _this.approveType===1 ? (name.indexOf('意见')>-1 ? name.replace('意见','') : name) : (name ||'驳回')
				}
			},
			
			getTime() {
				let _this = this
				return _this.$util.cutDate(_this.item.APPROVED_DATE,'YYYY-MM-DD hh:mm')
			}
			
		}
		
	}
</script>

<style scoped>
	.pl16 {
		padding-left: 16rpx;
	}
	.ico-yd {
		display: flex;
		align-items: center;
	}
	.ico-yd:before {
		background-image: url('/static/images/contract/htsp_mobile.png');
		margin-right: 0rpx;
		height: 24rpx;
		background-position: center right;
	}
	.prosess-unit {
		padding: 0 32rpx;
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		position: relative;
		padding-bottom: 36rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}
	.prosess-unit::before {
		content: '';
		height: 100%;
		position: absolute;
		display: block;
		left: 43rpx;
		top: 32rpx;
		background-color: #eee;
		width: 1rpx;
		z-index: 0;
	}
	
	.prosess-unit span, .prosess-unit p{
		font-size: 24rpx;
	}
	.process-content {
		width: 658rpx;
	}
	.process-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.process-adv{
		color: #8b8a8a;
		display: flex;
		align-items: center;
	}
	.process-role {
		color: #676767;
		font-size: 24rpx;
		min-width: 120rpx;
	}
	.process-yijian {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
	}
	.ico-bh:before {
		width: 25rpx;
		height: 25rpx;
		background-image: url('/static/images/wrong-ico.png');
		line-height: 1.8;
	}
	.ico-tg:before {
		width: 25rpx;
		height: 25rpx;
		line-height: 1.8;
		background-image: url('/static/images/right-ico.png') ;
	}
	.ico-yj:before {
		width: 25rpx;
		height: 25rpx;
		line-height: 1.8;
		background-image: url('/static/images/transfer-ico.png') ;
	}
	
</style>