<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-qingjiadt">
			<div class="vongi-qingjiadt-head flew-sp">
				<div class="flew-items">
					<div class="flew"><img :src="detail.faceImageUrl" width="50" /></div>
					<h4>{{detail.personName}} 申请 <span class="colorFF7100">加班</span></h4>
				</div>
				<button class="mui-btn mui-btn-outlined" :style="getColor(detail.status)" v-text="detail.statusN"></button>
			</div>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>加班时间</label>
					<span v-text="detail.workOverTime"></span>
				</div>
				<div class="mui-input-row">
					<label>加班时长</label>
					<span v-text="detail.hours+'小时'"></span>
				</div>
				<div class="mui-input-row">
					<label>加班原因</label>
					<span v-text="detail.reason"></span>
				</div>
				<div class="mui-input-row">
					<label>申请时间</label>
					<span v-text="detail.dateTime"></span>
				</div>
			</form>
			<div class="mui-content-padded">
				<h5>审核记录</h5>
			</div>
			<div class="vongi-slot">
				<div v-for="(item,index) in detail.list" class="vongi-slot-block">
					<div class="vongi-slot-img"><img :src="item.faceImageUrl"></div>
					<div class="vongi-slot-content">
						<h4>审批人{{index+1}}<span class="mui-pull-right mui-h5 color999" v-text="item.time"></span></h4>
						<p>{{item.name}} <span class="color55f868" :style="getColor(item.status)" v-text="item.statusN"></span></p>
					</div>
				</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_ExtraWork from '@/apis/Master/extra_work'
	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: 'MasterExtraWorkInfo',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: '加班',

				isLoading: false,
				id: this.$route.query.id,
				detail: {
					list: [],
				},
			}
		},
		created() {},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_ExtraWork.workOverDetail(this.id).then(response => {
					this.isLoading = false;

					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取状态颜色
			getColor(status) {
				var color = '';
				if (status == '0') {
					color = '#4fc5f7';
				} else if (status == '1') {
					color = '#55f868';
				} else if (status == '2') {
					color = '#fe616c';
				}
				return 'color:' + color + ';border-color:' + color + ';';
			},
			asynCallBack() {
				//获取详情
				this.getInfo();
			},
		},
		mounted() {
			this.isLoading = true;
		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
			})
		},
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
