<template>
<div id="app">
			<top-header :pageTitle="pageTitle" v-show="!stepSelect"></top-header>
 			<select-person  v-if="initSelectPerson"  v-show="stepSelectPerson"   :setids="subForm.personIds"  :setnames="seletPerson"  @confirm="confirm2"></select-person>
			
			
			<div class="mui-content vongi-fx vongi-qingjiadt margin60"  v-show="!stepSelect" >
				<form class="mui-input-group vongi-editme margin10 mt-10">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i>&nbsp;补卡班次</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" type='button'
						 v-text="subForm.date?subForm.date:'请选择'" @click="selectData()"
						 style="width:65%">
							2021-03-01 12:00-22:00
						</button>
					</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="selectPersonBtn" v-html="seletPerson"  >
							请选择
						</button>
					</div>
				</form>
				<form class="mui-input-group vongi-editme margin10">
					<div class="mui-input-row">
						<label style="width:100%">&nbsp;&nbsp;申请理由</label>
					 
						<textarea id="textarea" rows="3" placeholder="申请批量补卡" v-model="subForm.reason"></textarea>
					</div>
				</form>
				<div class="vongi-yqsb vongi-wordcard">
				<h5>上传照片</h5>
				<div class="fyy-upphoto">
					<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(item,index) in picList">
						<img :src="item" v-viewer />
						<a class="mui-icon mui-icon-closeempty"  @click="delPic(item)"></a>
					</div>
					
					<div class="mui-col-xs-3" @click="chooseImage">
						<a><span class="mui-icon mui-icon-plusempty"></span></a>
					</div>
				</div>
			</div>
				<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"  v-show="!stepSelect" >
				<div class="bindfyy-btn">
<!-- 					<button    class="mui-btn " :class="examinePerson.name?'mui-btn-primary':'mui-btn-grey'" type="button" @click="submit">提交</button>
 -->					<!--<button type="button" class="mui-btn mui-btn-grey ">确认调班</button>-->
				<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/applyclass'
	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: '批量补卡申请',
				stepSelect:false,
			 
				initSelectPerson:false,
				stepSelectPerson:false,
				
				isLoading: false,
				list:[],
				seletName:"",
				seletPerson:"请选择",
				showselect1:"",
				showselect2:"",
					id:"",
				subForm: {
					date: '',
					imageUrl:"",
					reason: '',
					personIds:'',
					formId:"batchApplyWork",
				},
				examinePerson:{},
					picList: [],
			}
		},
		created() {
			//this.subForm.date = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			this.id = this.$route.query.id;

		},
		methods: {
			getSupplementWorkBatchDetail() {
				if(!this.id){
					return;
				}
				this.isLoading = true;
			
				API.supplementWorkBatchDetail(this.id).then(response => {
					 
					 this.isLoading = false;
					this.subForm.ids=this.id;
					
					this.subForm = {
						... this.subForm ,
						...response
					};
					this.subForm.personIds=response.nameId;
					this.seletPerson=response.name
					this.subForm.date=response.attendanceDate
					if(response.imageUrl){
						this.picList=response.imageUrl.split(",")
					}
					
				}).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);
			 	})
			 },
			confirm2(temp){
				this.stepSelect=false;
				this.stepSelectPerson=false;
				console.log(temp)
				if(temp.status==1){
					this.seletPerson="";
					for(var i in temp.selectPerson){
						if(i==0){
							this.seletPerson=temp.selectPerson[i].name;
						}else{
							this.seletPerson+=","+temp.selectPerson[i].name;	
						}
					}
					
					 this.subForm.personIds=temp.selectId.join();
				}
			},
			selectPersonBtn(){
				this.initSelectPerson=true;
				this.stepSelectPerson=true;
				this.stepSelect=true;
			},
			 
			//选择日期
			selectData() {
				var picker = new mui.PopPicker( {
						layer: 2
					});
				
 				 //var vdata=currentTimeStamp();
				var _this = this;
				var list=[];
				for(var i in this.list){
					var obj=this.list[i];
					if(obj.children.length){
							list.push(obj)
					}
				
				}
				picker.setData(list)
				 picker.pickers[0].setSelectedValue(this.showselect1,200,()=>{
					  picker.pickers[1].setSelectedValue(this.showselect2);
				 });
				
				 
				picker.show(function(rs) {
					console.log(rs)
					_this.subForm.date = rs[0].value+" "+rs[1].value+":00";
					_this.showselect1=rs[0].value;
					_this.showselect2=rs[1].value;
					picker.dispose();
					
				});
			},
		addOwner(item){
			item.children=[];
			var sz=[]
			API.allShift().then(response => {
				if (response) {
					var recordList = response.data;
					
					for(var i in recordList){
						var obj=recordList[i];
						if(sz.indexOf(obj.workTime)==-1){
							sz.push(obj.workTime);
						}
						if(sz.indexOf(obj.closingTime)==-1){
							sz.push(obj.closingTime);
						}
						
					}
					 sz.sort();
					
					 for(var i in sz){
						
						  item.children.push({
							  value: sz[i],
							  text: sz[i],
						  })
					 }
					
					
				}
			 
			}).catch(error => {
				
				mui.toast(error);
			})
		},
			//表单检测
			checkFrom() {
				if (!this.subForm.personIds) {
					mui.toast('请选择人员');
					return false;
				}   else if (!this.subForm.date) {
					mui.toast('请选择调整班次');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit(status) {
				this.subForm.draft=status;
				if(!this.examinePerson.name){
					return;
				}
				this.subForm.imageUrl = this.picList.join(',');
				
				if (this.checkFrom()) {
					this.isLoading = true;
					//var obj=this.subForm;
					
					//obj.date=this.subForm.date+" 00:00:00"
					
					API.supplementWorkBatchSubmit(this.subForm).then(response => {
						this.isLoading = false;
						
						
						if(status){
							mui.toast('提交成功');
							this.$router.replace({
							    name: "XsyApprovalInfo",
							    query: {
									formId:"batchApplyWork",
									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.list=[];
			
			for(var i=0 ;i< 31;i++){
				var vdate = parseUnixTime(currentTimeStamp()-24*60*60*1000*(i+1), '{y}-{m}-{d}');
				var item={
					    value: vdate,
					    text: vdate
					}
				this.addOwner(item);
				  this.list.push(item);
			}
			//获取微信配置
			WxJsApi.getWxConfig();
			mui.alert("请于补卡班次结束24小时后，<br/>再进行补卡")
			
			this.getSupplementWorkBatchDetail();
			this.getExaminePerson();
		},
		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 src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>
