<template>
	<view class="order-detail-container">
		<view class="detail-page-content">
			<view class="detail-top-container">
				<view :class="currIndex == 1 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(1)">
					故障信息
				</view>
				<view :class="currIndex == 2 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(2)">
					处理过程
				</view>
			</view>
			<view class="order-detail-content" v-if="currIndex == 1">
				<view class="order-detail-info">
					<view class="order-detail-title">
						<view class="order-detail-level">
							{{detailInfo.level == 1 ? '一级故障' : (detailInfo.level == 2 ? '二级故障' : '三级故障')}}
						</view>
						<view class="order-detail-name">
							{{detailInfo.problemTitle || '-'}}
						</view>
					</view>
					<view class="order-detail-time">
						{{'发生时间: ' + detailInfo.occurrenceTime || '-'}}
					</view>
					<view class="order-detail-site">
						<view class="order-detail-status">
							{{detailInfo.statusText || '-'}}
						</view>
						<view class="order-detail-site-text">
							{{detailInfo.stationName || '-'}}
						</view>
					</view>
				</view>
				<view class="order-detail-fault-describe">
					<view class="fault-describe-container">
						<view class="fault-describe-title">
							问题记录
						</view>
						<view class="fault-describe-remark" v-if="detailInfo.attachment">
							点击图片可查看保存大图
						</view>
					</view>
					<view class="order-detail-swiper" v-if="detailInfo.attachment">
						<u-swiper :list="detailInfo.imgList" @click="imageHandle"></u-swiper>
					</view>
					<view class="order-detail-swiper" v-if="detailInfo.video">
						<video style="width: 100%;" :src='detailInfo.video'></video>
					</view>
					<view class="order-problem-container">
						<view class="problem-title">
							<view class="problem-icon">?</view>
							<view class="problem-title-text">
								问题记录
							</view>
						</view>
						<view class="problem-text">
							{{detailInfo.deviceProblem || '-'}}
						</view>
					</view>
				</view>
				<view class="order-detail-basic">
					<view class="order-detail-basic-title">
						<view class="basic-title-text">
							详细信息
						</view>
						<view class="basic-title-show" v-if="isShowMore" @click="showHandle">
							收起
							<u-icon name="arrow-up"></u-icon>
						</view>
						<view class="basic-title-show" v-if="!isShowMore" @click="showHandle">
							展开
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
					<view class="basic-items" v-if="isShowMore">
						<view class="basic-item">
							<view class="basic-item-title">
								设备名称
							</view>
							<view class="basic-item-text">
								{{detailInfo.deviceName || '-'}}
							</view>
						</view>
						<view class="basic-item">
							<view class="basic-item-title">
								设备编号
							</view>
							<view class="basic-item-text">
								{{detailInfo.sn || '-'}}
							</view>
						</view>
						<view class="basic-item">
							<view class="basic-item-title">
								上报人
							</view>
							<view class="basic-item-text">
								{{detailInfo.firstPersonName || '-'}}
							</view>
						</view>
						<view class="basic-item">
							<view class="basic-item-title">
								联系方式
							</view>
							<view class="basic-item-text">
								{{detailInfo.firstPersonPhone || '-'}}
							</view>
						</view>
					</view>
				</view>
				<u-form :model="form" ref="uform" :rules="rules" label-align='left' label-width="150">
					<view class="order-detail-deal"
						v-if="detailInfo.status == 0 || (detailInfo.status == 1 && detailInfo.currentPerson == userinfo.userId)">
						<view class="order-detail-deal-title">
							处理信息
						</view>
						<u-form-item label="*处理方式" prop="statusText">
							<u-input type="select" :select-open="dealSelectShow" placeholder="请选择换电站"
								v-model="form.statusText" @click="dealSelectShow = true" />
						</u-form-item>
						<u-form-item label="*处理人员" prop="nextPerson" v-if="form.status == 3">
							<u-input type="select" :select-open="showPerson" placeholder="请选择处理人员"
								v-model="form.nextPerson" @click="showPerson = true" />
						</u-form-item>
						<u-form-item label="*处理记录" prop="info" :label-position="'top'">
							<u-input type="textarea" placeholder="请输入问题记录 不超过200个字" :maxlength="200"
								v-model="form.info" />
						</u-form-item>
						<u-form-item label="问题图片(不超过5张,20M以内)" prop="intro" :label-position="'top'">
							<u-upload multiple :fileList="fileList" @on-choose-complete="onChooseComplete"
								:auto-upload="false" @delete="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" :src="form.video"></video>
								<image class="u-add-img" src="@/static/index-delete.png" alt="" @click="delHandle" />
							</view>
						</u-form-item>
					</view>
				</u-form>
				<view class="order-footer-button" :disabled="isClick"
					v-if="detailInfo.status == 0 || (detailInfo.status == 1 && detailInfo.currentPerson == userinfo.userId)"
					@click="submitHandle">
					处理
				</view>
			</view>
			<view class="order-detail-timeLine" v-if="currIndex == 2">
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item, index) in timeDatas" :key="index">
						<template v-slot:node>
							<view class="time-line-node">
								{{item.status == 1 ? '处理' : (item.status == 2 ? '完结' : '流转')}}
							</view>
						</template>
						<template v-slot:content>
							<view style="margin-left: 20rpx;">
								<view class="u-order-title">
									<span class="u-order-time">{{item.handleTime || '-'}}</span>
									<span class="u-order-name"
										v-if="item.processorName && item.nextPerson">{{item.processorName + '>' + item.nextPerson}}</span>
									<span class="u-order-name"
										v-else-if="item.processorName && !item.nextPerson">{{item.processorName}}</span>
									<span class="u-order-name" v-else>{{item.processorName}}</span>
								</view>
								<view class="u-order-desc">{{item.info || '-'}}</view>
								<view class="u-order-images" v-if="item.attachment">
									<image :src="img" v-for="(img, i) in item.imgList" :key="i" class="u-order-img"
										@click="imageSingleHandle(item.imgList, i)"></image>
								</view>
								<view class="u-order-images" v-if="item.video">
									<video :src="item.video" class="u-order-img"></video>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
				<view class="no-data" v-if="timeDatas.length == 0">
					该工单暂无处理记录
				</view>
			</view>
		</view>
		<u-select :list="dealSelectList" v-model="dealSelectShow" @confirm="dealSelectCallback"> </u-select>
		<u-select :list="personSelectList" v-model="showPerson" value-name="userId" label-name="nickName"
			@confirm="personSelectCallback"> </u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前选中下标
				currIndex: 1,
				level: 1,
				//是否收起详细信息
				isShowMore: true,
				//详情数据
				detailInfo: {},
				//用户信息
				userinfo: {},
				//提交表单
				form: {
					status: null,
					statusText: null,
					info: null,
					nextPerson: null,
					nextId: null,
					attachment: null,
					img: [],
					video: null,
				},
				//是否显示处理方式
				dealSelectShow: false,
				//是否显示人员
				showPerson: false,
				//人员列表
				personSelectList: [],
				//处理列表
				dealSelectList: [{
					label: '处理中',
					value: 1
				}, {
					label: '转发',
					value: 3
				}, {
					label: '已处理',
					value: 2
				}],
				//验证规则对象
				rules: {
					statusText: [{
						required: true,
						message: '请选择处理',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					info: [{
						max: 200,
						message: '记录不能大于200个字',
						trigger: ['change', 'blur'],
						message: '请输入问题记录',
						required: true,
					}],
					nextPerson: [{
						trigger: ['change', 'blur'],
						message: '请选择流转人员',
						required: true,
					}],
				},
				timeDatas: [],
				//是否点击按钮
				isClick: false,
			}
		},
		//第一次加载
		onLoad(e) {
			this.id = e.id;
			let userinfo = uni.getStorageSync('user')
			this.userinfo = JSON.parse(userinfo)
		},
		onReady() {
			this.$refs.uform.setRules(this.rules);
		},
		mounted() {
			this.getDetailData();
		},
		methods: {
			//tab选择
			tabHandle(type) {
				this.currIndex = type;
				if (type == 2) {
					this.getDealList();
				} else {
					this.getDetailData();
				}
			},
			//处理返回
			dealSelectCallback(e) {
				uni.hideKeyboard();
				this.form.statusText = e[0].label;
				this.form.status = e[0].value;
			},
			//人员选择
			personSelectCallback(e) {
				uni.hideKeyboard();
				this.form.nextId = e[0].value;
				this.form.nextPerson = e[0].label;
			},
			//点击图片
			imageHandle(data) {
				let list = [];
				this.detailInfo.imgList.forEach(item => {
					list.push(item)
				})
				uni.previewImage({
					urls: list,
					current: this.detailInfo.imgList[data]
				})
			},
			//点击放大图片
			imageSingleHandle(imgList, index) {
				let list = [];
				imgList.forEach(item => {
					list.push(item);
				})
				uni.previewImage({
					urls: list,
					current: imgList[index]
				})
			},
			//是否收起/展开详细信息
			showHandle() {
				this.isShowMore = !this.isShowMore
			},
			//获取详情数据
			getDetailData() {
				let _that = this
				uni.showLoading({
					title: '搜索中...',
				})
				_that.detailInfo = {};
				_that.$http.getOrderDetail(_that.id).then(res => {
					if (res.code == 200) {
						let detailInfo = {
							...res.data
						};
						let userinfo = uni.getStorageSync('user')
						let user = null
						if (userinfo) {
							user = JSON.parse(userinfo)
						}
						if (detailInfo.attachment) {
							detailInfo.imgList = detailInfo.attachment.split(',')
						}
						if (detailInfo.status == 0) {
							detailInfo.statusText = '未处理';
						} else if (detailInfo.status == 1) {
							if (user.userId == detailInfo.currentPerson) {
								detailInfo.statusText = '待处理';
							} else {
								detailInfo.statusText = '处理中';
							}
						} else {
							detailInfo.statusText = '已完结';
						}
						_that.detailInfo = detailInfo;
						this.getPersons(detailInfo.stationCode);
					} else {
						_that.$utils.msg(res.msg);
					}
					uni.hideLoading();
				})
			},
			//获取处理列表
			getDealList() {
				let _that = this
				uni.showLoading({
					title: '加载中...',
				})
				_that.timeDatas = [];
				_that.$http.getOrderDealList({
					parentId: _that.id
				}).then(res => {
					if (res.code == 200) {
						let timeDatas = res.data || [];
						if (timeDatas.length > 0) {
							timeDatas.forEach(item => {
								if (item.attachment) {
									item.imgList = item.attachment.split(',')
								}
								_that.timeDatas.push(item);
							})
						}
					} else {
						_that.$utils.msg(res.msg);
					}
					uni.hideLoading();
				})
			},
			//获取站点下的人员列表
			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);
					}
				})
			},
			//图片上传
			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)
						},
					})
				})
			},
			//删除视频
			delHandle() {
				let _that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该视频文件吗?',
					success: (res) => {
						if (res.confirm) {
							_that.form.video = null
						} else {
							return
						}
					}
				})
			},
			//视频上传
			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();
							}
						});
					}
				});
			},
			//提交
			submitHandle() {
				let _that = this;
				_that.isClick = true;
				_that.$refs.uform.validate(valid => {
					if (!valid) {
						_that.isClick = false;
						return
					}
					let form = _that.form;
					form.parentId = _that.id;
					if (form.img && form.img.length > 0) {
						form.attachment = form.img.join(',')
					}
					_that.$http.orderDeal(_that.form).then(res => {
						_that.isClick = false;
						if (res.code == 200) {
							uni.showToast({
								title: '处理成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								_that.getDetailData();
								_that.form = {
									status: null,
									statusText: null,
									info: null,
									nextPerson: null,
									nextId: null,
									attachment: null,
									img: [],
									video: null,
								}
							}, 1000);
						} else {
							_that.$utils.msg(res.msg);
						}
					}).catch(error => {
						_that.$utils.msg(error);
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		background: linear-gradient(180deg, #9CC1FA 2%, #78B1FE 15%, #E5EEFD 76%, #F7F8FA 100%);
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		padding-top: 15rpx;
		overflow-y: hidden;

		.detail-page-content {
			height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
			overflow-y: auto;

			.detail-top-container {
				display: flex;
				margin: 0rpx 30rpx;

				.detail-top-left-active {
					height: 90rpx;
					background: #FFFFFF;
					line-height: 90rpx;
					width: 50%;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1D2129;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
				}

				.detail-top-left {
					height: 72rpx;
					background: #E8F3FF;
					line-height: 72rpx;
					width: 50%;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #1D2129;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					margin-top: 18rpx;
				}
			}

			.order-detail-content {

				.order-detail-info {
					background: #FFFFFF;
					padding: 30rpx;
					margin: 0 30rpx;
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					min-height: 220rpx;

					.order-detail-title {
						display: flex;

						.order-detail-level {
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F53F3F;
							line-height: 36rpx;
							width: 96rpx;
							height: 36rpx;
							background: #FFECE8;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							text-align: center;
						}

						.order-detail-name {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1D2129;
							line-height: 36rpx;
							margin-left: 24rpx;
							width: calc(100% - 120rpx);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.order-detail-time {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #86909C;
						line-height: 28rpx;
						margin-top: 20rpx;
					}

					.order-detail-site {
						display: flex;
						position: relative;
						margin-top: 20rpx;

						.order-detail-status {
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #3F8CFF;
							line-height: 36rpx;
						}

						.order-detail-site-text {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #86909C;
							line-height: 36rpx;
							position: absolute;
							right: 0;
						}
					}
				}

				.order-detail-fault-describe {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 30rpx;
					margin: 30rpx;

					.fault-describe-container {
						display: flex;

						.fault-describe-title {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1E2128;
							line-height: 36px;
							text-align: left;
							flex: 1;
						}

						.fault-describe-remark {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #C9CDD4;
							line-height: 36px;
							flex: 1;
							text-align: right;
						}
					}

					.order-detail-swiper {
						margin-top: 30rpx;
					}

					.order-problem-container {
						margin-top: 30rpx;

						.problem-title {
							display: flex;

							.problem-icon {
								height: 36rpx;
								width: 36rpx;
								border: 1rpx solid #C9CDD4;
								border-radius: 50%;
								margin-right: 10rpx;
								font-size: 30rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #C9CDD4;
								line-height: 36rpx;
								text-align: center;
							}

							.problem-title-text {
								font-size: 30rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #C9CDD4;
								line-height: 36rpx;
							}
						}

						.problem-text {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #1D2129;
							line-height: 40rpx;
							margin-top: 20rpx;
						}
					}
				}

				.order-detail-basic {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 30rpx;
					margin: 0rpx 30rpx 30rpx;

					.order-detail-basic-title {
						display: flex;

						.basic-title-text {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1E2128;
							line-height: 36rpx;
							flex: 1;
						}

						.basic-title-show {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #C9CDD4;
							line-height: 36rpx;
							flex: 1;
							text-align: right;
							margin-right: 5rpx;
						}
					}

					.basic-items {
						margin-top: 30rpx;

						.basic-item {
							display: flex;
							height: 100rpx;

							.basic-item-title {
								font-size: 30rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #86909C;
								line-height: 100rpx;
								width: 200rpx;
							}

							.basic-item-text {
								font-size: 30rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #1D2129;
								line-height: 100rpx;
								flex: 1;
								text-align: right;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}

				.order-detail-deal {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 30rpx;
					margin: 0rpx 30rpx 30rpx;

					.order-detail-deal-title {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #1E2128;
						line-height: 36rpx;
					}
				}
			}

			.order-detail-timeLine {
				background: #FFFFFF;
				padding: 30rpx 30rpx 30rpx 60rpx;
				margin: 0 30rpx;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				min-height: 220rpx;

				.time-line-node {
					background: #3F8CFF;
					line-height: 80rpx;
					width: 80rpx;
					border-radius: 50%;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}

				.u-order-title {
					display: flex;

					.u-order-time {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #1D2129;
						line-height: 32rpx;
					}

					.u-order-name {
						flex: 1;
						text-align: right;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #C9CDD4;
						line-height: 32rpx;
					}
				}

				.no-data {
					text-align: center;
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1D2129;
					line-height: 32rpx;
					position: fixed;
					top: 200rpx;
					left: 50%;
					transform: translate(-50%);
				}
			}
		}

		.u-order-desc {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #86909C;
			line-height: 28rpx;
			margin-top: 20rpx;
		}

		.u-order-images {
			display: flex;
			margin-top: 20rpx;
			width: 100%;
			flex-wrap: wrap;

			.u-order-img {
				width: 120rpx;
				height: 120rpx;
				margin: 0 10rpx 10rpx 0;
			}
		}

		.order-footer-button {
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #2979ff;
			width: calc(100% - 64rpx);
			margin: 0 32rpx;
			border-radius: 24rpx;
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			opacity: 1;
		}

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