<template>
	<div>
		<block v-if="mbwaShow">
			<div class="page-top-cont">
				<div class="pt-top">
					<p>
						<span class="serverpart-name">{{showData.SHOPNAME}}</span>
						<span class="area-title">{{showData.CREATE_DATE}}</span>
					</p>
					<span class="status-tag" :class="{'shouldDo':showData.PROCESSMODE!==0&&showData.PROCESSMODE!==4}">{{showData.status}}</span>
				</div>
			
				<p class='massage-content'>
					<span style="font-weight:bold;">{{showData.MEMBERSHIP_NAME}}：</span>
					{{showData.MBWA_CONTENT}}
				</p>
				
				<div class="img-box" v-if="imgList.length>2">
					
					<image mode="aspectFill" class="image220" lazy-load :src="item" alt="" v-for="(item,i) in imgList" :key="i" @tap="showImg(imgList,i)" />
				</div>
				<div class="img-box2" v-else-if="imgList.length==2">
					<image mode="aspectFill" class="image328" lazy-load :src="item" alt="" v-for="(item,i) in imgList" :key="i" @tap="showImg(imgList,i)" />
				</div>
				<div class="img-box" v-else-if="imgList.length==1">
					<image mode="aspectFill" class="image683" lazy-load :src="imgList[0]" @tap="showImg(imgList,i)" />
				</div>
			</div>
			
			<div class="msg-resolve-box" v-if="showData.PROCESSMODE!=0">
				<block v-if="isManager===1">
					<div class="page-resolve">
						<p class="resove-title">处理意见</p>
						<div class="text-detail textarea-box">
							<textarea auto-height v-model="saveData.APPROVE_INFO" placeholder="填写问题处理意见" />
						</div>
					</div>
					
					<div class="page-resolve no-border">
						<span class="resove-title">问题处理人</span>
						<picker mode="selector" @change="pickerChange" :value="pickerIndex" range-key="MEMBERSHIP_NAME" :range="dealerList" class="resolve-person">
							<view>{{pickerIndex==-1 ? '请选择': dealerList[pickerIndex].MEMBERSHIP_NAME}}</view>
						</picker>
						<!-- <span class="resolve-person" @tap="cheose">请选择</span> -->
					</div>
				</block>
				<!-- 主任 和主任意见 -->
				<!-- <div class="page-resolve" v-if="showData.PROCESSMODE>1">
					
					<p class="resove-title">{{showData.MANAGER_NAME}}</p>
					
					<p class="text-detail">{{showData.APPROVE_INFO}}</p>
				</div> -->
				<div class="page-resolve" v-if="showData.PROCESSMODE>2">
				<!-- 问题处理人 -->
					<span class="resove-title">{{showData.DEALER_NAME}}</span> 
					<!-- 处理结果 -->
					<span class="text-detail">{{showData.HANDLING_INFO}}</span>
				</div>
				<div class="page-resolve no-border" v-if="showData.HANDLING_IMG_URL">
					<p class="resove-title">照 片</p>
					
					<div class="img-box text-detail">
						<image :src="item" class="image220" lazy-load v-for="(item,i) in handelImgList" :key="i" @tap="showImg(handelImgList,i)" />
					</div>
				</div>
				<block v-if="isManager===2">
					<div class="page-resolve">
						<p>处理结果</p>
						<div class="text-detail textarea-box">
							<textarea auto-height v-model="saveData.APPROVE_INFO" placeholder="填写问题处理结果" />
						</div>
					</div>
					<div class="page-resolve">
						<p>照 片</p>
						<div class="img-box text-detail no-border">
							
							<div class="upload-file-list" v-for="(item,index) in uploadImgList" :key="index">
								<span class="upload-file-remove" @click.stop="deleteImgFunc(item,index)">×</span>
								<image mode="aspectFill" :src="item" @tap="showImg(uploadImgList,index)" />
							</div>
							<div class="upload-file-add-container" @click="submitImg">
							  <span class="walk-manage-plus">+</span>
							  <!-- <span class="upload-file-add-img" >添加图片</span> -->
							</div>
							
				
						</div>
					</div>
					
					<!-- <div> 
						<button type="primary" class="post-btn" @tap="postIt()">提交</button>
					</div> -->
				</block>
			</div>
			<block v-if="showData.SORTNUM===0">
				<button type="primary" class="post-btn" @tap="submitBtn()" v-if="isManager===3">确认</button>
				<button type="primary" class="post-btn" @tap="postIt()" v-else>提交</button>
			
			</block>
			
		</block>
		<div v-else>
			<noFound :nodata="showData.MBWA_ID ? false : true" />
		</div>
		
	</div>
</template>

<script>
	
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				mbwaShow: false,
				isManager: 0,
				
				fankui: false,
				isPicker: false,
				pickerIndex: -1,
				loadingType: 1,
				foundType: 0,
				themeColor: '#64a0e6',
				deep: 1,
				pickerValueArray: [],
				pickerValueDefault: [0],
				saveData: {},
				showData: {},
				imgList: [],
				// dealerImgList: [],
				handelImgList:[],
				dealerList: [],
				uploadImgPath: [],
				uploadImgList: [],
				isShow: 0
			};
		},
		computed:{
			...mapGetters({
				'user':'getUser',
			}),
		
		},
		methods:{ 
			...mapMutations(['shouldReLoadingList']),
			// 图片预览
			showImg(list,index) {
				
				uni.previewImage( {
					urls: list,
					current: index,
					loop: true,
					indicator: 'number'
				});
			},

			submitImg(e){
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function (rs) {
						let quality = 100
						if (rs.tempFiles[0].size > 1024 * 200) {
							quality = 1024 * 200 / rs.tempFiles[0].size * 100
						}
						uni.showLoading({
							title: '图片上传中...',
							mask: true
						})
						if (quality < 100 && rs.tempFiles[0].path.indexOf('.jpg') > -1) {
							uni.compressImage({
								src:  rs.tempFilePaths[0], // 图片路径
								quality: quality, // 压缩质量
								success (res) {
									console.log(res)
									// imageSrc = res.tempFilePath.replace('undefined','.jpg')
									
									uni.uploadFile({
										url: 'https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA',
										filePath: res.tempFilePath,
										fileType: 'image',
										name: 'data',
										success: (res) => {
											let _data = JSON.parse(res.data)
											_this.uploadImgList.push(_data.Data.IMAGE_URL)
											_this.uploadImgPath.push(_data.Data.IMAGE_PATH)
											 uni.showToast({
												title: '上传成功',
												icon: 'none',
												duration: 2000
											})
											
										},
										fail: (err) => {
											
											// console.log('uploadImage fail', err);
											uni.showModal({
												content: err.errMsg,
												showCancel: false
											});
										},
										complete:() =>{
											uni.hideLoading()
										}
									});
								},
								fail (error) {
									
								}
							})
						}else {
							
							uni.uploadFile({
								url: 'https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA',
								filePath: rs.tempFilePaths[0],
								fileType: 'image',
								name: 'data',
								success: (res) => {
									uni.hideLoading()
									let _data = JSON.parse(res.data)
									_this.uploadImgList.push(_data.Data.IMAGE_URL)
									_this.uploadImgPath.push(_data.Data.IMAGE_PATH)
									uni.showToast({
										title: '上传成功',
										icon: 'none',
										duration: 2000
									})
									
								},
								fail: (err) => {
									// console.log('uploadImage fail', err);
									uni.showModal({
										content: err.errMsg,
										showCancel: false
									});
								}
							});
						}
					}
				});
			},
			deleteImgFunc (item,index) {
				let _this = this
				_this.$request.$post('DelFile',{
					fileUrl: _this.uploadImgPath[index]
				}).then(res =>{
					_this.uploadImgList.splice(index, 1)
					_this.uploadImgPath.splice(index, 1)
					uni.showToast({
						title: res.ResultDesc,
						icon: 'none',
						duration: 2000
					})
				})
			},
			getDetail() {
				let _this = this
				let keys = {0: '正常',1: '待处理',2:'待反馈',3:'已反馈',4:'已确认'}
				_this.$request.$get('GetMbwaDetail',{
					
					MBWA_ID: _this.saveData.MBWA_ID
				}).then(rs => {
					uni.hideLoading()
					if(!rs.ResultCode ||rs.ResultCode!='100'){
						_this.mbwaShow = false
					}else{
				
						_this.mbwaShow =true
						_this.showData = rs.Data
						_this.showData.status = keys[_this.showData.PROCESSMODE]
						let processmode = parseInt(_this.showData.PROCESSMODE)
						
						if(_this.showData.SORTNUM==0){
							switch (processmode){
								case 1:
									_this.getDEALER()
									_this.isManager = 1
									break;
								case 2:
									_this.isManager = 2 
									break;
								case 3:
									_this.isManager = 3
									break;
								default:
									break;
							}
							_this.$forceUpdate()
						}
						let arr = []
						let dealerImgList = []
						_this.showData.ImgList.forEach(n=>{arr.push(n.IMAGE_URL)})
						_this.showData.dealerImgList.forEach(n=>{dealerImgList.push(n.IMAGE_URL)})
						_this.imgList = arr
						
						_this.handelImgList = _this.showData.HANDLING_IMG_URL.split(',')
					}
				})
			},
			getDEALER () {
				let _this = this
				uni.showLoading()
				_this.$request.$get('GetDealerList',{
					
					MBWA_ID: _this.saveData.MBWA_ID
				}).then(rs => {
					uni.hideLoading()
					
					_this.dealerList = rs.Data.List
					
				})
			},
			
			pickerChange(e){
			
				this.pickerIndex = e.detail.value
			
			},
			cheose() {
				if( this.showData.PROCESSMODE===1 && this.isManager===1) {
					
					if(this.pickerValueArray.length<1) {
						uni.showToast({
							title: '您没有可选择的问题处理人。请让相关人员添加后重试。',
							icon: 'none'
						})
						return false
					}
					this.isPicker = true
				}
			},
			onCancel(e) {
				// this.clearPopData()
			},
			postIt() {
				let _this = this
				let deal_man = _this.dealerList[_this.pickerIndex]
				if	(_this.showData.PROCESSMODE===1 && _this.pickerIndex==-1) {
					uni.showToast({
						icon: 'none',
						title: '请选择问题处理人。'
					})
					return false
				}
				if(!_this.saveData.APPROVE_INFO) {
					uni.showToast({
						icon: 'none',
						title: _this.isManager===1 ? '请输入处理意见。' : '请输入处理反馈。'
					})
					return false
				}
				if(_this.uploadImgPath.length === 0 && _this.isManager === 2){
					uni.showToast({
						icon: 'none',
						title: '请上传现场图片。'
					})
					return false
				}
				uni.showLoading({
					title: '提交中，请稍后'
				})
				_this.saveData.Membership_Id = _this.user.Membership_Id
				_this.saveData.USER_ID= _this.user.UserId
				if(_this.showData.PROCESSMODE===1 ) {
					_this.saveData.DEALER_STAFFID = deal_man.STAFF_ID
					_this.saveData.DEALER_ID = deal_man.MEMBERSHIP_ID
					_this.saveData.DEALER_NAME = deal_man.MEMBERSHIP_NAME
					
				}
				
			
				_this.saveData.ImageArr = _this.uploadImgPath.toString()
				_this.$request.$webPost('/WeChat/MBWA/AddApprove',_this.saveData).then(rs => {
					uni.hideLoading()
					if(rs.Result_Code==100) {
						
						
						uni.showToast({
							icon: 'none',
							title: _this.isManager===1 ? '处理成功！' : '反馈成功！',
							success() {
								setTimeout(() => {
									this.$util.toNextRoute('redirectTo',  '/pages/mbwa/mbwa')
									// uni.navigateBack({
									// 	delta: 1
									// });
									// uni.$emit('mbwa',true)
									_this.shouldReLoadingList(true)
								}, 200)
							}
						})
					}else{
					
						uni.showToast({
							icon: 'none',
							title: (_this.isManager===1 ? '处理失败！' : '反馈失败！')+'错误：'+rs.Result_Desc
						})
					}
				})
			},
			submitBtn(){
				let _this = this
				_this.$request.$post( 'AddApprove',{
					MBWA_ID: _this.showData.MBWA_ID
				
				}).then(res =>{
					if(res.ResultCode==100) {
						// uni.$emit('mbwa',true)
						
						uni.showToast({
							icon: 'none',
							title:'确认成功！',
							success() {
								setTimeout(() => {
									this.$util.toNextRoute('redirectTo',  '/pages/mbwa/mbwa')
									// uni.navigateBack({
									// 	delta: 1
									// });
									_this.shouldReLoadingList(true)
								}, 200)
							}
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: res.ResultDesc
						})
					}
				})
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载'
			})
			this.saveData.MBWA_ID = option.MBWA_ID
			this.isManager =  parseInt(option.isManager)
			this.getDetail()
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onShow() {
			let _this = this
			
			
		},
		
	}
</script>

<style scoped>
	
	* {
		box-sizing: border-box;
	}
	i{
		width: 24upx;
		height: 24upx;
		margin-right: 8upx;
		display: inline-block;
		vertical-align: middle;
		background-size: contain;
	}
	textarea {
		height: 40upx;
		line-height: 32upx;
		font-size: 28upx;
		width: 500upx;
		border: 0;
	}
	.page-top-cont {
		background-color: #fff;
		padding: 32upx;
	}
	.msg-resolve-box {
		margin: 30upx;
		border-radius: 16upx;
		border:1upx solid #eee;
		background-color: #fff;
	}
	.page-resolve,.page-advice {
		display: flex;
		justify-content: space-between;
		padding: 0 16upx;
	}
	.page-resolve .resove-title {
		width: 160upx;
		color: #242424;
		line-height: 96upx;
	}

	.page-resolve .text-detail {
		width: 500upx;
		border-bottom: 1upx solid #eee;
		padding: 22upx 0;
		line-height: 50upx;
	}
	.page-resolve .resolve-person {
		padding-right: 16upx;
		text-align: right;
		padding-right: 72upx;
		position: relative;
	}
	.page-resolve .resolve-person:after{
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 12px;
		top: 50%;
		color: #333;
		transform: translateY(-50%);
		font-size: 18px;
	}
	.textarea-box {
		display: flex;
		align-items: center;
		min-height: 52upx;
	}
	.no-border .text-detail {
		
		border-bottom: 0;
	}
	.pt-top,.page-resolve {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.pt-top>p {
		display: flex;
		align-items: center;
	}
	.area-title {
		position: relative;
		margin-right: 8upx;
	}


	/* .massage-date {
		color: #939393;
		display: flex;
		align-items: center;
		margin-top: 10upx;
	} */
	.massage-content {
		margin: 8upx 0;
	}
	.serverpart-name {
		font-size: 24upx;
		padding: 0 12upx;
		height: 38upx;
		text-align: center;
		line-height: 38upx;
		color: #489AE5;
		border: 1upx solid #489AE5;
		border-radius: 20upx;
		justify-content: center;
		margin-right: 32upx;
	}
	/* .span-color {
		color: #808080;
		min-width: 130upx;
		display: inline-flex;
		align-items: center;
		magin-left: 20upx;
	} */
	/* .mbwa-text {
		font-size: 30upx;
		color: #000;
	} */
	/* .img-tsr {
		background: url('../../static/images/mbwa/tsjy_ry2.png') no-repeat center right;
		background-size: contain;
	} */
	.status-tag {
		font-size: 24upx;
		color: #999999;
	}
	.status-tag.shouldDo {
		border: 1upx solid #df7f42;
		border-radius: 8upx;
		padding: 0 16upx;
		color: #df7f42;
		font-size: 24upx;
	}

	/* .ico-user {
		background: url(../../static/images/mbwa/zbry.png) no-repeat center;
		background-size: contain;
		width: 22upx;
		height: 21upx;
		margin-right: 8upx;
	} */
	.img-box {
		display: flex;
		/* align-items: center; */
		flex-wrap: wrap;
		align-items: flex-end;
		/* margin-top: 16upx; */
	}
	.img-box2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.img-box .image683 {
		width: 683upx;
		height: 357upx;
		border-radius: 8upx;
		/* margin-right: 16upx; */
	}
	.img-box .image220 {
		width: 218upx;
		height: 212upx;
		border-radius: 8upx;
		margin-right: 16upx;
		margin-bottom: 10upx;
	}
	.img-box .image220:nth-child(3n) {
		margin-right: 0;
		
	}
	.img-box2 .image328 {
		width: 328upx;
		height: 212upx;
		border-radius: 8upx;
		
	}
	.img-box .image328+.image328{
		margin-left: 24upx;
	}
	.img-box.text-detail image{
		width: 130upx;
		height: 126upx;
		border-radius: 8upx;
		margin-right: 16upx;
	}

	.post-btn {
		color: #FFFFFF;
		background-color: #444;
		height: 88upx;
		line-height: 88upx;
		/* width: 80%; */
		margin: 60upx 30upx;
		margin-top: 60upx;
		font-size: 30upx;
	}


	/* .upload-file-container{
		display: flex;
		width: 100%;
		min-height: 160upx;
		box-sizing: border-box;
		flex-wrap: wrap;
	} */
	/* .upload-file-add{
		width: 130upx;
		height: 126upx;
		margin-right: 16upx;
		
        box-sizing: border-box;
	} */
	.upload-file-add-container{
		display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1upx dashed #c6c6c6;
        width: 130upx;
        height: 126upx;
		marrgin-top:16rpx;
		margin-right: 16rpx;
		border-radius: 6rpx;
	}
	.walk-manage-plus{
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: #6cabf9;
		text-align: center;
        color: #ffffff;
        font-size: 48rpx;
		line-height: 44rpx;
	}
	.upload-file-add-img{
		margin-top: 10upx;
        font-size: 24upx;
        color: #919191;
	}
	.upload-file-list{
		position: relative;
		width: 130upx;
		height: 126upx;
		margin-right: 24upx;
		margin-top: 20upx;
	}

	.upload-file-remove{
		position: absolute;
		top: -14upx;
		right: -12upx;
		display: inline-block;
		width: 30upx;
		height: 30upx;
		line-height: 26upx;
		background-color: #ff0000;
		color: #ffffff;
		font-size: 30upx;
		border-radius: 50%;
		text-align: center;
		z-index: 1;
	}
/* 	.ul-list{
		background-color: #fff;
		height: 500upx;
		overflow-y: scroll;
		padding-top: 40upx;
		font-size: 24upx;
	}
	.ul-list li{
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		font-size: 24upx;
		opacity: 0.5;
	}
	.ul-list .item-show{
		opacity: 1;
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		font-size: 26upx;
	} */
	
</style>
