<template>
		<div>
			<loading :visible="isLoading"></loading>
			
				
			<div class="mui-content-padded" v-if="examineDetail.examineList">
				<h5>审核记录</h5>
			</div>
			<div class="vongi-slot">
				<template v-for="item,i in examineDetail.examineList">

					<div class="vongi-slot-block">
						<!-- 单人展示单人 -->
						<!-- 多人展示单人 -->
						<!-- 多人展示多人 -->
						<div class="vongi-slot-img"
							v-if="item.source==1&&item.operation=='or'&&item.examinePersonDetailDTOList.length==1 ">
							<img v-for="item1,j in item.examinePersonDetailDTOList" :src="item1.faceImageUrl+'?x-oss-process=image/resize,h_800,m_lfit'">
						</div>
						<div class="vongi-slot-img" v-else-if="item.source!=1&&item.operation=='or'&&item.action!=0 &&item.examinePersonDetailDTOList.length==1">
							<img v-for="item1,j in item.examinePersonDetailDTOList" :src="item1.faceImageUrl+'?x-oss-process=image/resize,h_800,m_lfit'"
								v-if="item1.action!='0'">
						</div>
						<div class="vongi-slot-img" v-else>
							<img src="~$project/assets/img/team.png">
						</div>


						<div class="vongi-slot-content">
							<h4>{{item.desc}}<span class="mui-pull-right mui-h5 color999">{{item.finishTime}}</span>
							</h4>

							<template
								v-if="item.source==1&&item.operation=='or'&&item.examinePersonDetailDTOList.length==1 ">
								<p v-for="item1,j in item.examinePersonDetailDTOList">{{item1.name}}
									<span :class="getClass(item1,i)">{{item1.remark}}</span>
								</p>
							</template>
							<template v-else-if="item.source!=1&&item.operation=='or'&&item.action!=0 &&item.examinePersonDetailDTOList.length==1">
								<p v-for="item1,j in item.examinePersonDetailDTOList">{{item1.name}}
									<span :class="getClass(item1,i)" v-if="item1.action!='0'">{{item1.remark}}</span>
								</p>
							</template>
							<template v-else>
								<p>{{item.operation=='or'?'或签':''}}{{item.operation=='and'?'会签':''}}{{item.examinePersonDetailDTOList.length}}人
									<span :class="getClass(item,i)"  >{{item.actionName}} </span>
								</p>
								<ul class="mui-table-view mui-grid-view mui-grid-9 flex ">


									<li class="mui-table-view-cell mui-media"
										v-for="item1,j in item.examinePersonDetailDTOList">
										<div class="flex">
											<img :src="item1.faceImageUrl+'?x-oss-process=image/resize,h_800,m_lfit'" />
											<i class="iconfont icon-gou" v-if="item1.action=='1'"></i>
											<i class="iconfont icon-chacha" v-if="item1.action=='2'"></i>
										</div>
										<div class="mui-media-body">{{item1.name}}</div>
									</li>
								</ul>
							</template>

						</div>
					</div>


					<div class="vongi-slot-block" v-if="item.action=='1'&&item.ccPersonDetailDTOList.length">
						<div class="vongi-slot-img"><img src="~$project/assets/img/icon_chaosong.png"></div>
						<div class="vongi-slot-content">
							<h4>抄送人</h4>
							<p>已抄送{{item.ccPersonDetailDTOList.length}}人</p>
							<ul class="mui-table-view mui-grid-view mui-grid-9 flex ">
								<li class="mui-table-view-cell mui-media" v-for="item1,j in item.ccPersonDetailDTOList">
									<div class="flex">
										<img :src="item1.faceImageUrl+'?x-oss-process=image/resize,h_800,m_lfit'" />
									</div>
									<div class="mui-media-body">{{item1.name}}</div>
								</li>

							</ul>
						</div>
					</div>

				</template>
				</div> 
			
		</div>
</template>

<script>
		import * as API_sp from '@/apis-xsy/xsy'
	import Loading from '$project/components/Loading.vue'

	export default {
	
		name: 'examineDetail',
		data() {
			return {
				isLoading:false,
				examineDetail: {},
				only: "test"

			}
		},
		components: {
		
			Loading,
		
		},
		props: {
			id: {
				require: true,
				default: '',
			},
		},
		methods: {
			
			getClass(ac, i) {
				var reclass = ""
				
				if (ac.action == "0") {
					if (this.only == "test") {

						this.only = i;
					}
					if (this.only == i) {
						return "color3385FF"
					} else {
						return "mui-hidden"
					}

				}

				if (ac.action == "3" || ac.action == "2") {
					return "colorfe616c"
				}

				if (ac.action == "1" || ac.action == "4") {
					return "color389E0D"
				}
				return reclass
			},
			getExamineDetail() {
				API_sp.examineDetail(this.id).then(response => {
					this.examineDetail = response
					
					this.$emit('getOwnerSubmit', response.ownerSubmit);
					
					this.$emit('allowExamine', response.procinstActUserId);
				}).catch(error => {

					mui.toast(error);
				})
			},
		},
		mounted() {
				this.getExamineDetail();
		}
	}
</script>

<style src="$project/assets/css/iconfont.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/xsy.css"></style>
<style scoped>
	.color3385FF {
		color: #3385FF
	}

	.color389E0D {
		color: #389E0D
	}
</style>
