<template>
	<view class="my-data">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" :leftText="leftText"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>

		<view class="wrap-view">
			<view class="item">
				<text class="star">*</text>
				<view class="title">姓名</view>
				<view class="content">
					<input type="text" v-model="formData.name" maxlength="20" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<text class="star">*</text>
				<view class="title">手机号</view>
				<view class="content">
					<input type="text" v-model="formData.phone" maxlength="20" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<text class="star">*</text>
				<view class="title">身份证号</view>
				<view class="content">
					<input type="text" v-model="formData.id_number" maxlength="20" placeholder="请输入" />
				</view>
			</view>
			<view class="item" style="height: fit-content;">
				<text class="star">*</text>
				<view class="title">人员照片</view>
				<view style="flex: 3;">
					<u-upload :action="vuex_apifile" :header="upHeader" ref="uUpload"
						max-count="1" :file-list="fileList" @on-success="imgUpSuccess"></u-upload>
<!-- 					<uni-file-picker v-model="formData.photo" file-mediatype="image" mode="grid" file-extname="png,jpg"
						:limit="1" ref="files" :auto-upload="false" @select="select" /> -->
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" class="save-btn" @click="saveVisitor">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					photo: "",
					name: "",
					phone: "",
					id_number: ""
				},
				leftText: '添加人员',
				rparty:'',
				upHeader:'',
				fileList:[]
			}
		},
		onLoad(params) {
			if(params.type == 'edit'){
				this.leftText = '编辑人员';
				this.formData.id = params.id;
			}
			if(params.rparty){
				this.rparty = params.rparty;
			}
			if(this.rparty && this.formData.id){
				this.getRemployee()
			}
			else if(this.formData.id){
				this.getVisitor()
			}
			this.getHeader();
		},
		methods: {
			getHeader(){
				this.upHeader = {Authorization: "Bearer " + this.vuex_token}
			},
			getRemployee(){
				let that = this;
				that.$u.api.remployeeDetail(that.formData.id).then(res=>{
					that.formData = res;
					let obj = {
						url: that.vuex_host+res.photo,
						id:res.id,
					};
					that.fileList.push(obj)
					// that.fileList = [that.vuex_host+res.photo]
				})
			},
			getVisitor(){
				let that = this;
				this.$u.api.visitorDetail(this.formData.id).then(res=>{
					this.formData = res;
					let obj = {
						url: that.vuex_host+res.photo,
						id:res.id,
					};
					that.fileList.push(obj)
					// this.fileList = [this.vuex_host+res.photo];
				})
			},
			saveVisitor(){
				if(this.rparty!==''){
					let obj = {...this.formData};
					obj.rparty = this.rparty;
					if(this.formData.id){
						this.$u.api.remployeeUpdate(obj.id, obj).then(res=>{
							uni.showToast({
								title:'保存成功',
								icon: 'none'
							})
							uni.navigateBack({
								delta: 1
							})
						})
					}else{
						this.$u.api.remployeeCreate(obj).then(res=>{
							uni.showToast({
								title:'保存成功',
								icon: 'none'
							})
							uni.navigateBack({
								delta: 1
							})
						})
					}
					
				}else{
					if(this.formData.id){
						this.$u.api.visitorUpdate(this.formData.id, this.formData).then(res=>{
							uni.showToast({
								title:'保存成功',
								icon: 'none'
							})
							uni.navigateBack({
								delta: 1
							})
						})
						
					}
					else{this.$u.api.visitorCreate(this.formData).then(res=>{
						uni.showToast({
							title:'创建成功',
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					})
					}
				}	
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			select(e) {
				this.filepath = e.tempFilePaths
			},
			imgUpSuccess(data){
				debugger;
				console.log(data)
				this.formData.photo = data.path;
			},
		}
	}
</script>

<style scoped>
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(254deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}

	.my-data {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}

	.nav-bar>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.wrap-view {
		width: 720rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		line-height: 94rpx;
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
	}

	.item {
		border-bottom: 1rpx solid #eeeeee;
		margin: 0rpx 32rpx;
		display: flex;
		margin-top: 20rpx;
	}

	.title {
		color: #212121;
		flex: 1;
	}

	.content {
		flex: 3;
		color: #414141;

	}

	.content input {
		height: 100%;
	}

	.save-btn {
		width: 400rpx;
		height: 80rpx;
		background-color: #2c6fd9;
		border-radius: 40rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #f3fbff;
		margin-top: 21rpx;
	}
</style>
