<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">
						<span class="text-title ">处理人</span>
						<span class="resolve-person text-detail" v-if="isLoadingDelPerson" @click="choeseDelPerson">请选择</span>
						<picker class="resolve-person text-detail" mode="selector"
							v-else-if="dealerList.length>0"
							:value="pickerIndex" range-key="MEMBERSHIP_NAME" :range="dealerList"
							@change="pickerChange"
							>
							<view>{{pickerIndex==-1? '请选择': dealerList[pickerIndex].MEMBERSHIP_NAME}}</view>
						</picker>
						<span v-else class="resolve-person text-detail" @tap="choeseDelPerson">请选择</span>
					</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,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				isShow: false,
				isLoadingDelPerson: true,
				loadingType: 1,
				pickerIndex: -1,
				isDirector: 0, //判断主任还是处理人
				SUGGESTION_ID: '',//投诉建议ID
				suggestionDetail: [],
				imgList: [],
				suggestionHandle: '请选择', //处理人
				DispostionStaffId: '', // 处理人账号ID
				suggestionIdea: '', // 处理意见
				dealerList: [],
				isPostMsg:false

			};
		},
		computed:{
			...mapGetters({
				'user':'getUser',

			}),

			imageList () {
				let list = []
				if(this.suggestionDetail && this.suggestionDetail.ImgList){

					this.suggestionDetail.ImgList.map(n=>{list.push(n.IMAGE_URL)})
				}
				return list
			}
		},
		methods:{
			...mapMutations(['shouldReLoadingList']),
			// 获取详情
			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 {


						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
						_this.isShow = true
					}

				})
			},
			GetDispostion(){ // 获取可选择处理人列表
				let _this = this
				_this.isLoadingDelPerson =true
				this.$request.$get( 'GetDispostion',{
					SUGGESTION_ID: _this.SUGGESTION_ID
				}).then(res =>{
					let arr = []
					_this.isLoadingDelPerson = false
					uni.hideLoading()
					_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){

						uni.showToast({
							title: res.ResultDesc,
							icon: 'success',
							success() {
								setTimeout(() => {


									uni.navigateBack({
										delta:1
									})
								}, 500)
							}
						})
						_this.shouldReLoadingList(true)
					}else{
						uni.showToast({
							title: res.ResultDesc,
						})
					}
					_this.isPostMsg = false
				})
			},
			// 图片预览
			showImg(index) {
				uni.previewImage( {
					urls: this.imageList,
					current: index,
					loop: true,
					indicator: 'number'
				});

			},
			choeseDelPerson(){
				if(this.isLoadingDelPerson) {
					uni.showLoading({
						title:' 正在加载...'
					})
					return
				}
				if(this.dealerList.length == 0){
					uni.showToast({
						icon: 'none',
						title: '您没有可选择的处理人。请联系相关人员添加后重试！',
						duration: 2000
					})
					return false
				}
			},
			pickerChange(e){

				this.pickerIndex = e.detail.value
			},

		},
		onLoad(option) {
			let _this = this
			this.SUGGESTION_ID = option.SUGGESTION_ID
			if(option.source && option.source=='push' ){
				let _this = this
				setTimeout(function(){

					_this.getSuggestionDetail()

				},1000)
			}else{

				this.getSuggestionDetail()
			}
		},
		onUnload() {
			this.$util.addUserBehavior()
		}


	}
</script>

<style scoped>

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


	.suggestion-resolve-box {
		margin: 30rpx;
		border-radius: 16rpx;
		border:1rpx solid #eee;
		background-color: #fff;
	}
	.suggestion-detail-middle{
		padding: 0 16rpx;

	}
	.suggestion-detail-middle .text-title {
		width: 160rpx;
		color: #242424;
		line-height: 96rpx;
	}

	.suggestion-detail-middle .text-detail {
		width: 500rpx;
		border-bottom: 1rpx solid #eee;
		padding: 22rpx 0;
		line-height: 50rpx;
	}
	.no-border .text-detail {

		border-bottom: 0;
	}
	.suggestion-detail-middle .resolve-person {
		text-align: right;
		padding-right: 72rpx;
		position: relative;
	}
	.suggestion-detail-middle .resolve-person:after{
		font-family: uniicons;
		content: '\E583';
		position: absolute;
		right: 0rpx;
		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: 8rpx;

	}
	.suggestion-detail-top span{
		font-size: 24rpx;
	}

	.img-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 16rpx;
	}
	.img-list .image220{
		width: 220rpx;
		height: 212rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
		border-radius: 8rpx;
	}
	.img-list2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.img-list .image683 {
		width: 683rpx;
		height: 357rpx;
		border-radius: 8rpx;
		/* margin-right: 16rpx; */
	}
	.img-list .image220 {
		width: 218rpx;
		height: 212rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		margin-bottom: 10rpx;
	}
	.img-list .image220:nth-child(3n) {
		margin-right: 0;

	}
	.img-list2 .image328 {
		width: 328rpx;
		height: 212rpx;
		border-radius: 8rpx;

	}
	.img-list .image328+.image328{
		margin-left: 24rpx;
	}
	.serverpart-name {
		padding: 0 12rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #666;
		border: 1rpx solid #eee;
		border-radius: 20rpx;
		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: 130rpx;
		display: inline-flex;
		align-items: center;
		magin-left: 20rpx;
	}
	.textarea-box {
		display: flex;
		align-items: center;
		min-height: 52rpx;
	}
	textarea {

		height: 40rpx;
		line-height: 32rpx;
		font-size: 28rpx;
		width: 500rpx;
		border: 0;

	}
	.suggestion-detail-btn{
		color: #FFFFFF;
		background-color: #444;
		height: 88rpx;
		line-height: 88rpx;
		/* width: 80%; */
		margin: 60rpx 30rpx;
		margin-top: 60rpx;
		font-size: 30rpx;
	}
</style>
