<template>
<div>
	<common @asynCallBack="asynCallBack"></common>
	<top-header :pageTitle="pageTitle" v-if="step=='1'"  ></top-header>
		<div class="mui-content" v-if="step=='1'">
			<div class="mui-content-padded vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>受邀人<span class="colorfe616c">*</span></label>
						<input type="text" class="mui-input-clear" placeholder="请输入姓名" v-model="detail.name">
					</div>
					<div class="mui-input-row">
						<label>手机号码<span class="colorfe616c">*</span></label>
						<input type="text" class="mui-input-clear" placeholder="请输入手机号码"  v-model="detail.mobilePhone">
					</div>
					<div class="mui-input-row">
						<label>受邀单位<span class="colorfe616c">*</span></label>
						<input type="text" class="mui-input-clear" placeholder="请输入单位名称"  v-model="detail.unit">
					</div>
					<div class="mui-input-row">
						<label>邀访事由<span class="colorfe616c">*</span></label>
						<input type="text" class="mui-input-clear" placeholder="请填写邀访事由"  v-model="detail.visitReasons">
					</div>
				</form>
			</div>
			<div class="mui-content-padded vongi-editme" >
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>生效时间<span class="colorfe616c">*</span></label>					
						<button  @click="selectStartTime()"  v-text="detail.visitDate" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">
							2020-09-20 14:30:00
						</button>						
					</div>
					<div class="mui-input-row">
						<label>过期时间<span class="colorfe616c">*</span></label>					
						<button  @click="selectEndTime()"  v-text="detail.expirationTime" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">
							2020-09-20 14:30:00
						</button>						
					</div>
					<div class="mui-input-row">
						<label style="width:50%">需要上传登记照</label>					
						<div id="autoLogin" class="mui-switch " :class="detail.isUpPhoto?'mui-active':''" @click="detail.isUpPhoto=!detail.isUpPhoto,indexDevice=[]">
							<div class="mui-switch-handle"></div>
						</div>						
					</div>
					<div class="mui-input-row" v-show="detail.isUpPhoto">
						<label style="width:40%">照片下发设备<span class="colorfe616c"    >*</span></label>
						<button   class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:60%" @click="selectDevice">
							已选{{indexDevice.length}}台
						</button>						
					</div>
				</form>
			</div>
		</div>
		<div class="fyy-footer"  v-if="step=='1'">
			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="submit()">创建邀请函</button></div>
		</div>
	<header class="mui-bar mui-bar-nav "  v-if="step=='2'"  >
		<a  class="mui-title">{{pageTitle}}</a>
		<a   class="mui-icon mui-icon-left-nav mui-pull-left"  @click="goBack"></a>
	</header>
	<div class="mui-content" v-if="step=='2'">
		<div class="mui-content-padded">
			<h5>请选择设备</h5>
			<form class="mui-input-group">
				<div class="mui-input-row mui-checkbox" v-for="(item,index) in deviceList">
					<label>{{item.name}}</label>
					<input name="checkbox1" v-model="indexDevice" :value="item.id" type="checkbox">
				</div>

			</form>
		</div>
	</div>
	<div class="fyy-footer" v-if="step=='2'">
		<div class="bindfyy-btn">
			<button type="button" class="mui-btn mui-btn-primary " @click="goBack()">
				保存
			</button>
		</div>
	</div>

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

</div>
</template>


<script>
	require('$project/assets/js/mui.min.js');

	require('$project/assets/js/mui.picker.min.js');

	import * as API_From from '@/apis/Guest/from'
	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 {
		checkPhone,
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'GuestFromAdd',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '邀请访客',

				id: '',
				detail: {
					id:'',
					name:'',
					mobilePhone:'',
					unit:'',
					visitReasons:'',

				  	visitDate: '请选择',
					expirationTime: '请选择',
					issueDevice: '',
					isUpPhoto:1,
				},
				isLoading: false,
				step:'1',
				deviceList:null,
				indexDevice:[],

			}
		},
		created() {
			this.id = this.$route.query.id;
		},
		methods:  {
			//检测表单
			checkForm() {
				let phoneResult = checkPhone(this.detail.mobilePhone);

				if (!this.detail.name) {
					mui.toast('请输入姓名');
					return false;
				} else if (!this.detail.mobilePhone) {
					mui.toast('请输入手机号码');
					return false;
				}else if (typeof phoneResult == 'string') {
					mui.toast(phoneResult);
					return false;
				}else if (!this.detail.unit) {
					mui.toast('请输入单位名称');
					return false;
				}else if (!this.detail.visitReasons) {
					mui.toast('请填写来访事由');
					return false;
				}else if (this.detail.visitDate=='请选择') {
					mui.toast('请填写生效时间');
					return false;
				}else if (this.detail.expirationTime=='请选择') {
					mui.toast('请填写过期时间');
					return false;
				}else if (this.detail.isUpPhoto&&this.indexDevice.length==0) {
					mui.toast('请选择照片下发设备');
					return false;
				}  else {
					return true;
				}
			},
			submit(){
				if (this.checkForm()) {
					this.detail.issueDevice = this.indexDevice.join(',');
					var btnArray = ['否', '是'];
					var _this = this;
					mui.confirm('确认当操作？', '提示', btnArray, function(e) {
						if (e.index == 1) {
							_this.isLoading = true;
							API_From.add(_this.detail).then(response => {
								_this.$router.push({
									name: 'GuestToInfo',
									query: {
										id: response.id,
										share:'1'
									}
								})

							}).catch(error => {
								_this.isLoading = false;
								mui.toast(error);
							})
						}
					});
				}
			},
			selectDevice(){
				this.step='2'
				document.body.scrollTop = 0;
				document.documentElement.scrollTop = 0;
				if(this.deviceList==null){
					this.getDeviceList();
				}
			},
			goBack() {
				document.body.scrollTop = 0;
				document.documentElement.scrollTop = 0;
				this.step='1'
			},
			//选择时间
			selectStartTime() {
				var _this = this;

				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
				});
				picker.show(function(rs) {
					_this.detail.visitDate = rs.text+':00';
				});
			},
			//选择时间
			selectEndTime() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": _this.detail.visitDate,
				});
				picker.show(function(rs) {
					_this.detail.expirationTime = rs.text+':00';;
				});
			},
			getDeviceList() {
				this.isLoading = true;

				API_From.getDeviceList( ).then(response => {
					this.isLoading = false;
					this.deviceList = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取详情
			getDetail() {
				this.isLoading = true;

				API_From.getDetail(this.id ).then(response => {
					this.isLoading = false;

					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},asynCallBack(){},
		},
		mounted() {
			if(this.id){
				this.detail.id=this.id;
				this.getDetail();
			}


		},


		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

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

<style>
</style>
