<template>
	<div>
		<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">申请接待</h1>
			</header>
			<loading :visible="isLoading"></loading>
			
			<div class="mui-content vongi-fx vongi-qingjiadt margin60">
				<form class="mui-input-group vongi-editme mt-10">
					<div class="mui-input-row">
						<label>申请人</label>
						<span>{{person_popedom.personName}}</span>
					</div>
					<div class="mui-input-row">
						<label>接待部门</label>
						<span>{{person_popedom.companyName}}</span>
					</div>
				</form>
				<form class="mui-input-group vongi-editme margin10 mt-10">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;来客单位</label>
						<input  v-model="subForm.customerCompany" type="text" class="mui-input-clear" placeholder="请填写单位信息  ">
					</div>
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;事由</label>
						<input v-model="subForm.reason" type="text" class="mui-input-clear" placeholder="请填写来访事由  ">
					</div>
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;来客人数</label>
						<input v-model="subForm.customerNum"  type="number" class="mui-input-clear" placeholder="请填写人数  ">
					</div>
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;陪同人数</label>
						<input v-model="subForm.accompanyNum"  type="number"  class="mui-input-clear" placeholder="请填写人数 ">
					</div>
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;进餐时间</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%" @click="selectData" v-text="subForm.diningTime">
							2021-03-01 12:01
						</button>
					</div>
				</form>
				<form class="mui-input-group vongi-editme margin10 mt-10">
					<div class="mui-input-row">
						<label style="width:50%"><i class="colorfe616c">*</i>&nbsp;用餐安排(餐别)</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%" @click="selectType" v-text="subForm.diningName?subForm.diningName:'请选择'">
							请选择
						</button>
					</div>
					<div class="mui-input-row">
						<label style="width:50%"><i class="colorfe616c">*</i>&nbsp;进餐标准金额(元)</label>
						<input  v-model="subForm.diningFee"  type="number" class="mui-input-clear" placeholder="请填写金额  " style="width:50%">
					</div>	
				</form>
				<form class="mui-input-group vongi-editme">
					<div class="mui-input-row">
						<label>&nbsp;&nbsp;审批人</label>
						<span>{{examinePerson.name}}</span>
					</div>
				</form>
			</div>
			<div class="fyy-footer">
				<div class="bindfyy-btn">
					<button class="mui-btn "  style="width: 50%;" :class="examinePerson.name?'mui-btn-success':'mui-btn-grey'"  type="submit" @click="submit(0)">
											<i icon="mui-icon mui-icon-compose"></i>保存草稿
					</button>
					<button class="mui-btn "  style="width: 50%;" :class="examinePerson.name?'mui-btn-primary':'mui-btn-grey'"  type="submit" @click="submit(1)">
											提交
					</button>
				
				</div>
			</div>
	</div>
</template>


<script>
	require('$project/assets/js/mui.picker.min.js');
	
	import * as API from '@/apis-xsy/treat'
	import * as API_sp from '@/apis-xsy/xsy'
	import {
		currentTimeStamp,
		parseUnixTime,
		hourDistanceArr
	} from '$project/utils'
	import  Common from '$project/components/Common.vue'
	 import * as WxJsApi from '$project/utils/wxJsApi'
	import SelectPerson from '../PlanClass/Person.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,SelectPerson
		},
		data() {
			return {
				
				pageTitle: '携物出厂申请',
				
				
				isLoading: false,
				 id:"",
				subForm: {
					customerCompany:"",
					reason:"",
					customerNum:"",
					accompanyNum:"",
					diningTime:"",
					diningName:"",
					diningFee:"",
				 
				 
					formId:"treatWork",
				},
				examinePerson:{},
				picList: [],
			}
		},
		created() {
			this.subForm.diningTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} {h}:{i}');
			this.id = this.$route.query.id;
			
		},
		methods: {
			getAdjustShiftDetail() {
				if(!this.id){
					return;
				}
				this.isLoading = true;
			
				API.customerDiningDetail(this.id).then(response => {
					 
					this.isLoading = false;
					 this.subForm.ids=this.id;
					 this.subForm = {
					 	... this.subForm ,
					 	...response
					 };
					 
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			 //微信选择图片
			 chooseImage() {
			 	WxJsApi.chooseImage().then(res => {
			 		var localData = res.localData;
			 
			 		if (localData.indexOf('data:image') != 0) {
			 			//判断是否有这样的头部
			 			localData = 'data:image/jpeg;base64,' + localData
			 		}
			 		localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
			 		this.imgBase64 = localData;
			 		//显示裁剪图片
			 		//_this.showCropper(field);
			 		this.uploadpic();
			 	}).catch(error => {
			 		mui.toast(error);
			 	})
			 },
			 //删除图片
			 delPic(item) {
			 	let picList = this.picList;
			 	let index = picList.indexOf(item);
			 	if (index > -1) {
			 		picList.splice(index, 1);
			 	}
			 	this.picList = picList;
			 },
			 //上传图片
			 uploadpic() {
			 	this.isLoading = true;
			 	WxJsApi.uploadPic(this.imgBase64).then(response => {
			 		this.isLoading = false;
			 
			 		this.picList.push(response);
			 	}).catch(error => {
			 		this.isLoading = false;
			 		mui.toast(error);
			 	})
			 },
			  
			 
			//选择日期
			selectData() {
				var vdate = new Date()
				 //var vdata=currentTimeStamp();
				var _this = this;
				
			 
				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": vdate,
			    
					"value": _this.subForm.diningTime
				});
				picker.show(function(rs) {
					_this.subForm.diningTime = rs.text;
					
					picker.dispose();
					
				});
			},
		 selectType() {
		  
		 	var _this = this;
		 	
		  
		 	var picker = new mui.PopPicker( );
			var obj=[
				{
					value:'午餐',
					text:'午餐'
				},{
					value:'晚餐',
					text:'晚餐'
				},{
					value:'宵夜',
					text:'宵夜'
				},
			]
			picker.setData(obj);
		 	picker.show(function(rs) {
		 		_this.subForm.diningName = rs[0].value;
		 		
		 	});
		 },
			//表单检测
			checkFrom() {
				
				if (!this.subForm.customerCompany) {
					mui.toast('请填写单位信息');
					return false;
				}  else if (!this.subForm.reason) {
					mui.toast('请填写来访事由');
					return false;
				} else  if (!this.subForm.customerNum) {
					mui.toast('请填写来客人数');
					return false;
				} else  if (!this.subForm.accompanyNum) {
					mui.toast('请填写陪同人数');
					return false;
				} else  if (!this.subForm.diningTime) {
					mui.toast('请填写进餐时间');
					return false;
				} else  if (!this.subForm.diningName) {
					mui.toast('请填写用餐安排');
					return false;
				} else  if (!this.subForm.diningFee) {
					mui.toast('请填写进餐标准金额');
					return false;
				} else {
					return true;
				}
				
				
				
				
			},
			//提交
			submit(status) {
				this.subForm.draft=status;
				
				if(!this.examinePerson.name){
					return;
				}
				this.subForm.images = this.picList.join(',');
				
				if (this.checkFrom()) {
					this.isLoading = true;
					//var obj=this.subForm;
					
					//obj.date=this.subForm.date+" 00:00:00"
					
					API.customerDiningSubmit(this.subForm).then(response => {
						this.isLoading = false;
						
						 
						if(status){
							mui.toast('提交成功');
							this.$router.replace({
							    name: "XsyApprovalInfo",
								
							    query: {
									formId:"treatWork",
									id:response.id
								}
							})
							
						}else{
							mui.toast('保存成功');
							this.subForm.ids=response.id;
							this.id=response.id
						}
						
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			getExaminePerson(){
				API_sp.examinePerson(this.subForm.formId).then(response => {
					this.examinePerson=response
				}).catch(error => {
					
					mui.toast(error);
				})
			},
			 
			asynCallBack() {

			},
		
		},
		mounted() {
			  
		this.getAdjustShiftDetail()
			
			this.getExaminePerson();
		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	
	}
</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 src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>

