<template>
	<div>
		<back :title="titlename"></back>
		<!-- 表单 -->
		<van-form @submit="onSubmit">
		  <van-field v-model="name" class="m" name="中文名" label="中文名" placeholder="请填写中文名"/>
		  <van-field v-model="englishName" type="" name="英文名" label="英文名" placeholder="请填写英文名"/>
		  <van-field v-model="email" class="m" type="" name="邮箱地址" label="邮箱地址" placeholder="请填写邮箱地址"/>
		  <van-field v-model="phone" class="m" type="number" name="手机号" label="手机号" placeholder="请填写手机号"/>
      <van-field v-model="phoneOne"  type="number" name="备用手机号1" label="备用手机号1" placeholder="请填写备用手机号1"/>
      <van-field v-model="phoneTwo"  type="number" name="备用手机号2" label="备用手机号2" placeholder="请填写备用手机号2"/>
      <van-field v-model="phoneThree"  type="number" name="备用手机号2" label="备用手机号3" placeholder="请填写备用手机号3"/>
      <van-field v-model="telephone"  type="number" name="座机号" label="座机号" placeholder="请填写座机号"/>
      <van-field v-model="telephone2"  type="number" name="座机-分机号" label="座机-分机号" placeholder="请填写座机-分机号"/>

		  <van-field v-model="stationNum" type="" name="工号" label="工号" placeholder="请填写工号"/>

		  <van-field readonly clickable :value="company" class="m" name="公司" label="公司" placeholder="请选择公司" @click="showPicker = true"/>
		  <van-popup v-model="showPicker" position="bottom">
		    <van-picker
		      show-toolbar
		      :columns="companyList"
			  value-key="company"
		      @confirm="onConfirm"
		      @cancel="showPicker = false"
		    />
		  </van-popup>

		  <van-field readonly clickable :value="department" class="m" name="部门" label="部门" placeholder="请选择部门" @click="showPicker2 = true"/>
		  <van-popup v-model="showPicker2" position="bottom">
		    <van-picker
		      show-toolbar
		      :columns="departmentList"
			  value-key="department"
		      @confirm="onConfirm2"
		      @cancel="showPicker2 = false"
		    />
		  </van-popup>

		  <van-field readonly clickable :value="costCenterName"  name="成本中心" label="成本中心" placeholder="请填写成本中心" @click="showPicker3 = true"/>
		  <van-popup v-model="showPicker3" position="bottom">
		    <van-picker
		      show-toolbar
		      :columns="costCenterNameList"
			  value-key="costCenterName"
		      @confirm="onConfirm3"
		      @cancel="showPicker3 = false"
		    />
		  </van-popup>

		  <van-field v-model="build" type="" name="幢/座" label="幢/座" placeholder="请填写幢/座"/>
		  <van-field v-model="floor" type="" name="楼层" label="楼层" placeholder="请填写楼层"/>
		  <van-field v-model="seat" type="" name="座位" label="座位" placeholder="请填写座位"/>
		  <van-field v-model="remark" type="" name="备注" label="备注" placeholder="请填写备注"/>
		  <div style="margin: 16px;">
		    <van-button round block type="info" native-type="submit">保存</van-button>
		  </div>
		</van-form>
	</div>
</template>

<script>
	import { Form,Toast } from 'vant'
	export default{
		data(){
			return {
				titlename:"新增临时收件人",
				name:"",
				englishName:"",
				email:"",
				phone:"",
        phoneOne:"",
        phoneTwo:"",
        phoneThree:"",
        telephone:"",
        telephone2:"",
				stationNum:"",
				build:"",
				floor:"",
				seat:"",
				remark:"",
				company:"",
				companyList:[],
				showPicker:false,
				department:'',
				departmentList:[],
				showPicker2:false,
				costCenterName:'',
				costCenterId:'',
				costCenterNameList:[],
				showPicker3:false,
				companyid:'',//公司id
			}
		},
		created:function(){
			this.isLogin();
			this.openid = this.$store.state.openId;
			this.getData();
		},
		methods:{
			getData(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});

				this.$http.post(this.$store.state.host+"/solic/getTemporaryList.do",{mailRoomId: localStorage.getItem('roomId')},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.companyList = res.body.companyList;
							this.departmentList = res.body.departList;
							this.costCenterNameList = res.body.costCenterList;
						}
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
			//所属公司
			onConfirm(val){
				this.company = val.company;
				this.companyid = val.user_id;
				this.showPicker = false;
			},
			//部门
			onConfirm2(val){
				this.department = val.department;
				this.showPicker2 = false;
			},
			//成本中心
			onConfirm3(val){
				this.costCenterName = val.costCenterName;
				this.costCenterId = val.id;
				this.showPicker3 = false;
			},
			//提交
			onSubmit(){
				if(this.name==''||this.name==undefined){
					Toast('请填写中文名');
					return;
				}
				if(this.email==''||this.email==undefined){
					Toast('请填写邮箱地址');
					return;
				}
				if(this.phone==''||this.phone==undefined){
					Toast('请填写手机号');
					return;
				}
				if(this.company==''||this.company==undefined){
					Toast('请选择公司');
					return;
				}
				if(this.department==''||this.department==undefined){
					Toast('请选择部门');
					return;
				}
				// if(this.costCenterName==''||this.costCenterName==undefined){
				// 	Toast('请选择成本中心');
				// 	return;
				// }
				this.$http.post(this.$store.state.host+"/solic/saveTemporaryEmployee",{
					mailRoomId: localStorage.getItem('roomId'),
					name:this.name,//中文名
					companyId:this.companyid,
					englishName:this.englishName,//英文名
					email:this.email,
					//sex
					phone:this.phone,
          phoneOne:this.phoneOne,
          phoneTwo:this.phoneTwo,
          phoneThree:this.phoneThree,
					telephone:this.telephone,
          telephone2:this.telephone2,
					stationNum:this.stationNum,//工号
					company:this.company,//所属公司
					costCenterName:this.costCenterName,//成本中心
					costCenterId:this.costCenterId,
					department:this.department,//部门
					build:this.build,
					floor:this.floor,
					seat:this.seat,//座位号
					remark:this.remark
				},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							Toast("保存成功");
							let that = this;
							setTimeout(function(){
								that.$router.push({path:'/Sjdj',query:{}});
							},500)
						}else{
							Toast('保存失败!')
						}
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.van-form{
	  .van-button--info{
	    background-color: #00c4b8;
	    border: 1px solid #00c4b8;
	    border-radius: 5px;
	  }
	  .m .van-field__label::before{
		  content:"*";
		  color: red;
	  }
	  .van-cell{
	    font-size: .26rem;
	    }
	  .textarea{
	    font-size: .26rem;
	    padding: 10px 16px;
	    color: #646566;
	    textarea{
	      width: 98%;
	      height: 150px;
	      border-color: #e5e5e5;
	      color: #999999;
	      margin-top: 16px;
	      padding: 10px 1%;
	    }
	  }
	}
	/deep/.van-field__control{
	  text-align: right;
	}
</style>
