<template>
	<view class="operation-body">
		<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="form-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="form-info">
			<view class="form-content ">
				<view class="form-item border-bottom">
					<view class="form-left">
						<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">
						<view class="form-right form-date">
							<uni-datetime-picker
											v-model="datetimerange"
											type="datetimerange"
											rangeSeparator="至"
											:hide-second="true"
										/>
						</view>
					</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" @change="areaChange">
						</uni-data-select>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left">
						<text class="form-left-text">监控相机</text>
					</view>
					<view class="form-right">
						<uni-data-select v-model="formData.vchannel" :localdata="vchannelOptions">
						</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">
						<ba-tree-picker ref="dept_ter_Picker" :multiple='false' @select-change="select_dept_ter_Change" title="请选择属地部门"
								:localdata="depRange" valueKey="id" textKey="name" childrenKey="children" />
						<view  @click="showDeptTerPicker"  style="position: relative;display: flex;">
							<text type="text">{{dept_ter_name}}</text>
							<uni-icons style="position: absolute; right: 0;" type="arrowright" color="#999999"/>
						</view>
					</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">
						<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择业务部门"
								:localdata="depRange" valueKey="id" textKey="name" childrenKey="children"/>
						<view  @click="showPicker"  style="position: relative;display: flex;">
							<text type="text">{{dept_bus_name}}</text>
							<uni-icons style="position: absolute; right: 0;" @click="showPicker" type="arrowright" color="#999999"/>
						</view>
					</view>
				</view>
				<view class="form-item border-bottom">
					<view class="form-left" @click="selectUser">
						<text class="star">*</text>
						<text class="form-left-text">部门协调员</text>
					</view>
					<view class="form-right">
						<ba-tree-picker ref="dcoordinator_Picker" :multiple='false' @select-change="select_coordinator_Change" title="选择部门协调员"
								:localdata="vuex_userRange" valueKey="id" textKey="name" childrenKey="children"  :selectParent='false'/>
						<view  @click="showDcoordinatorPicker"  style="position: relative;display: flex;">
							<text type="text">{{dcoordinator_name}}</text>
							<uni-icons style="position: absolute; right: 0;" @click="showDcoordinatorPicker" type="arrowright" color="#999999"/>
						</view>
					</view>
				</view>
				
				<view class="btn" v-if="showBtns">
					<button type="primary" class="save-btn" @click="saveSubmit">下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	import baTreePicker from "../../comm/ba-tree-picker/ba-tree-picker.vue";
	import nonNullCheck from '../../../utils/nonNullCheck.js';
	import resetData from '../../../utils/common.js';
	export default {
		name: "operation",
		components: {
					baTreePicker
				},
		data() {
			return {
				formData: {
					name: '', //作业简述
					// state: '', //作业状态
					place: '', //具体地点
					start_time: '', //作业开始时间
					end_time: '', //作业结束时间
					state_work: '', //生产状态
					area: null, //作业区域
					dept_ter: '', //属地部门
					dept_bus: '', //业务部门
					coordinator: '', //业务部门协调员
				},
				dept_bus_name:'请选择业务部门',
				dept_ter_name:'请选择属地部门',
				dcoordinator_name:'请选择部门协调员',
				datetimerange: [],
				userRange: [],
				vchannelOptions: [],
				//作业区域
				range: [],
				//生产状态
				stateRange: [{
						value: '运行',
						text: "运行"
					},
					{
						value: '停机',
						text: "停机"
					},
					{
						value: '检修',
						text: "检修"
					},
				],
				//部门
				depRange: [],
			}
		},
		watch: {
			datetimerange(newval) {
				this.formData.start_time = this.datetimerange[0]
				this.formData.end_time = this.datetimerange[1]
			},
		},
		onLoad(params) {
			if(params.operationId){
				this.operationId = params.operationId;
				this.type = params.type;
				this.getOperation();
				if(params.type==='edit'){
					this.showBtns = true;
				}else{
					this.showBtns = false;
				}
			}else{
				this.showBtns = true;
			}
		},
		onShow() {
			this.range = [];
			this.getdept();
			this.getRange();
		},
		methods: {
			showPicker() {
				this.$refs.treePicker._show();
			},
			showDeptTerPicker(){
				this.$refs.dept_ter_Picker._show();
			},
			showDcoordinatorPicker(){
				this.$refs.dcoordinator_Picker._show();
			},
			cancel(){
				this.$refs.treePicker._hide();
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				// debugger;
				// console.log(ids, names);
				this.formData.dept_bus = ids[0];
				this.dept_bus_name = names;
			},
			select_coordinator_Change(ids, names){
				this.formData.coordinator = ids[0];
				this.dcoordinator_name = names;
			},
			select_dept_ter_Change(ids, names){
				this.formData.dept_ter = ids[0];
				this.dept_ter_name = names;
				},
			areaChange(val) {
				this.getVchannelOptions(val)
				this.getAreaDept(val)
			},
			getVchannelOptions(val) {
				if(val==null || val==''){
					return
				}
					this.$u.api.tdevice({area: val, type: 60, page: 0}).then(res=>{
						let vchannelOptions = [];
						let obj = {};
						res.forEach(item => {
							obj = {
								value: null,
								text: ''
							};
							obj.value = item.id;
							obj.text = item.name;
							vchannelOptions.push(obj);
						})
						this.vchannelOptions = vchannelOptions
					})
			},
			getAreaDept(val){
				if(val==null || val==''){
					return
				}
				this.$u.api.areaDetail(val).then(res=>{
					this.formData.dept_ter = res.belong_dept
				})
			},
			//获取工作operation
			getOperation() {
				// debugger;
				let that = this;
				that.$u.api.operationItem(that.operationId).then((res) => {
					that.formData.id = res.id; //
					that.formData.state = res.state;
					that.formData.name = res.name; //
					that.formData.place = res.place; //
					that.formData.state_work = res.state_work; //
					that.formData.area = res.area; //
					that.getVchannelOptions(res.area)
					that.formData.dept_bus = res.dept_bus; //
					that.formData.coordinator = res.coordinator; //
					that.formData.dept_ter = res.dept_ter; //
					that.formData.start_time = res.start_time; //作业开始时间
					that.formData.end_time = res.end_time; //作业结束时间
					if(res.vchannels){
						that.formData.vchannel = res.vchannels[0]
					}
					that.operationName = res.name; //作业
					that.dept_ter_name = res.dept_ter_.name; //属地部门
					that.dept_bus_name = res.dept_bus_.name; //业务部门
					that.dcoordinator_name = res.coordinator_name; //部门协调员
					that.datetimerange = [res.start_time, res.end_time]
				});
			},
			saveSubmit() {
				let that = this;
				if (!that.paramsCheck()) {
					return;
				} else {
					if(this.formData.vchannel){
						this.formData.vchannels = [this.formData.vchannel]
					}
					if(this.formData.id){
						if(this.formData.state!=10){
							uni.navigateTo({
								url: '/pages/workSpace/operation/oplCate?operationId='+this.formData.id
							})
						}else{
							
							this.$u.api.operationUpdate(this.formData.id,this.formData).then(res => {
								let  params = `?operationId=${res.id}`;
								uni.navigateTo({
									url: '/pages/workSpace/operation/oplCate'+params
								})
							})
						}
					}else{
						this.$u.api.operationCreat(this.formData).then(res => {
							let  params = `?operationId=${res.id}`;
							uni.navigateTo({
								url: '/pages/workSpace/operation/oplCate'+params
							})
						})
					}
					
				}
			},
			//获取dept
			getdept() {
				let that = this;
				that.$u.api.deptList({page: 0}).then(res => {
					that.depRange = resetData(res);
				})
			},
			//获取作业区域
			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
				})
			},
			/* 参数验证 */
			paramsCheck() {
				if (!nonNullCheck(this.formData.name)) {
					uni.showToast({
						title: '请填写作业简介',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.start_time)) {
					uni.showToast({
						title: '请选择开始时间',
						icon: "none"
					})
					return false;
				}

				if (!nonNullCheck(this.formData.end_time)) {
					uni.showToast({
						title: '请选择结束时间',
						icon: "none"
					})
					return false;
				}

				if (!nonNullCheck(this.formData.state_work)) {
					uni.showToast({
						title: '请选择生产状态',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.area)) {
					uni.showToast({
						title: '请选择作业区域',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.dept_bus)) {
					uni.showToast({
						title: '请选择业务部门',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.coordinator)) {
					uni.showToast({
						title: '请选择部门协调员',
						icon: "none"
					})
					return false;
				}
				if (!nonNullCheck(this.formData.dept_ter)) {
					uni.showToast({
						title: '请选择属地部门',
						icon: "none"
					})
					return false;
				}
				/* if (phoneRegular.test(this.formData.contactNumber) === false) {
					uni.showToast({
						title: '联系电话格式不对，请重新填写',
						icon: "none"
					})
					return false;
				} */
				return true;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			selectUser(){
				uni.navigateTo({
					url: '/pages/home/employeeSelect'
				})
			},
			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;
	}
	.operation-body {
		background-color: #f3fbff;
		padding-bottom: 20rpx;
	}
	.operation-body>>>uni-input {
		/* height: 100%; */
		font-size: 30rpx;
	}

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

	.form-info {
		width: 720upx;
		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;
	}

	.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>
