<template>
	<view class="wrap">
		<view class="top">
			<view>
				<text>发起日期:</text>
				<text>{{firstData.createTime}}</text>
			</view>
			
			<view>
				<text>投诉类别:</text>
				<text>{{firstData.commentType||'-'}}</text>
			</view>
			
			<view>
				<text>联系方式:</text>
				<text>{{firstData.phone?firstData.phone.substr(0,3)+"****"+firstData.phone.substr(7,4):"-"}}</text>
			</view>
		</view>
		
		<view class="middle">
			<view class="middle-title">处理记录</view>
			<view class="step">
				<view class="step-list" v-for="(item,index) in detailList" :key="index">
					<view class="list-left">
						<view class="circle">
							<text v-if="index!=0"></text>
						</view>
						<!-- 只有一条数据时显示最后那根线-->
						<view class="line-one" v-if="detailList.length==1"></view>
						<!-- 有多条数据时最后那根线不显示-->
						<view class="line" v-if="index!=detailList.length-1"></view>
					</view>
					
					<view class="list-right">
						<view class="right-title">
							<text>{{item.title}}</text>
							<text>{{item.time}}</text>
						</view>
						<view class="right-content">
							{{item.text}}
						</view>
						<view class="right-img">
							<image v-for="(item2,a) in item.imgList" :key="a" :src="item2.imgUrl" @click="previewImg(item2.imgUrl)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text class="full-btn" @click="showPop=true">再次投诉</text>
		</view>
		<!-- 再次投诉弹窗 -->
		<u-popup  :show="showPop" :round="20" @close="showPop=false" closeable>
			<view class="pop-top">
				<view class="pop-main-title">
					再次投诉
				</view>
				<view class="pop-title">
					<text >投诉描述</text>
					<text class="red">*</text>
				</view>
				<view class="pop-text">
					<u--textarea v-model="commentText" placeholder="请描述您遇到的问题,我们会尽快处理" count maxlength='400' height='200'>
						
					</u--textarea>
				</view>
				<view class="pop-title">
					<text>相关图片</text>
					<text class="grey">（最多三张）</text>
				</view>
				<view class="pop-image">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="3"
						width='160'
						height='160'
					></u-upload>
				</view>
				
			</view>
			
			<view class="pop-bottom">
				<text class="full-btn" @click="commit()">提交</text>
			</view>
		</u-popup>
		<!-- 图片预览弹窗 -->
		<view class="img-pop" v-if="showImgPop" @click="showImgPop=false">
			<image :src='chooseImgUrl' mode="widthFix"></image>
		</view>
	</view>
	
</template>

<script>
export default{
  data(){
    return {
      showPop:false,//控制再次投诉弹窗
      showImgPop:false,//控制预览图片显示隐藏
      merchantId:'',//商户Id
      openid:uni.getStorageSync('openid')||'',//openid
      batchId:'',//批次id
      detailList:[],//详情数据
      firstData:'',//第一条数据
      fileList1: [],//文件列表
      imgList:[],//上传的图片列表
      commentText:'',//投诉内容
      chooseImgUrl:'',//预览图片地址
    }
  },
  onLoad(option){
    this.batchId=option.batchId
    this.merchantId=option.merchantId||''
    this.initDetail()
  },
  methods:{
    //---预览图片
    previewImg(imgUrl){
		  this.showImgPop=true
		  this.chooseImgUrl=imgUrl
    },
    //---详情加载
    initDetail(){
		  let data={
		    batchId:this.batchId//批次Id
		  }
		  this.$request('comment/userComment/loadInfo',data).then((res)=>{
			  if(res.code=='00'){
		      let list=res.data||[]
		      if(list.length>0){
		        this.firstData=list[0]
		        list.forEach(item=>{
              //游客发起数据
              let imgList1=[]
              let imgList2=[]
              item.commentImgList.forEach(item2=>{
                if(item2.imgCommentType==0){
                  //游客发送的图片
                  imgList1.push(item2)
                }
                if(item2.imgCommentType==1){
								  //商家发送的图片
								  imgList2.push(item2)
                }
              })
              this.detailList.push({
                title:'发起投诉',
                text:item.commentText||'',
                time:item.createTime,
                imgList:imgList1
              })
              //商家回复数据
              if(item.handleType===0){
                //商家电话回复
                this.detailList.push({
                	title:'商家回复',
                	text:item.commentReply||'客服已进行电话回复',
                	time:item.updateTime,
                	imgList:imgList2
                })
              }
              if(item.handleType===1||item.handleType===2){
                //商家文字回复，或者电话+文字回复
                this.detailList.push({
                  title:'商家回复',
                  text:item.commentReply||'',
                  time:item.updateTime,
                  imgList:imgList2
                })
              }
		        })
            this.detailList.reverse()
		      }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    },
    //---删除图片
    deletePic(event) {
		  this[`fileList${event.name}`].splice(event.index, 1)
    },
    //---新增图片
    async afterRead(event) {
		  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		  let lists = [].concat(event.file)
      if(event.file[0].size>1024*1024*10){
			  uni.showToast({
				  title:'图片内存不能大于10M',
				  icon: 'none'
			  })
			  return
      }
		  let fileListLen = this[`fileList${event.name}`].length
		  lists.map((item) => {
		    this[`fileList${event.name}`].push({
		      ...item,
		      status: 'uploading',
		      message: '上传中'
		    })
		  })
		  for (let i = 0; i < lists.length; i++) {
		    const result = await this.uploadFilePromise(lists[i].url)
		    let item = this[`fileList${event.name}`][fileListLen]
		    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
		      status: 'success',
		      message: '',
		      url:'http://picture.pangdly.com/'+result
		    }))
		    fileListLen++
		  }
    },
    uploadFilePromise(url) {
		  return new Promise((resolve, reject) => {
		    let baseUrl=''
		    if(process.env.NODE_ENV === 'development'){//开发环境
				  baseUrl='http://192.168.0.213:7888/'
		    }else{
				  baseUrl= 'https://manager.pangdly.com/'
		    }
		    let fun = uni.uploadFile({
		      url: baseUrl+'upload/file/newUpload', // 仅为示例，非真实的接口地址
		      filePath:url,
		      name: 'uploadFile',
		      success: (res) => {
		        let res1=JSON.parse(res.data)
		        if(res1.code == '00'){
		          resolve(res1.data)
		        }
		      }
		    })
		  })
    },
    //---提交
    commit(){
		  this.imgList=this.fileList1.map(item=>{
		    return {
		      imgUrl:item.url,
		      imgCommentType:0//0游客发起图片 1客服回复图片
		    }
		  })
		  if(!this.commentText){
			  uni.showToast({
				  title: '请输入投诉内容',
				  icon: 'none'
			  })
			  return
		  }
		  let data={
        batchId:this.batchId,//批次Id
		    merchantId:this.merchantId,//商户Id
		    openid:this.openid,//openid
		    submitType:0,//0-投诉 1-建议
		    commentText:this.commentText,//投诉内容
		    handleStatus:0,//处理状态 0未处理1已处理（默认填0）
		    commentImgList:this.imgList,//图片列表
		  }
		  this.$request('comment/userComment/save',data).then((res)=>{
			  if(res.code=='00'){
		      uni.showToast({
					  title:'提交成功',
					  icon: 'none'
		      })
		      setTimeout(()=>{
		        uni.navigateBack({
		          delta:1 
		        })
		      },2000)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    }
  }
}
</script>

<style scoped lang="scss">
.top{
	padding: 32rpx 40rpx;
	background: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.top view:not(:first-child){
	margin-top: 16rpx;
}
.top view text:first-child{
	color: #999999;
	margin-right: 20rpx;
}
.middle{
	margin: 224rpx 0 200rpx 0;
	background: #ffffff;
	padding: 30rpx 30rpx 0 30rpx;
}
.middle-title{
	font-size: 32rpx;
	font-weight: 600;
}
.step{
	margin-top: 40rpx;
}
.step-list{
	display: flex;
}
.list-left{
	margin-right: 16rpx;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding-top: 6rpx;
}
.circle{
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	background: #FE6600;
	position: relative;
	text{
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background: #ffffff;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
	}
}
.line{
	width: 4rpx;
	flex:1;
	background: #FFEDD6;
	position: relative;
	left: 10rpx;
}
.line-one{
	width: 4rpx;
	height:190rpx;
	background: #FFEDD6;
	position: relative;
	left: 10rpx;
}
.list-right{
	flex: 1;
	padding-bottom: 40rpx;
}
.right-title{
	text:first-child{
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 20rpx;
	}
	text:last-child{
		color: #999999;
	}
}
.right-content{
	margin-top: 10rpx;
	font-size: 24rpx;
}
.right-img{
	margin-top: 16rpx;
	image{
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}
}
.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 20rpx 40rpx 60rpx 40rpx;
		border-top: 1px solid #EDEDED;
	}
	// 弹窗
	.pop-top{
		padding: 36rpx 40rpx 160rpx 40rpx;
	}
	.pop-main-title{
		font-size: 36rpx;
		font-weight: 600;
	}
	.pop-title{
		margin-top: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	.pop-text{
		border-bottom:1px solid #f5f5f5;
		padding: 20rpx 0 40rpx 0;
	}
	.pop-image{
		margin-top: 20rpx;
	}
	.red{
		color: #F53F3F;
	}
	.grey{
		color:#999999;
		font-size: 28rpx;
	}
	.pop-bottom{
		padding: 20rpx 40rpx 0 40rpx;
		border-top: 1px solid #EDEDED;
	}
	.img-pop{
		position:fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		image{
			width: 100%;
		}
	}
	/*修改上传组件样式*/
	.pop-top ::v-deep .uicon-camera-fill{
		font-size: 36px !important;
		line-height: 36px !important;
	}
	.pop-top ::v-deep .uicon-close{
		font-size: 10px !important;
		line-height: 10px !important;
	}
	.pop-top ::v-deep .uicon-checkmark{
		font-size: 12px !important;
		line-height: 12px !important;
	}
	.pop-top ::v-deep .u-upload__button{
		border-radius: 8rpx;
	}
	.pop-top ::v-deep .u-textarea{
		background:#F7F8FA;
		border: none;
	}
	.pop-top ::v-deep .u-textarea__count{
		background: #F7F8FA !important;
	}
</style>