<template>
<div id="app">
	
	 
		<top-header :pageTitle="pageTitle" v-show="!stepSelectClass"></top-header>
		<select-class  v-if="initSelectClass"  v-show="stepSelectClass"  @confirm="confirm"></select-class>
			<div class="mui-content vongi-fx  vongi-qingjiadt" v-show="!stepSelectClass">
				<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" 
						v-text="subForm.date" @click="selectData()"
						type='button' style="width:65%">
							请选择
						</button>
					</div>
				</form>
				<form class="mui-input-group vongi-editme margin10">
					<div class="mui-input-row pl-10">
						<label>&nbsp;&nbsp;原班次</label>
						<span>{{ownerShift.name}}</span>
					</div>
					<div class="mui-input-row pl-20">
						<label style=""><i class="colorfe616c">*</i>&nbsp;调整为</label>
						<!--<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">
							请选择
						</button>-->
						<span class="mui-navigate-right" @click="selectClassBtn" v-html="seletName"> </span>
					</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.remark"></textarea>
					</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" v-show="!stepSelectClass">
				<div class="bindfyy-btn" @click="submit" >
					<button type="button" class="mui-btn mui-btn-primary "  v-if="examinePerson.name">提交</button>
					<button type="button" class="mui-btn mui-btn-grey " v-if="!examinePerson.name">提交</button>
				</div>
			</div>	<loading :visible="isLoading"></loading>
		</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 SelectClass from './Class.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,SelectClass
		},
		data() {
			return {
				pageTitle: '申请调班',
				initSelectClass:false,
				stepSelectClass:false,
				isLoading: false,
				ownerShift:{},
				seletName:"",
				examinePerson:{},
				subForm: {
					date: '',
					shiftIds: '',
					remark: '',
					formId: "exchangeWork",
				},
			}
		},
		created() {
			this.subForm.date = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');

		},
		methods: {
			confirm(temp){
				this.stepSelectClass=false;
				console.log(temp)
				if(temp.status==1){
					this.seletName=temp.name;
					this.subForm.shiftIds=temp.id;
				}
			},
			selectClassBtn(){
				this.initSelectClass=true;
				this.stepSelectClass=true;
			},
			//选择日期
			selectData() {
				var vdate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				 vdate=new Date(vdate)
				 //var vdata=currentTimeStamp();
				var _this = this;
				
			 
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": vdate,
			    
					"value": _this.subForm.date
				});
				picker.show(function(rs) {
					_this.subForm.date = rs.text;
					_this.getOwnerShift();
					picker.dispose();
					
				});
			},
		
			//表单检测
			checkFrom() {
				
				if (!this.ownerShift.id) {
					mui.toast('调班当天没有班次，请选择其他日期');
					return false;
				}  else if (!this.subForm.shiftIds) {
					mui.toast('请选择调整班次');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit() {
				
				if (this.checkFrom()) {
					this.isLoading = true;
					var obj=this.subForm;
					
					obj.date=this.subForm.date+" 00:00:00"
					
					API.adjustShiftSubmit(obj).then(response => {
						this.isLoading = false;

						mui.toast('提交成功');
						this.$router.push({
						    name: "Master",
						    query: {}
						})
					}).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);
				})
			},
			getOwnerShift(){
					this.isLoading = true;
					var obj={
						date:this.subForm.date+" 00:00:00"
					}
				API.ownerShift(obj).then(response => {
					this.ownerShift=response;
					 
					if(this.ownerShift.id){
						
					}else{
							mui.toast('调班当天没有班次，请选择其他日期');
					}
					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {

			},
		
		},
		mounted() {
			this.getOwnerShift();
			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>
