<template>
	<view class="order-up-container">
		<view class="order-tips">
			<span class="order-imp">*</span>
			工单信息填写
		</view>
		<scroll-view class="content" scroll-y="true" scroll-top=0 enable-back-to-top>
			<u-form :model="form" ref="uform" :rules="rules" label-align='left' label-width="170">
				<u-form-item label="*电站名称" prop="stationName">
					<u-input type="select" :select-open="siteSelectShow" placeholder="请选择换电站" v-model="form.stationName"
						@click="siteSelectShow = true" />
				</u-form-item>
				<u-form-item label="*设备名称" prop="deviceName">
					<u-input type="select" :select-open="nameSelectShow" placeholder="请选择设备名称" v-model="form.deviceName"
						@click="nameSelectShow = true" />
				</u-form-item>
				<u-form-item label="设备编号">
					<u-input v-model="form.sn" placeholder="请输入设备编号" />
				</u-form-item>
				<u-form-item label="故障等级">
					<u-input type="select" :select-open="levelSelectShow" placeholder="请选择故障等级" v-model="form.levelText"
						@click="levelSelectShow = true" />
				</u-form-item>
				<u-form-item label="*发生时间" prop="occurrenceTime">
					<u-input type="select" :select-open="show" placeholder="请选择发生时间" v-model="form.occurrenceTime"
						@click="show = true" />
				</u-form-item>
				<u-form-item label="处理人员">
					<u-input type="select" :select-open="showPerson" placeholder="请选择处理人员" v-model="form.nextPerson"
						@click="personHandle" />
				</u-form-item>
				<u-form-item label="*问题描述" prop="problemTitle" :label-position="'top'">
					<u-input placeholder="请输入问题描述 不超过15个字" :maxlength="15" v-model="form.problemTitle" />
				</u-form-item>
				<u-form-item label="*问题记录" prop="deviceProblem" :label-position="'top'">
					<u-input type="textarea" placeholder="请输入问题记录 不超过200个字" :maxlength="200"
						v-model="form.deviceProblem" />
				</u-form-item>
				<u-form-item label="问题图片(不超过5张,20M以内)" prop="intro" :label-position="'top'">
					<u-upload action="#" multiple :fileList="fileList" @on-choose-complete="onChooseComplete"
						:auto-upload="false" @on-remove="deletePic" name="1" :maxCount="5"></u-upload>
				</u-form-item>
				<u-form-item label="问题视频(不超过1个,50M以内)" prop="intro" :label-position="'top'">
					<view class="uploadv" @click="onVideoChooseComplete" v-if="!form.video">
						<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
						<view class="u-add-tips">选择视频</view>
					</view>
					<view class="uploadv" v-if="form.video">
						<video class="u-add-btn" style="width: 100%;" :src="form.video"></video>
						<image class="u-add-img" src="@/static/index-delete.png" alt="" @click="delHandle" />
					</view>
				</u-form-item>
			</u-form>
		</scroll-view>
		<u-select :list="siteSelectList" v-model="siteSelectShow" value-name="stationCode" label-name="stationName"
			@confirm="siteSelectCallback"> </u-select>
		<u-select :list="levelSelectList" v-model="levelSelectShow" value-name="dictValue" label-name="dictLabel"
			@confirm="levelSelectCallback"> </u-select>
		<u-select :list="personSelectList" v-model="showPerson" value-name="userId" label-name="nickName"
			@confirm="personSelectCallback"> </u-select>
		<u-select :list="nameSelectList" v-model="nameSelectShow" value-name="remark" label-name="dictLabel"
			@confirm="nameSelectCallback"> </u-select>
		<u-picker v-model="show" mode="time" :params="params" end-year="2050" :defaultTime="defaultTime"
			@confirm="timeHandle"></u-picker>
		<u-button type="primary" class="commit-button" @click="submiHandle" :disabled="isClick">上 报</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//表单对象
				form: {
					id: null,
					stationName: null,
					stationCode: null,
					deviceName: null,
					sn: null,
					level: null,
					levelText: null,
					occurrenceTime: null,
					nextPerson: null,
					nextId: null,
					source: 99,
					problemTitle: null,
					deviceProblem: null,
					attachment: '',
					video: null,
					img: [],
					device: null,
				},
				//时间picker 默认值
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					// second: true,
					// timestamp: true
				},
				//图片上传url
				action: '',
				//图片上传列表
				fileList: [],
				//时间默认时间开始值
				defaultTime: '',
				//是否打开时间控件
				show: false,
				//验证规则对象
				rules: {
					stationName: [{
						required: true,
						message: '请选择站点',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					deviceName: [{
						// min: 5, 
						// message: '简介不能少于5个字', 
						trigger: ['change', 'blur'],
						message: '请选择设备名称',
						required: true,
					}],
					sn: [{
						// min: 5, 
						// message: '简介不能少于5个字', 
						trigger: ['change', 'blur'],
						message: '请选择输入设备编号',
						required: true,
					}],
					levelText: [{
						required: true,
						message: '请选择故障等级',
						trigger: ['change', 'blur'],
					}],
					occurrenceTime: [{
						required: true,
						message: '请选择发生时间',
						trigger: ['change', 'blur'],
					}],
					problemTitle: [{
						required: true,
						message: '请输入问题描述',
						trigger: ['change', 'blur'],
					}],
					deviceProblem: [{
						required: true,
						message: '请输入问题记录',
						trigger: ['change', 'blur'],
					}]
				},
				//是否显示站点弹窗
				siteSelectShow: false,
				//站点列表
				siteSelectList: [],
				//是否显示等级弹窗
				levelSelectShow: false,
				//等级列表
				levelSelectList: [],
				//是否显示人员选择
				showPerson: false,
				//人员列表
				personSelectList: [],
				//是否禁用
				isClick: false,
				fileList1: [],
				//是否显示设备名称弹窗
				nameSelectShow: false,
				//设备名称列表
				nameSelectList: [],
			}
		},
		computed: {

		},
		mounted() {},
		// 获取系统默认时间
		onLoad() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			this.defaultTime = timer
		},
		onReady() {
			this.$refs.uform.setRules(this.rules);
		},
		mounted() {
			this.getSites();
			this.getDictTypeData();
			this.getlevelListData();
		},
		methods: {
			//获取站点列表
			getSites() {
				this.datalist = [];
				this.$http.getHasStationCodeAndName().then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.siteSelectList = res.data || [];
					} else {
						this.$utils.msg(res.msg);
					}
				})
			},
			//等级选择
			levelSelectCallback(e) {
				uni.hideKeyboard();
				this.form.level = e[0].value;
				this.form.levelText = e[0].label;
			},
			//选择站点框确定按钮
			siteSelectCallback(e) { // 拿到选中的索引值
				uni.hideKeyboard();
				this.form.stationName = e[0].label;
				this.form.stationCode = e[0].value;
				this.getPersons(e[0].value);
			},
			//设备名称选择
			nameSelectCallback(e) {
				uni.hideKeyboard();
				this.form.deviceName = e[0].label;
				this.form.device = e[0].value;
			},
			//人员选择
			personSelectCallback(e) {
				uni.hideKeyboard();
				this.form.nextId = e[0].value;
				this.form.nextPerson = e[0].label;
			},
			//时间选择
			timeHandle(data) {
				this.form.occurrenceTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data
					.minute + ':00';
			},
			//打开人员选择
			personHandle() {
				if (!this.form.stationCode) {
					return uni.showToast({
						title: '请先选择站点'
					})
				}
				this.showPerson = true;
			},
			//获取设备名称
			getDictTypeData() {
				let _that = this;
				_that.nameSelectList = [];
				_that.$http.getDictType('device_name').then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let list = res.data || [];
						_that.nameSelectList = list;
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
			//获取工单级别
			getlevelListData() {
				let _that = this;
				_that.levelSelectList = [];
				_that.$http.getDictType('order_level').then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let list = res.data || [];
						_that.levelSelectList = list;
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
			//获取站点下的人员列表
			getPersons(code) {
				let _that = this;
				_that.personSelectList = [];
				let userinfo = uni.getStorageSync('user')
				let user = null
				if (userinfo) {
					user = JSON.parse(userinfo)
				}
				_that.$http.getUserListByStationCode(code).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						let list = res.data || [];
						if (list && list.length > 0) {
							list.forEach(item => {
								if (user.userId != item.userId) {
									_that.personSelectList.push(item);
								}
							})
						}
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
			//提交
			submiHandle() {
				let _that = this;
				_that.isClick = true;
				let form = _that.form;
				if (form.img && form.img.length > 0) {
					form.attachment = form.img.join(',')
				}
				_that.$refs.uform.validate(valid => {
					if (!valid) {
						_that.isClick = false;
						return
					}
					_that.$http.addOrder(form).then(res => {
						_that.isClick = false;
						if (res.code == 200) {
							uni.showToast({
								title: '上报成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						} else {
							_that.$utils.msg(res.msg);
						}
					})
				});
			},
			// 删除图片
			deletePic(event) {
				this.form.img=[]
				lists.forEach(item=>{
					this.form.img.push(item.url)
				})
			},
			//图片上传
			onChooseComplete(lists, name) {
				const _that = this;
				lists.forEach(item => {
					uni.uploadFile({
						// 这里是你上传图片的地址
						url: 'https://tess.fast-fun.cn/zl/mini/file/upload',
						filePath: item.url,
						name: 'file',
						header: {
							"Authorization": `${uni.getStorageSync("token")}`
						},
						//	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
						success: (res) => {
							let data = JSON.parse(res.data)
							_that.form.img.push(data.msg)
						},
					})
				})
			},
			//视频上传
			onVideoChooseComplete() {
				const _that = this;
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePath;
						if (chooseImageRes.size >= 52428800) {
							uni.showToast({
								title: '不能超过50M',
								icon: 'none',
								mask: true,
							});
							return
						}
						uni.showLoading({
							title: '视频上传中...'
						})
						uni.uploadFile({
							url: 'https://tess.fast-fun.cn/zl/mini/file/upload',
							filePath: tempFilePaths,
							name: 'file',
							method: 'post',
							formData: {
								"Authorization": `${uni.getStorageSync("token")}`
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								_that.form.video = data.msg;
								uni.hideLoading();
							},
							fail: () => {
								uni.hideLoading();
							}
						});
					}
				});
			},
			//删除视频
			delHandle() {
				let _that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该视频文件吗?',
					success: (res) => {
						if (res.confirm) {
							_that.form.video = null
						} else {
							return
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-up-container {
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		padding: 0 30rpx;

		.content {
			height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
		}

		.order-tips {
			height: 80rpx;
			line-height: 80rpx;
			background: #EEEEEE;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #BFBDBD;
			padding-left: 30rpx;
			margin: 0 -30rpx;

			.order-imp {
				margin-right: 5rpx;
			}
		}

		.commit-button {
			position: fixed;
			width: calc(100% - 60rpx);
			bottom: calc(20rpx + env(safe-area-inset-bottom));
			z-index: 999;
		}

		.uploadv {
			width: 208rpx;
			height: 208rpx;
			flex-direction: column;
			color: #606266;
			font-size: 26rpx;
			overflow: hidden;
			margin: 10rpx;
			background: #f4f5f6;
			position: relative;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.u-add-tips {
				margin-top: 20rpx;
				line-height: 20rpx;
			}

			.u-add-img {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 10rpx;
				right: 15rpx;
			}

			.img {
				width: 60%;
				height: 60%;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.u-delete-icon {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 10;
				background-color: #FFAD26 !important;
				border-radius: 108rpx;
				width: 44rpx;
				height: 44rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>