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

		<div class="mui-content margin60 vongi-wordcard">
			<form class="mui-input-group margint10">
				<div class="mui-input-row">
					<label><span class="colorfe616c">*</span>开始时间</label>
					<div class="mui-navigate-right">
						<button class="mui-btn mui-btn-block" type='button' @click="selectData('startTime',false,subForm.endTime)" v-text="subForm.startTime?subForm.startTime:'请选择'"></button>
					</div>
				</div>
				<div class="mui-input-row">
					<label><span class="colorfe616c">*</span>结束时间</label>
					<div class="mui-navigate-right">
						<button class="mui-btn mui-btn-block" type='button' @click="selectData('endTime',subForm.startTime)" v-text="subForm.endTime?subForm.endTime:'请选择'"></button>
					</div>
				</div>
			</form>
			<form class="mui-input-group margint10">
				<div class="mui-input-row">
					<label>时长(小时)</label>
					<div><button class="mui-btn mui-btn-block" type='button' v-text="subForm.hours+'小时'"></button></div>
				</div>
				<div class="mui-input-row">
					<label><span class="colorfe616c">*</span>审批人</label>
					<div class="mui-navigate-right">
						<button class="mui-btn mui-btn-block" type='button' @click="selectPerson" v-text="approvalPersonName"></button>
					</div>
				</div>
			</form>
			<div class="vongi-meform-pho margint10">
				<h4><span class="colorfe616c">*</span>加班原因</h4>
				<div class="mui-input-row">
					<textarea v-model="subForm.reason" rows="5" placeholder="请填写加班原因"></textarea>
				</div>
			</div>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn" @click="submit"><button type="button" class="mui-btn mui-btn-primary ">提交</button></div>
		</div>

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

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_BusinessTravel from '@/apis/Master/business_travel'
	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'
	import {
		currentTimeStamp,
		parseUnixTime,
		hourDistanceArr
	} from '$project/utils'
	export default {
		name: 'MasterExtraWorkForm',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: '加班',

				isLoading: false,

				subForm: {
					reason: '',
					startTime: '',
					endTime: '',
					hours: 0,
					approvalPersonId: ''
				},

				approvalPersonList: [],
				//补卡/加班1，外出2，出差3 ，请假4
				personForm: {
					type: '1'
				}
			}
		},
		created() {
			this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} {h}:{i}');
		},
		methods: {
			//获取审核人列表
			getBusinessOutApprovalPerson() {
				this.isLoading = true;
				API_BusinessTravel.getBusinessOutApprovalPerson(this.personForm).then(response => {
					this.isLoading = false;

					var list = response.data;
					var approvalPersonList = [];
					for (var i = 0; i < list.length; i++) {
						approvalPersonList.push({
							value: list[i]['id'],
							text: list[i]['personName']
						})
					}
					if (approvalPersonList.length) {
						this.subForm.approvalPersonId = approvalPersonList[0]['value'];
					}
					this.approvalPersonList = approvalPersonList;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择审核人
			selectPerson() {
				var _this = this;
				var picker = new mui.PopPicker();
				picker.setData(_this.approvalPersonList);
				picker.pickers[0].setSelectedValue(this.subForm.approvalPersonId);
				picker.show(function(selectItems) {
					_this.subForm.approvalPersonId = selectItems[0].value;
					picker.dispose();
				})
			},
			//选择日期
			selectData(field,vdate,edate) {
				var _this = this;
				if(vdate){
                    vdate=new Date(vdate)
				}
                if(edate){
                    edate=new Date(edate)
                }
				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": vdate,
                    "endDate":edate,
					"value": _this.subForm[field]
				});
				picker.show(function(rs) {
					_this.subForm[field] = rs.text;
					picker.dispose();
					_this.countHours();
				});
			},
			//表单检测
			checkForm() {
				if (!this.subForm.startTime) {
					mui.toast('请选择开始时间');
					return false;
				} else if (!this.subForm.endTime) {
					mui.toast('请填写结束时间');
					return false;
				} else if (!this.subForm.reason) {
					mui.toast('请填写加班原因');
					return false;
				} else if (!this.subForm.approvalPersonId) {
					mui.toast('请选择审批人');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit() {
				if (this.checkForm()) {
					this.isLoading = true;
					API_ExtraWork.submitWorkOver(this.subForm).then(response => {
						this.isLoading = false;

						mui.toast('提交成功');
						this.$router.push({
							name: 'MasterExtraWorkInfo',
							query: {
								id: response.id
							}
						})
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			countHours() {
				var hoursArr = hourDistanceArr(this.subForm.startTime, this.subForm.endTime);
				this.subForm.hours = hoursArr[0];
			},
			asynCallBack() {

			},
		},
		mounted() {
			//获取审核人列表
			this.getBusinessOutApprovalPerson();
		},
		destroyed() {},
		computed: {
			approvalPersonName: {
				// getter
				get: function() {
					for (var i = 0; i < this.approvalPersonList.length; i++) {
						if (this.approvalPersonList[i]['value'] == this.subForm.approvalPersonId) {
							return this.approvalPersonList[i]['text'];
						}
					}
					return '请选择';
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
		},
	}
</script>

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