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

		<div v-if="detail.personName" class="mui-content vongi-qingjiadt margin60">
			<div class="vongi-qingjiadt-head flew-sp">
				<div class="flew-items">
					<div class="flew"><img :src="detail.faceImageUrl" width="50" v-viewer /></div>
					<h4>{{detail.personName}} 申请 <span class="color4fc5f7" v-text="detail.typeN"></span></h4>
				</div>
				<button class="mui-btn  mui-btn-primary mui-btn-outlined" :style="getColor(detail.status)" v-text="detail.statusN"></button>
			</div>
			<form class="mui-input-group margin10">
				<div class="mui-input-row">
					<label>所属部门</label>
					<span v-text="detail.companyName"></span>
				</div>
				<div class="mui-input-row">
					<label>出差地点</label>
					<span v-text="detail.destination"></span>
				</div>
				<div class="mui-input-row">
					<label>出差时间</label>
					<span v-text="detail.startTime"></span>
				</div>
				<div class="mui-input-row">
					<label>预估天数</label>
					<span v-text="detail.estimatedTime+'天'"></span>
				</div>
				<div class="mui-input-row">
					<label>出差事由</label>
					<span v-text="detail.content"></span>
				</div>
				<div class="mui-input-row">
					<label>申请单编号</label>
					<span v-text="detail.approvalNo"></span>
				</div>
				<div class="mui-input-row">
					<label>申请时间</label>
					<span v-text="detail.createTime"></span>
				</div>
				<div v-if="detail.endTime || closeFrom.time" class="mui-input-row">
					<label>返回时间</label>
					<span v-text="detail.endTime?detail.endTime:closeFrom.time"></span>
				</div>
			</form>
			<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>
		<div v-if="wm && !detail.endTime" class="fyy-footer">
			<div class="bindfyy-btn"><button type="button" @click="closeActoin" class="mui-btn mui-btn-danger">结束出差</button></div>
		</div>
		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_BusinessTravel from '@/apis/Master/business_travel'
	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: 'MasterBusinessTravelInfo',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: '出差申请详情',

				isLoading: false,

				id: this.$route.query.id,
				detail: {
					list: [],
				},

				//微信模板消息过来的
				wm: this.$route.query.wm,

				closeFrom: {
					id: this.$route.query.id,
					//来源于微信模板消息
					time: this.$route.query.time,
				}
			}
		},
		created() {},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_BusinessTravel.businessOutDetail(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 + ';';
			},
			//结束状态
			closeActoin() {
				var _this = this;
				var btnArray = ['否', '是'];
				mui.confirm('是否立即结束出差？', '确认', btnArray, function(e) {
					if (e.index == 1) {
						_this.outEnd();
					}
				})
			},
			//结束状态
			outEnd() {
				this.isLoading = true;
				API_BusinessTravel.businessOutEnd(this.closeFrom).then(response => {
					this.isLoading = false;

					mui.toast('处理成功');
					this.getInfo();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			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>
