<template>
	<div>
		<loading :visible="isLoading"></loading>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-if="!$route.query.token"></a>
			<h1 class="mui-title">{{info.text}}详情</h1>
		</header>
		<div class="mui-content vongi-qingjiadt">
			<div class="vongi-qingjiadt-head flew-sp" v-if="info.faceImageUrl">
				<div class="flew-items">
					<div class="flew"><img :src="info.faceImageUrl+'?x-oss-process=image/resize,h_800,m_lfit'" width="50" /></div>
					<h4>{{info.name}} {{info.text}}</h4>
				</div>
				<button class="mui-btn   mui-btn-outlined" :class="{'mui-btn-primary':info.status==0,
					'mui-btn-danger':info.status==2||info.status==3,
					'mui-btn-success':info.status==1||info.status==4}">{{info.statusName}}</button>

			</div>
			<Info1 v-if="sp&&formId=='exchangeWork'" @getInfo="getInfo"></Info1>
			 <Info2 v-if="sp&&formId=='leaveWork'" @getInfo="getInfo"></Info2>
			 <Info3 v-if="sp&&formId=='travelWork'" @getInfo="getInfo"></Info3>
			 <Info4 v-if="sp&&formId=='applyWork'" @getInfo="getInfo"></Info4>
			 <Info5 v-if="sp&&formId=='batchApplyWork'" @getInfo="getInfo"></Info5>
			 <Info6 v-if="sp&&formId=='batchExtraWork'" @getInfo="getInfo"></Info6>
			 <Info7 v-if="sp&&formId=='extraWork'" @getInfo="getInfo"></Info7>
			 <Info8 v-if="sp&&formId=='commerceWork'" @getInfo="getInfo"></Info8>
			 <Info9 v-if="sp&&formId=='treatWork'" @getInfo="getInfo"></Info9>
			 <Info2 v-if="sp&&formId=='leaveCancelWork'" @getInfo="getInfo"></Info2>
			 
			 
			<examineDetail  :style="myownerSubmit?' margin-bottom: 60px;':''"  @getOwnerSubmit="getOwnerSubmit" @allowExamine="allowExamine" :id="id" v-if="info.sp&&info.status!=4"></examineDetail>
			
		<div class="fyy-footer" >
			
			<div class="bindfyy-btn" v-if="myownerSubmit">
				<button type="button" class="mui-btn mui-btn-primary " @click="doAction">撤销</button>
			</div>
		</div>
			
		</div>
	</div>
</template>


<script>
	 
	import Info1 from '@/views-xsy/ApplyClass/Info.vue'
	import Info2 from '@/views/Master/Attendance/LeaveInfo.vue'
	import Info3 from '@/views/Master/BusinessTravel/Info2.vue'
	import Info4 from '@/views/Master/Attendance/Info.vue'
	import Info5 from '@/views-xsy/CardReplacement/Info.vue'
	
	import Info6 from '@/views/Master/ExtraWork/Info.vue'
	import Info7 from '@/views/Master/ExtraWork/Info.vue'
	import Info8 from '@/views-xsy/Commerce/Info2.vue'
	import Info9 from '@/views-xsy/Treat/Info.vue'
	
	import * as API_sp from '@/apis-xsy/xsy'
	import ExamineDetail from '$project/components/ExamineDetail.vue'

	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		name: '',
		components: {
			Common,
			Loading,
			TopHeader,ExamineDetail,
			Info1,Info2,Info3,Info4,Info5,Info6,Info7,Info8,Info9
		},
		data() {
			return {
				pageTitle: '申请调班详情',
				formId:this.$route.query.formId,
				sp:true,
				isLoading: true,
				id: '',
				info: {},
				examineDetail: {},
				only: "test",
				myownerSubmit:false,

			}
		},
		created() {
			this.id = this.$route.query.id;
		},
		methods: {
			getOwnerSubmit(bl){
				
				if(this.$route.path=='/xsy/approval/info'){
					console.log(this.$route.path)
					this.myownerSubmit=bl
				}
				
			},
			doAction(){
				this.isLoading=true;
				this.update(false);
				API_sp.revoke(this.id).then(response => {
					this.update(true);
					
				 this.isLoading=false;
				}).catch(error => {
				
					mui.toast(error);
				})
			},
			getInfo(op){
				this.info=op;
				this.info.sp=true;
				if(this.info.status==4){
					this.isLoading=false;
				}
				this.$emit('spstatus',op.status);
			},
			allowExamine(op){
				this.isLoading=false;
				
				if(this.info.status==6){
					this.$emit('allowExamine',"");
				}else{
					this.$emit('allowExamine',op);
				}
				
				
			},
			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
			},
		 
			asynCallBack() {

			},
			update(bl) {
				this.isLoading=true;
				this.sp=bl;
				if(!bl){
					this.info.sp=false;
				}
				
			}
		},
		mounted() {
			 
			
		},
		destroyed() {},

	}
</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>
