<template>
	<view class="qingjia-apply">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="作业信息"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>

		<view class="apply-info">
			<view class="form-left-text">
				<text class="star">*</text>
				<text>作业简介</text>
			</view>
			<textarea class="apply-reason-text" v-model="formData.name" maxlength="250" placeholder="请输入" />
		</view>
		<view class="apply-info">
			<view class="form-content ">
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">具体地点</text>
					</view>
					<view class="form-right">
						<input type="text" v-model="formData.place" maxlength="50" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">开始时间</text>
					</view>
					<view class="form-right form-date">
						<picker mode="date" :value="formData.start_time" @change="bindStartDateChange">
							<view class="uni-input">{{formData.start_time}}</view>
						</picker>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">结束时间</text>
					</view>
					<view class="form-right form-date">
						<picker mode="date" :value="formData.end_time" @change="bindEndDateChange">
							<view class="uni-input">{{formData.end_time}}</view>
						</picker>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">生产状态</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.state_work" :localdata="stateRange">
						</uni-data-select>
					</view>
				</view>

				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">作业区域</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.area" :localdata="range">
						</uni-data-select>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">业务部门</text>
					</view>
					<view class="form-right">
						<uni-data-picker placeholder="请选择业务部门" popup-title="请选择业务部门" :localdata="depRange"
							v-model="formData.dept_bus" >
						</uni-data-picker>
					</view>
				</view>

				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">部门协调员</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.coordinator" :localdata="userRange">
						</uni-data-select>
					</view>
				</view>

				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="star">*</text>
						<text class="form-left-text">属地部门</text>
					</view>
					<view class="form-right">
						<uni-data-picker placeholder="请选择属地部门" popup-title="请选择属地部门" :localdata="depRange"
							v-model="formData.dept_ter" @change="onchange" @nodeclick="onnodeclick"
							@popupopened="onpopupopened" @popupclosed="onpopupclosed">
						</uni-data-picker>
					</view>
				</view>

				<view class="btn">
					<button type="default" class="save-btn" @click="saveSubmit">下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	var promise;
	export default {
		name: "work",
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				formData: {
					name: '', //作业简述
					// state: '', //作业状态
					place: '', //具体地点
					start_time: currentDate, //作业开始时间
					end_time: currentDate, //作业结束时间
					state_work: '', //生产状态
					belong_dept: '', //所属部门
					area: '', //作业区域
					dept_ter: '', //属地部门
					dept_bus: '', //业务部门
					coordinator: '', //业务部门协调员
				},


				publishRangeCon: '',
				menuId: "",
				itemId: "",
				detail: false,
				principal: {},
				pkId: '',
				isDisabled: false,
				btnShow: true,
				lsId: "",
				sta: null,
				eventStatus: "",
				execId: '',
				// 2022年3月20日
				result: [],
				// 文件进度
				imgFlag: false,
				//文件下载
				downFiles: {},
				timeShow: false,
				// 发布网站
				releaseWeb: [],
				createTimeFromShow: false,
				createTimeFromList: [],
				createTimeFromCon: '',
				userRange: [],
				//作业区域
				range: [],
				//生产状态
				stateRange: [{
						value: 0,
						text: "运行"
					},
					{
						value: 1,
						text: "停机"
					},
					{
						value: 2,
						text: "检修"
					},
				],
				//部门
				depRange: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(params) {

		},
		onShow() {
			this.getdept();
			this.getRange();
			this.getUserRange();
			this.range = [];
		},
		methods: {
			saveSubmit() {
				console.log(this.formData)
				this.formData.start_time = new Date(this.formData.start_time).toISOString();
				this.formData.end_time = new Date(this.formData.end_time).toISOString();
				this.$u.api.operationCreat(this.formData).then(res => {
					debugger;
					let  params = `?operationId=${res.id}`;
					uni.navigateTo({
						url: '/pages/workSpace/list/oplCate'+params
					})
				})
			},
			//获取dept
			getdept() {
				let that = this;
				that.$u.api.deptList({page: 0}).then(res => {
					that.depRange = that.redata(res);
				
					console.log(that.depRange)
				})
			},
			//获取作业区域
			getRange() {
				this.$u.api.areaLists({page: 0}).then(res => {
					let range = [];
					let obj = {};
					res.forEach(item => {
						obj = {value: null,text: ''};
						obj.value = item.id;
						obj.text = item.name;
						range.push(obj);
					})
					this.range = range
				})
			},
			//获取用户
			getUserRange() {
				this.$u.api.userList({page: 0}).then(res => {
					let user = [];
					let obj = {};
					res.forEach(item => {
						obj = {value: null,text: ''};
						obj.value = item.id;
						obj.text = item.name;
						user.push(obj);
					})
					this.userRange = user
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindStartDateChange: function(e) {
				this.formData.start_time = e.detail.value
			},
			bindEndDateChange: function(e) {
				this.formData.end_time = e.detail.value
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				//         return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s;
				return y + '-' + MM + '-' + d;
			},
			createTimeToFn(e) {
				that.formData.createTimeTo = e.year + '-' + e.month + '-' + e.day;
			},
			createTimeFromYesFn(e) {
				console.log(e)
				var index = e[0]
				that.formData.createTimeFrom = that.createTimeFromList[index].id
				that.createTimeFromCon = that.createTimeFromList[index].label
			},

			redata(postList) {
				let posts = [];
				postList.forEach((item) => {
					let obj = new Object();
					obj = {
						...item
					};
					obj.value = item.id;
					obj.text = item.name;
					obj.parentId = item.parent;
					posts.push(obj);
				});
				let obj = posts.reduce((res, v) => ((res[v.id] = v), res), {}); //Object
				let arr = [];
				for (let item of posts) {
					if (item.parentId == null) {
						arr.push(item);
						continue;
					}
					let parent = obj[item.parentId];
					parent.children = parent.children ? parent.children : [];
					parent.children.push(item);
				}
				console.log(arr);
				return arr;
			},
			onSubmit(type) {
				if (!this.paramsCheck()) return;

				if (this.detail && !this.formData.id) {
					uni.showToast({
						title: '缺少pkid',
						icon: "none"
					})
					return;
				}
				this._updatePrintList(this.formData, type);
			},
			/* 参数验证 */
			paramsCheck() {
				var typeArr = [];
				for (let i = 0; i < that.releaseWeb.length; i++) {
					if (that.releaseWeb[i].checked == true) {
						typeArr.push(that.releaseWeb[i].id)
					}
				}
				that.formData.typeList = typeArr;

				if (!nonNullCheck(this.formData.itemInfo.itemName)) {
					uni.showToast({
						title: '请输入标题',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.itemInfo.applicationDept)) {
					uni.showToast({
						title: '请选择申请部门',
						icon: "none"
					})
					return false;
				}

				if (!nonNullCheck(this.formData.createTimeTo)) {
					uni.showToast({
						title: '请选择申请日期',
						icon: "none"
					})
					return false;
				}

				if (!nonNullCheck(this.formData.writer)) {
					uni.showToast({
						title: '请填写撰稿人',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.mailbox)) {
					uni.showToast({
						title: '请填写联系邮箱',
						icon: "none"
					})
					return false;
				}
				if (emailRegular.test(this.formData.mailbox) === false) {
					uni.showToast({
						title: '联系邮箱格式不对，请重新填写',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.contactNumber)) {
					uni.showToast({
						title: '请填写联系电话',
						icon: "none"
					})
					return false;
				}
				if (phoneRegular.test(this.formData.contactNumber) === false) {
					uni.showToast({
						title: '联系电话格式不对，请重新填写',
						icon: "none"
					})
					return false;
				}
				if (that.formData.typeList.length == 0) {
					uni.showToast({
						title: '请选择发布网站',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.createTimeFrom)) {
					uni.showToast({
						title: '请选择信息有效期',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.releaseColumn)) {
					uni.showToast({
						title: '请填写发布栏目',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.newsInformation)) {
					uni.showToast({
						title: '请填写新闻信息',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.reason)) {
					uni.showToast({
						title: '请填写申请理由',
						icon: "none"
					})
					return false;
				}


				return true;
			},

			/* 保存数据 */
			_updatePrintList(data, type) {
				this.formData.createTimeTo = this.formData.createTimeTo + ' ' + '00:00:00'
				this.isDisabled = true;
				let method = "post";
				if (this.detail) {
					/* 是详情页，就使用put请求，申请人自回显处得到。否则为新增页，申请人为当前登录人*/
					if (this.eventStatus == 4) { //未提交的数据
						method = "put";
					} else {
						method = "post";
						const newData = JSON.parse(JSON.stringify(data))
						delete newData.newsBulletinId;
						data = newData;
					}
				} else {
					this.formData.itemInfo.applicant = this.userId;
				}
				bulletinNew(method, data).then(res => {

					if (res.statusCode === 200) {
						this.itemId = res.data.data.itemId;
						if (type.indexOf("提交") > -1) {
							this.$refs.submitApproval.submitApproval(this.itemId); /* 创建审批数据  */
						} else {
							/* 临时保存，不需要审批的数据，直接跳转*/
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								duration: 2000,
								success() {
									setTimeout(function() {
										this.isDisabled = false;
										uni.navigateBack({
											delta: 1
										})
									}, 2000)
								}
							})


						}
					} else {
						this.formData.createTimeTo = this.formData.createTimeTo.substring(0, 10);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.formData.createTimeTo = this.formData.createTimeTo.substring(0, 10);
					uni.showToast({
						title: '网络异常, 请求失败',
						icon: 'none'
					})
				})
			},

			publishChange(e) {
				var i = e.detail.value;
				that.publishRangeCon = that.publishRange[i].name;
				that.formData.scopeOfPublication = that.publishRange[i].id;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			/*  获取部门列表 */
			_getDeptListMenu() {
				getDeptListMenu().then(res => {
					if (res.statusCode === 200) {
						let list = res.data.data;
						this.depRange = list;

						// 2022年3月20日
						this.result = [];
						if (list !== undefined && list !== null && list !== "" && Array.isArray(list) && list
							.length > 0) {
							this.result = flatten(list);
						}


					} else {
						if (res.data.message == "token无效") return;
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '网络异常, 请求失败',
						icon: 'none'
					})
				})
			},
			onPopupclosed() {
				if (this.lsId) {
					this.formData.itemInfo.applicationDept = this.lsId;
				}
			},
			onNodeClick(e) {
				if (e.id !== undefined && e.id !== null && e.id !== "") {
					this.lsId = e.id;


					// 2022年3月20日
					const currObj = this.result.find((item) => {
						return item.id == this.lsId
					});
					if (currObj !== undefined && currObj !== null && currObj !== "") {
						console.log(currObj);
						if (currObj.children === null || currObj.children === undefined || currObj.children === "") {
							this.formData.itemInfo.applicationDept = this.lsId;
						}
					}



				}
			},
			/* 选择部门后得到最后部门名称 */
			onchange(e) {
				const value = e.detail.value;
				let lastDepName = "";
				if (value.length > 0) {
					lastDepName = value[value.length - 1].text;
				}
				this.subscribeDeptName = lastDepName || "";
			},
			depChange(e) {
				const idx = e.detail.value;
				this.selectedDep = this.depRange[idx].name;
			},
			tiaoxiuChange(e) {
				const idx = e.detail.value;
				this.selectedtiaoxiu = this.tiaoxiuRange[idx].name;
				this.selectedtiaoxiuId = this.tiaoxiuRange[idx].id;
				that.formData.compensatoryLeave = this.tiaoxiuRange[idx].id;
			},

			typeChange(e) {
				const idx = e.detail.value;
				this.selectedtype = this.typeRange[idx].label;
				this.selectedtypeId = this.typeRange[idx].id;
				that.formData.leaveType = this.typeRange[idx].id;
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
		}
	}
</script>

<style scoped>
	/* 主体 */
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
	}
	.qingjia-apply {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}
	.qingjia-apply>>>uni-input {
		/* height: 100%; */
		font-size: 30rpx;
	}

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

	.apply-info {
		width: 720rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 25rpx 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.border-bottom {
		border-bottom: 1rpx solid #eeeeee;
	}

	.star {
		color: red;
	}

	.top-title-text {
		padding-left: 24rpx;
		position: relative;
		font-family: PingFang-SC-Medium;
		font-size: 34rpx;
		line-height: 72rpx;
		color: #383838;
	}

	.top-title-text::before {
		content: "";
		width: 6rpx;
		height: 29rpx;
		background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%);
		border-radius: 3rpx;
		display: block;
		position: absolute;
		left: -4rpx;
		top: 22rpx;
	}

	.form-item {
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		height: 200rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.form-left-text {
		color: #212121;
		margin-bottom: 33rpx;
	}

	.form-left {
		width: 100%;
	}

	.form-right {
		margin-left: 20rpx;
		flex: 1;
		color: #414141;
	}

	.form-right input {
		font-size: 30rpx;
	}

	.form-date>>>.uni-date__x-input {
		height: 97rpx;
		font-size: 30rpx;
	}

	.form-date>>>.uni-icons {
		display: none;
	}


	.apply-reason-text {
		width: 653rpx;
		height: 179rpx;
		background-color: #f6f8fc;
		border: solid 1rpx #e5e5e5;
		margin-top: 21rpx;
		padding: 14rpx 24rpx;
		font-size: 26rpx;
		box-sizing: border-box;
	}

	.apply_require {
		margin-top: 0rpx !important;
	}

	.form-right {
		flex: 1;
		color: #414141;
	}

	/*部门*/
	uni-data-picker {
		width: 100%;
		border: none !important;
	}


	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>
