<template>
	<view id="warp">
		<view class="t_login_passList dispalyFlexRow">
			<view class="input_icon"><text style="color:red;">*</text>工程名称：</view>
			<input class="input_css" v-model="gcInfo.projectName" border="none" placeholder="请输入工程名称"></input>
		</view>
		<view class="t_login_passList dispalyFlexRow" @tap="onChangePersonnel('ywy')">
			<view class="input_icon">业务员：</view>
			<input class="input_css3" v-model="gcInfo.ywy[0].employeeName" disabled border="none"
				placeholder="请选择"></input>
			<view class="code3">
				<uni-icons type="forward" color="#939393" size="20"></uni-icons>
			</view>
		</view>
		<view class="t_login_passList dispalyFlexRow" @tap="onChooseLocation">
			<view class="input_icon">工程地址：</view>
			<input class="input_css3" v-model="gcInfo.address" disabled border="none" placeholder="请选择"></input>
			<view class="code3">
				<uni-icons type="forward" color="#939393" size="20"></uni-icons>
			</view>
		</view>
		<view class="t_login_passList dispalyFlexColumn">
			<view class="t_login_passList2" @tap="onChangePersonnel('bdr')">
				<view class="input_icon">工地联系人(<text style="color: #18BC37;">报单人</text>)：</view>
				<input class="input_css3" disabled border="none" placeholder="请选择"></input>
				<view class="code3">
					<uni-icons type="forward" color="#939393" size="20"></uni-icons>
				</view>
			</view>
			<view class="people_list">
				<view class="p_list_item" v-for="(item,index) in gcInfo.baodan" :key="index">
					{{item.employeeName}} ：{{item.employeePhone}}
					<uni-icons @tap="clearBaoDan(index)" style="margin-left: 10rpx;" type="minus" size="24" color="red">
					</uni-icons>
				</view>
			</view>
		</view>
		<view class="t_login_passList dispalyFlexRow" @tap="onChangePersonnel('sgdw')">
			<view class="input_icon">归属施工单位：</view>
			<input class="input_css3" v-model="gcInfo.sgdw[0].constructionName" disabled border="none"
				placeholder="请选择"></input>
			<view class="code3">
				<uni-icons type="forward" color="#939393" size="20"></uni-icons>
			</view>
		</view>
		<view class="t_login_passList dispalyFlexRow">
			<view class="input_icon">启用状态：</view>
			<view class="input_img">
				<switch :checked="gcInfo.isEnabled" color="#007AFF" @change="change" />
			</view>
		</view>
		<view class="btn_css">
			<button class="btn" @tap="nextHandle">保存</button>
		</view>
	</view>
</template>
<script>
	const {
		urlList,
		https
	} = require('@/static/api');
	export default {
		data() {
			return {
				gcInfo: {
					projectName: '',
					ywy: '', //业务员
					address: '',
					longitude:0,
					latitude: 0,
					baodan: [], //报单人
					sgdw:[],//施工单位
					isEnabled: true,
				},
			};
		},
		onLoad(options) {
			const _that = this;
			const {id} = options;
			if (id) {
				_that.id = id;
				https(urlList.addEngineering + '/' + _that.id, 'GET', '', '').then(data => {
					this.gcInfo.address = data.data.address
					this.gcInfo.isEnabled = data.data.isEnabled
					this.gcInfo.latitude = data.data.latitude
					this.gcInfo.longitude = data.data.longitude
					this.gcInfo.projectName = data.data.projectName
					this.gcInfo.ywy = [{
						employeeName: data.data.salesman,
						userId: data.data.salesmanId
					}]
					this.gcInfo.sgdw = [{
						constructionName: data.data.constructionName,
						id: data.data.constructionId,
						userId: data.data.constructionId
					}]
					data.data.projectPeoples.forEach(item => {
						var obj = {
							userId: item.projectPersonId,
							employeeName: item.projectPersonName,
							employeePhone: item.projectPersonPhone
						}
						this.gcInfo.baodan.push(obj)
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1500
					})
				})
				uni.setNavigationBarTitle({
					title: '工程编辑'
				});
			}
		},
		methods: {
			change(e){
				this.gcInfo.isEnabled=e.detail.value
			},
			// 保存
			nextHandle() {
				let {
					projectName,
					ywy,
					address,
					longitude,
					latitude,
					baodan,
					sgdw
				} = this.gcInfo;
				if (projectName == '') {
					uni.showToast({
						title: '请填写工程名称',
						icon: 'none',
					})
					return;
				};
				this.id ? this.putAddUser('put') : this.putAddUser('add')
			},
			// 修改、新增 人员信息
			putAddUser(type) {
				let postData = {
					projectName: this.gcInfo.projectName,
					isEnabled: this.gcInfo.isEnabled,
					latitude: this.gcInfo.latitude,
					longitude: this.gcInfo.longitude,
					address: this.gcInfo.address
				};
				// 业务员
				if(this.gcInfo.ywy.length>0){
					postData.salesmanId=this.gcInfo.ywy[0].userId
				};
				// 施工单位
				if(this.gcInfo.sgdw.length > 0){
					postData.constructionId = this.gcInfo.sgdw[0].id;
					postData.constructionName = this.gcInfo.sgdw[0].constructionName;
				}else{
					postData.constructionId = 0;
					postData.constructionName = "";
				};
				let projectPersons = [];
				this.gcInfo.baodan.forEach(item => {
					let obj = {
						projectPersonId: item.userId,
						projectPersonName: item.employeeName||item.userName,
						projectPersonPhone: item.employeePhone||item.userPhone
					}
					projectPersons.push(obj)
				});
				postData.projectPersons = projectPersons;
				if (type == 'add') {
					console.log(postData)
					https(urlList.addEngineering, 'POST', postData, '正在新增...').then(data => {
						console.log(data)
						uni.showToast({
							title: '新增成功',
							icon: 'none',
							duration: 1500
						})
						setTimeout( ()=> {
							uni.navigateBack();
						},1500)
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 1500
						})
					})
				} else {
					postData.id = this.id;
					https(urlList.addEngineering, 'PUT', postData, '正在修改...').then(data => {
						const that = this;
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						setTimeout( ()=> {
							uni.navigateBack();
						},1500);
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 1500
						})
					});
				}
			},
			// 选择业务员/工地联系人（报单人）
			onChangePersonnel(txt) {
				console.log(txt)
				if (txt == 'ywy') {
					uni.navigateTo({
						url: '/pages/select-personnel/select-personnel?type=' + txt + '&selectList=' + JSON.stringify(this.gcInfo.ywy)
					})
				} else if (txt == 'bdr'){
					uni.navigateTo({
						url: '/pages/select-personnel/select-personnel?type=' + txt + '&selectList=' + JSON.stringify(this.gcInfo.baodan)
					})
				}else if (txt == 'sgdw'){
					uni.navigateTo({
						url: '/pages/select-personnel/select-personnel?type=' + txt + '&selectList=' + JSON.stringify(this.gcInfo.sgdw)
					})
				}
				

			},
			// 删除报单人
			clearBaoDan(idx) {
				this.gcInfo.baodan.splice(idx, 1);
			},
			// 选择工程地址
			onChooseLocation() {
				const _that = this;
				uni.chooseLocation({
					// longitude: _that.gcInfo.longitude,
					// latitude : _that.gcInfo.latitude,
					success: function(res) {
						let {longitude,latitude} = res;
						https(urlList.getLocationName + '/' + longitude + '/' + latitude, 'GET', '', '').then(data => {
								_that.gcInfo.address = data.data;
								_that.gcInfo.longitude = longitude;
								_that.gcInfo.latitude = latitude;
						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none',
								duration: 1500
							})
						})
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	#warp {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.dispalyFlexRow {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	
	.dispalyFlexColumn {
			display: flex;
			flex-direction: column;
		}

		.t_login_passList {
			width: 720rpx;
			padding: 10rpx 0rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.input_icon {
				width: 270rpx;
				// border: 1px solid red;
				margin-top: 5rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 10rpx;
			}

			.input_css {
				height: 70rpx;
				width: 400rpx;
				// text-align: right;
				display: inline-block;
			}

			.input_css3 {
				height: 70rpx;
				width: 350rpx;
				text-align: right;
				display: inline-block;
			}

			.code3 {
				margin-left: 20rpx;
				width: 50rpx;
				display: flex;
				justify-content: flex-end;
			}

			.input_img {
				width: 430rpx;
				display: flex;
				justify-content: flex-end;
			}

			.t_login_passList2 {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.input_icon {
					width: 470rpx;
					// border: 1px solid red;
					margin-top: 5rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-left: 10rpx;
				}

				.input_css3 {
					height: 70rpx;
					width: 150rpx;
					text-align: right;
					display: inline-block;
				}

				.code3 {
					margin-left: 20rpx;
					width: 50rpx;
					display: flex;
					justify-content: flex-end;
				}
			}

			.people_list {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.p_list_item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 20rpx;
					margin-top: 10rpx;
					color: #4f4f4f;
				}
			}
		}

		.no_center {
			align-items: flex-start;
		}

		.btn_css {
			width: 700rpx;
			position: fixed;
			bottom: 10rpx;
			left: 25rpx;
			display: block;

			.btn {
				background-color: #1B64F8FF;
				color: white;
				margin-bottom: 48rpx;
			}
		}
	}
</style>
