<template>
<div id="app">
	<loading :visible="isLoading"></loading>
	
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">携物出厂申请</h1>
			</header>
			<div class="mui-content vongi-fx vongi-qingjiadt margin60">
                <div class="mui-content-padded">
                    <form class="mui-input-group vongi-editme">
                        <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?subForm.date:'请选择'" @click="selectData()"
							
							type='button' style="width:65%">
                                2021-03-01
                            </button>
                        </div>
                        <div class="mui-input-row">
                            <label style="width:100%"><i class="colorfe616c">*</i>&nbsp;申请理由及物品清单</label>
                            <textarea id="textarea" rows="8" placeholder="请填写内容"  v-model="subForm.content"></textarea>
                        </div>
                    </form>
                    <div class="vongi-yqsb vongi-wordcard">
                        <h5>图片附件（最多上传5张照片）</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><i class="colorfe616c"></i>&nbsp;审批人</label>
                            <span>{{examinePerson.name}}</span>
                        </div>
                    </form>
                </div>
				
			</div>
			<div class="fyy-footer">
				<div class="bindfyy-btn">
					
					 <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: '携物出厂申请',
				
				id:"",
				isLoading: false,
				 
				subForm: {
					date: '',
					images:"",
					content: '',
				 
					formId:"commerceWork",
				},
				examinePerson:{},
				picList: [],
			}
		},
		created() {
			this.subForm.date = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			this.id = this.$route.query.id;

		},
		methods: {
			carryThingsDetail() {
			if(!this.id){
				return;
			}
				this.isLoading = true;
				
				API.carryThingsDetail(this.id).then(response => {
					// this.adjustShiftDetail = response;
					// this.subForm.ids=this.id;
					this.isLoading = false;
					
					this.subForm.ids=this.id;
					this.subForm = {
						... this.subForm ,
						...response
					};
					
					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);
			 	})
			 },
			  
			 
			//选择日期
			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;
					
					picker.dispose();
					
				});
			},
		 
			//表单检测
			checkFrom() {
				
				if (!this.subForm.content) {
					mui.toast('请填写内容');
					return false;
				}  else {
					return true;
				}
				
				
				
				
			},
			//提交
			submit(status) {
				this.subForm.draft=status;
				
				if(!this.examinePerson.name){
					return;
				}
				this.subForm.images = this.picList.join(',');
				
				if (this.checkFrom()) {
					this.isLoading = true;
					//var obj=this.subForm;
					
					//obj.date=this.subForm.date+" 00:00:00"
					
					API.submitCarryThings(this.subForm).then(response => {
						this.isLoading = false;
						
						
						
						if(status){
							mui.toast('提交成功');
							this.$router.replace({
							    name: "XsyApprovalInfo",
								
							    query: {
									formId:"commerceWork",
									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() {
			  
			//获取微信配置
			WxJsApi.getWxConfig();
			this.carryThingsDetail();
			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>
