<template>
	<view>
		<view class="bg-base padding" >
			<view class="text-xxl ">
				<text v-if="dataDetail.handleStatus==-1">已撤销</text>
				<text v-else-if="dataDetail.handleStatus==0">待处理</text>
				<text v-else-if="dataDetail.handleStatus==1">已处理</text>
			</view>
			<view class="text-df padding-top-xs">
				<text v-if="dataDetail.handleStatus==-1">当前工单已取消</text>
				<text v-else-if="dataDetail.handleStatus==0">当前工单待处理</text>
				<text v-else-if="dataDetail.handleStatus==1">当前工单已完成</text>
			</view>
		</view>
		
		<view class="margin-top bg-white padding solid-bottom">
			<view class="flex justify-between">
				<view class="text-black">
					<text>工单编号：{{dataDetail.jobNo}}</text>
					<text class="text-blue padding-left-sm" @click="copy(dataDetail.jobNo)">复制</text>
				</view>
				<view class="text-red">
					<text v-if="dataDetail.jobStatus==-1">已撤销</text>
					<text v-else-if="dataDetail.jobStatus==0">待处理</text>
					<text v-else-if="dataDetail.jobStatus==1">已处理</text>
				</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell-item :arrow="false" icon="home" title="所在小区" :value="dataDetail.residentialName"></u-cell-item>
			<u-cell-item :arrow="false" icon="map" title="维修位置" :value="dataDetail.reportPosition"></u-cell-item>
			<u-cell-item :arrow="false" icon="clock" title="创建时间" :value="dataDetail.createTime"></u-cell-item>
			<u-cell-item v-if="dataDetail.jobStatus==1" :arrow="false" icon="clock" title="完成时间" :value="dataDetail.endTime"></u-cell-item>
		</u-cell-group>
		<view class="cu-card dynamic no-card bg-white" style="padding: 30rpx;">
			<view class="cu-item shadow">
				<view class=" grid flex-sub  col-4 grid-square" >
					<view @click="previewPic(index,picArr)" v-for="(item,index) in picArr" :key="index" class="bg-img" :style="{backgroundImage: 'url(' + item + ')'}">
					</view>
				</view>
			</view>
			<view class="padding-top-20">
				<text>故障描述：</text>
				<text class="content">
					{{dataDetail.reportDetail}}
				</text>
			</view>
		</view>
		<view v-if="dataDetail.jobStatus==1&&dataDetail.estimateStatus==1" class="margin-top-sm margin-bottom-sm padding bg-white flex" style="box-sizing: border-box;">
			<view class="">
				<text class="">工单评价：</text>
			</view>
			<view class="flex-sub" >
				<text class="">{{dataDetail.comment}}</text>
			</view>
		</view>
		<view v-if="dataDetail.jobStatus==0" class="footer-fixed  padding-sm bg-white flex justify-end margin-right-30" style="box-sizing: border-box;z-index: 999;">
			<!-- 待处理，取消工单 -->
			<view  class="cu-btn line-red round "  @click="cancel()">
				取消工单
			</view>
			<!-- 已撤销工单，删除工单 -->
			<view style="margin: 0 10rpx;"  @click="handleRepair()" class="cu-btn line-base round "   >
				处理工单
			</view>
		</view>
		<!-- 详情 -->
				<u-popup v-model="popupShow" mode="center" width="650" :closeable="true" border-radius="10">
					<view style="padding: 60rpx 40rpx 10rpx;">
						<u-form label-width="150" :model="form" label-position="top">
							<u-form-item label="照片上传" >
								<view class="cu-form-group">
									<view class="grid col-4 grid-square flex-sub">
										<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
											<image :src="imgList[index]" mode="aspectFill"></image>
											<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
												<text class='cuIcon-close'></text>
											</view>
										</view>
										<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
											<text class='cuIcon-cameraadd'></text>
										</view>
									</view>
								</view>
							</u-form-item>
							<u-form-item label="处理情况" required=true><u-input v-model="detail"/></u-form-item>
						</u-form>
						<view @click="submit()" class="flex cu-btn bg-blue" style="margin: 60rpx 0 10rpx;padding: 40rpx;">
							确定
						</view>
					</view>
				</u-popup>
	</view>
</template>
<script>
	var app=getApp()
	var that=this
	var _this = this;
	export default {
		data() {
			return {
				//报修编号
				id:'',
				content:'',
				dataDetail:{},
				picArr:[],
				
				//照片上传及处理情况
				imgList: [],
				imgMaxNum: 4,
				detail:'',
				
				//弹出
				popupShow:false,
			}
		},
		onLoad(options) {
			that=this
			this.id=options.id
			this.fetchDataDetail()
		},
		methods: {
			fetchDataDetail(){
				let params = {
					id : this.id
				}
				this.$api.estateRepair.detail(params).then(res=>{
					this.dataDetail=res.data
					if(this.dataDetail.pic){
						this.picArr=this.dataDetail.pic.split(',')
					}else{
						this.picArr=[]
					}
				})
			},
			previewPic(index,picArr){
				console.log(index);
				uni.previewImage({
					urls:picArr,
					current:index
				})
			},
			copy(data){
				uni.setClipboardData({
					data:data
				})
			},
			// handleRepair(){
			// 	this.$showModel('确定把该工单置为已处理状态？').then(res=>{
			// 		let params=this.dataDetail
			// 		params.handleStatus=1
			// 		params.estimateStatus=0
			// 		this.$api.residential.addOrEditEstateRepair(params).then(res=>{
			// 			this.$showModel('操作成功',false).then(res=>{
			// 				uni.navigateBack({
			// 					delta:1
			// 				})
			// 			})
			// 		})
			// 	})
			// },
			/**
			 * @param {Object} item
			 * 点击处理工单
			 */
			handleRepair(){
				this.popupShow=true,
				this.imgList = [],
				this.detail = ''
			},
			/**
			 * 确认提交工单情况
			 */
			submit(){
				this.dataDetail.pic = this.imgList.join(",")
				// this.dataDetail.
				this.$showModel('确定把该工单置为已处理状态？').then(res=>{
					if(this.detail == ''){
						this.$u.toast('请填写处理情况')
						return
					}else{
						this.detailTemp.handleStatus=1,
						this.detailTemp.estimateStatus=0
						this.$api.estateRepair.submit(this.detailTemp).then(res=>{
							this.$u.toast('操作成功')
							this.mescroll.resetUpScroll()
							this.popupShow=false
						})
					}
				})
			},
			/**
			 * @param {Object} index
			 * 拍照或者从图库选择照片上传照片
			 */
			ChooseImage() {
				_this = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相机、相册选择
					success: (res) => {
						var tempFilePaths = res.tempFilePaths;
						if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							})
						} else {
							if (_this.imgList.length != 0) {
								_this.imgList = _this.imgList.concat(res.tempFilePaths);
							} else {
								_this.imgList = res.tempFilePaths;
							}
							for (var i = 0; i < tempFilePaths.length; i++) { 
								uni.uploadFile({
									url: "https://www.example.com/upload",
									filePath: tempFilePaths[i],
									name: "file", // 一定要与后台@RequestParam("file") MultipartFile变量名一致
									success(res) {
										console.log(res);
									}
								});
							}
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
			
			
			cancel(){
				let that=this
				uni.showModal({
					title:"提示",
					showCancel:true,
					content:'确定要取消该工单吗？',
					success: (res) => {
						console.log(res.confirm);
						if (res.confirm) {
							that.dataDetail.handleStatus=-1
							that.$api.residential.addOrEditEstateRepair(that.dataDetail).then(res=>{
								that.$showModel('操作成功',false).then(res=>{
									uni.navigateBack({
										delta:1
									})
								})
							})
							
						}
					}
				})
			},
		}
	}
</script>

<style>

</style>
