<template>
	<div class="suggestion-body">
		<block v-if="isShow">
			<div class="suggestion-detail-top">
				<div>
					<span>{{suggestionDetail.SUGGESTION_CREATEDATE}}</span>
					<span :class="suggestionDetail.SUGGESTION_STATE == '3000' ? 'span-999999' : 'span-df7f42'">{{suggestionDetail.SUGGESTION_STATE_TEXT}}</span>
				</div>
				<p>
					<span class="serverpart-name" style="margin-right: 10px;">{{suggestionDetail.SERVERPART_NAME}}</span>
					<span class="span-color" style="margin-right: 10px;"><i class="img-tsr"></i>{{suggestionDetail.SUGGESTION_NAME}}</span>
					<span class="span-color" ><i class="img-dh"></i>{{suggestionDetail. PHONE_NUMBER}}</span>
				</p>
				<p class="suggestion-text">{{suggestionDetail.SUGGESTION_REASON}}</p>
				<block v-if="suggestionDetail.ImgList">
					
					<div class="img-list" v-if="suggestionDetail.ImgList.length > 2">
						
						<image mode="aspectFill" class="image220" lazy-load :src="item.IMAGE_URL" alt="" v-for="(item,i) in suggestionDetail.ImgList" :key="i" @tap="showImg(i)" />
						
					</div>
					<div class="img-list" v-else-if="suggestionDetail.ImgList.length ===1">
						
						<image mode="aspectFill" class="image683" lazy-load :src="item.IMAGE_URL" alt="" v-for="(item,i) in suggestionDetail.ImgList" :key="i" @tap="showImg(i)" />
						
					</div>
					<div class="img-list2" v-else-if="suggestionDetail.ImgList.length ===2">
					
						<image mode="aspectFill" class="image328" lazy-load :src="item.IMAGE_URL" alt="" v-for="(item,i) in suggestionDetail.ImgList" :key="i" @tap="showImg(i)" />
						
					</div>
				</block>
			</div>
			<div class="suggestion-resolve-box">
				<div class="suggestion-detail-middle" v-if="suggestionDetail.SUGGESTION_INFO">
					<p class="text-title">{{suggestionDetail.MANAGER_NAME}}</p>
					<p class="text-detail">{{suggestionDetail.SUGGESTION_INFO}}</p>
				</div>
				<div class="suggestion-detail-middle no-border" v-if="suggestionDetail.SUGGESTION_STATE === 2000 && suggestionDetail.SORTNUM===1">
					<span class="text-title">处理人</span>
					<span class="text-detail">{{suggestionDetail.DISPOSITION_PERSON}}</span>
				</div>
				
				<block  v-if="isDirector==1 ">
					<div class="suggestion-detail-middle">
						<p class="text-title">处理意见</p>
						<div class="text-detail textarea-box">
							<textarea auto-height v-model="suggestionIdea" placeholder="填写问题处理意见" cursor-spacing="100"/>
						</div>
					</div>
					
					<div class="suggestion-detail-middle no-border" @tap="cheose">
						<span class="text-title ">处理人</span>
						<picker mode="selector" @change="pickerChange" :value="pickerIndex" range-key="MEMBERSHIP_NAME" :range="dealerList" class="resolve-person text-detail">
							<view>{{pickerIndex==-1? '请选择': dealerList[pickerIndex].MEMBERSHIP_NAME}}</view>
						</picker>
					</div>
				</block>
				
				<div class="suggestion-detail-middle no-border" v-if="suggestionDetail.FEEDBACK_INFO">
					<p class="text-title">{{suggestionDetail.DISPOSITION_PERSON}}</p>
					<p class="text-detail">{{suggestionDetail.FEEDBACK_INFO}}</p>
				</div>
				<div class="suggestion-detail-middle no-border" v-if="isDirector==2">
					<p class="text-title">处理结果</p>
					<div class="text-detail textarea-box">
						<textarea auto-height v-model="suggestionIdea" placeholder="填写问题处理结果"  cursor-spacing="100"/>
					</div>
				</div>
				
			</div>
			
			<div v-if="suggestionDetail.SORTNUM===0">
				<button type="primary" class="suggestion-detail-btn"  @tap="submitSuggestion" :disabled="isPostMsg">提交</button>
			</div>
			
			
		</block>
		
		<block v-else>
			<noFound :nodata="suggestionDetail.SUGGESTION_STATE ? false : true"/>
		</block>
		
	</div>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				isShow: false,
				loadingType: 1,
				pickerIndex: -1,
				isDirector: 0, //判断主任还是处理人
				SUGGESTION_ID: '',//投诉建议ID
				suggestionDetail: [],
				imgList: [],
				suggestionHandle: '请选择', //处理人
				DispostionStaffId: '', // 处理人账号ID
				suggestionIdea: '', // 处理意见
				dealerList: [],
				isPostMsg:false
				
			};
		},
		computed:{
			...mapGetters({
				'user':'getUser',
				'shouldAuth':'shouldAuth'
			}),
			
			imageList () {
				let list = []
				if(this.suggestionDetail && this.suggestionDetail.ImgList){
					
					this.suggestionDetail.ImgList.map(n=>{list.push(n.IMAGE_URL)})
				}
				return list
			}
		},
		methods:{
			
			// 获取详情
			getSuggestionDetail() {
				let _this = this
				let key={1000:"待处理",2000:"待反馈",3000:"已处理"}
				this.$request.$get('GetSuggestionDetail',{
					
					action_data: _this.SUGGESTION_ID
				}).then(res =>{
					
					if(!res.ResultCode ||res.ResultCode!='100'){
						
						_this.isShow = false
					}else {
						
						_this.isShow = true
						let _data = res.Data
						_data.SUGGESTION_STATE_TEXT = key[_data.SUGGESTION_STATE]
						
						
						if(_data.SORTNUM == 0) { // 判断该条数据是否为待当前用户处理
							switch(_data.SUGGESTION_STATE) {
								case 1000: // 待处理
									_this.isDirector = 1
									_this.GetDispostion()
									break
								case 2000: // 待反馈
									_this.isDirector = 2
									break
								case 3000: // 待确认
									_this.isDirector = 3
									break
							}
						}
						_this.suggestionDetail = _data
					}
					
				})
			},
			GetDispostion(){ // 获取可选择处理人列表
				let _this = this
				this.$request.$post( 'GetDispostion',{
					SUGGESTION_ID: _this.SUGGESTION_ID
				}).then(res =>{
					let arr = []
					
					_this.dealerList = res.Data.List
		
				})
			},
			submitSuggestion(){ // 提交处理信息
				let _this = this
				if(_this.suggestionDetail.SUGGESTION_STATE == 1000 && _this.pickerIndex == -1){
					uni.showToast({
						icon: 'none',
						title: '请选择处理人'
					})
					return false
				}
				if(_this.suggestionIdea == ''){
					uni.showToast({
						icon: 'none',
						title: '请填写处理意见'
					})
					return false
				}
				uni.showLoading({
					title:'正在提交'
				})
				let json = {
					action_data:  _this.SUGGESTION_ID,
					action_record: _this.suggestionIdea,
					Person: _this.user.Membership_Id,
					USER_ID: _this.user.UserId,
					DispostionId: _this.dealerList.length>0? _this.dealerList[_this.pickerIndex].Membership_Id: '',
					DispostionStaffId: _this.dealerList.length>0? _this.dealerList[_this.pickerIndex].STAFF_ID: '',
					DispostionName: _this.dealerList.length>0? _this.dealerList[_this.pickerIndex].MEMBERSHIP_NAME: ''
				}
				if(_this.suggestionDetail.SUGGESTION_STATE == 2000){ // 如果是待反馈
				
					delete json.DispostionId
					delete json.DispostionStaffId
					delete json.DispostionIdName
				}
				_this.isPostMsg = true
				_this.$request.$post('ComplaintsHandling',json).then(res =>{
					if(res.ResultCode == 100){
						_this.$eventHub.$emit('hasInfo',true)
						_this.$eventHub.$emit('suggestion',true)
						uni.showToast({
							title: res.ResultDesc,
							success() {
								setTimeout(() => {
									
									uni.navigateBack({
										delta:1
									})
								}, 500)
							}
						})
					}else{
						uni.showToast({
							title: res.ResultDesc,
						})
					}
					_this.isPostMsg = false
				})
			},
			// 图片预览
			showImg(index) {
				uni.previewImage( {
					urls: this.imageList,
					current: index,
					loop: true,
					indicator: 'number'
				});
				
			},
			pickerChange(e){
			
				this.pickerIndex = e.detail.value
			},
			cheose() {
				if(this.isDirector === 1){
					if(this.dealerList.length == 0){
						uni.showToast({
							icon: 'none',
							title: '您没有可选择的处理人。请联系相关人员添加后重试！',
							duration:1000
						})
						return false
					}
					
				}
			},
		},
		onLoad(option) {
			let _this = this
			this.SUGGESTION_ID = option.SUGGESTION_ID
			if(option.source && option.source=='push' ){
				let _this = this
				setTimeout(function(){
					if(_this.shouldAuth){
						uni.showModal({
							title: '温馨提示',
							content: '请登录授权后进行操作。',
							confirmText: '去授权',
							success(res) {
								if(res.confirm) {
									_this.$util.toNextRoute('navigateTo', '/pages/register/register?source=detail')
									
								}
							}
						})
					}else{
						_this.getSuggestionDetail()
					}
				},1000)
			}
			this.getSuggestionDetail()
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onShow() {
			let _this = this
			if(_this.shouldAuth){
				_this.getSuggestionDetail()
				
			}
			this.$eventHub.$once('suggestion', function (data){
				if(data) {
					uni.showLoading({
						title:'正在加载'
					})
			
					_this.getSuggestionDetail()
				
				}
			});
		},
		onHide() {
			this.$eventHub.$off('suggestion', function (data) {
			 	// console.log('scanResult - '+data);
			});
		}
	}
</script>

<style scoped>
	
	*{
		box-sizing: border-box;
	}
	.suggestion-body {
		height: 100%;
	}
	i{
		width: 24upx;
		height: 24upx;
		margin-right: 8upx;
		display: inline-block;
		vertical-align: middle;
		background-size: contain;
	}
	.suggestion-detail-top {
		background-color: #fff;
		padding: 32upx;
	}
	.suggestion-text {
		font-size: 30upx;
		color: #000;
	}

	.span-df7f42{
		border: 1upx solid #df7f42;
		border-radius: 8upx;
		padding: 0 16upx;
		color: #df7f42;
		font-size: 24upx;
	}
	.span-999999{
		color: #999999;
		font-size: 26upx;
	}
	
	.suggestion-resolve-box {
		margin: 30upx;
		border-radius: 16upx;
		border:1upx solid #eee;
		background-color: #fff;
	}
	.suggestion-detail-middle{
		padding: 0 16upx;
		
	}
	.suggestion-detail-middle .text-title {
		width: 160upx;
		color: #242424;
		line-height: 96upx;
	}
	
	.suggestion-detail-middle .text-detail {
		width: 500upx;
		border-bottom: 1upx solid #eee;
		padding: 22upx 0;
		line-height: 50upx;
	}
	.no-border .text-detail {
		
		border-bottom: 0;
	}
	.suggestion-detail-middle .resolve-person {
		text-align: right;
		padding-right: 72upx;
		position: relative;
	}
	.suggestion-detail-middle .resolve-person:after{
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 0upx;
		top: 50%;
		color: #333;
		transform: translateY(-50%);
		font-size: 18px;
	}
	.suggestion-detail-top>div p{
		display: flex;
		align-items: center;
	}
	.suggestion-detail-top>div,.suggestion-detail-middle{
		display: flex;
		justify-content: space-between;
	}
	.suggestion-detail-top>p{
		display: flex;
		margin-top: 8upx;
		
	}
	.suggestion-detail-top span{
		font-size: 24upx;
	}
	
	.img-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 16upx;
	}
	.img-list .image220{
		width: 220upx;
		height: 212upx;
		margin-right: 10upx;
		margin-top: 10upx;
		border-radius: 8upx;
	}
	.img-list2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.img-list .image683 {
		width: 683upx;
		height: 357upx;
		border-radius: 8upx;
		/* margin-right: 16upx; */
	}
	.img-list .image220 {
		width: 218upx;
		height: 212upx;
		border-radius: 8upx;
		margin-right: 16upx;
		margin-bottom: 10upx;
	}
	.img-list .image220:nth-child(3n) {
		margin-right: 0;
		
	}
	.img-list2 .image328 {
		width: 328upx;
		height: 212upx;
		border-radius: 8upx;
		
	}
	.img-list .image328+.image328{
		margin-left: 24upx;
	}
	.serverpart-name {
		padding: 0 12upx;
		height: 40upx;
		text-align: center;
		line-height: 40upx;
		color: #666;
		border: 1upx solid #eee;
		border-radius: 20upx;
		justify-content: center;
	}
	.img-dh {
		background: url('../../static/images/mbwa/tsjy_dh.png') no-repeat center right;
		background-size: contain;
	}
	.img-tsr {
		background: url('../../static/images/mbwa/tsjy_ry2.png') no-repeat center right;
		background-size: contain;
	}
	.span-color{
		color: #808080;
		min-width: 130upx;
		display: inline-flex;
		align-items: center;
		magin-left: 20upx;
	}
	.textarea-box {
		display: flex;
		align-items: center;
		min-height: 52upx;
	}
	textarea {
		
		height: 40upx;
		line-height: 32upx;
		font-size: 28upx;
		width: 500upx;
		border: 0;
	
	}
	.suggestion-detail-btn{
		color: #FFFFFF;
		background-color: #444;
		height: 88upx;
		line-height: 88upx;
		/* width: 80%; */
		margin: 60upx 30upx;
		margin-top: 60upx;
		font-size: 30upx;
	}
</style>
