<template>
	<view class="wrap">
		<view class="top">
			<view v-for="(item,index) in tabList" :key="index" @click="tabChange(index)" :class="{on:active==index}">
				<view>{{item}}</view>
				<view class="line" v-show="active==index"></view>
			</view>
		</view>
		
		<view class="middle">
			<!-- 建议列表 -->
			<template v-if="active==0">
				<view class="middle-list" v-for="(item,index) in suggestList" :key="index"  @click="goSuggestDetail(item.batchId)">
					<view class="list-time">
						<text>{{item.createTime}}</text>
						<text>查看回复</text>
					</view>
					<view class="list-content txt-cut">
						{{item.commentText}}
					</view>
				</view>
				<view class="more" @click="initList()" v-if="suggestList.length>0&&showMore">查看更多</view>
				<view class="empty" v-if="suggestList.length==0">
					<image src="@/static/img/common/empty.png"></image>
					<view>暂无建议记录</view>
				</view>
			</template>
			<!-- 投诉列表 -->
			<template v-else>
				<view class="middle-list" v-for="(item,index) in complaintList" :key="index" @click="goComplaintDetail(item.batchId)">
					<view class="list-time">
						<text>{{item.createTime}}</text>
						<text>查看回复</text>
					</view>
					<view class="list-content">
						{{item.commentText}}
					</view>
				</view>
				<view class="more" @click="initList()" v-if="complaintList.length>0&&showMore">查看更多</view>
				<view class="empty" v-if="complaintList.length==0">
					<image src="@/static/img/common/empty.png"></image>
					<view>暂无投诉记录</view>
				</view>
			</template>
		</view>
		
		<view class="bottom" v-if="merchantId">
			<text class="full-btn" v-if="active==0" @click="goSuggestCommit()">我要建议</text>
			<text class="full-btn" v-else @click="goComplaintCommit()">我要投诉</text>
		</view>
	</view>
</template>

<script>
export default{
  data(){
    return{
      active:0,//导航下标
      tabList:['建议','投诉'],//导航列表
      openid:uni.getStorageSync('openid')||'',//openid
      complaintList:[],//投诉列表
      suggestList:[],//建议列表
      merchantId:'',//商户Id
      showMyData:false,//是否显示私有数据，默认显示公共数据，从个人中心跳转到当前页面时只显示自己的投诉建议
      pageIndex:1,//第几页
      showMore:false,//是否显示查看更多
    }
  },
  onLoad(option) {
    this.merchantId=option.merchantId||''
    if(option.showMyData){
      this.showMyData=true
    }
  },
  onShow() {
    this.complaintList=[]
    this.suggestList=[]
    this.initList()
  },
  methods:{
    //---导航切换
    tabChange(index){
      this.active=index
    },
    //---跳转投诉提交页面
    goComplaintCommit(){
		  uni.navigateTo({
		    url:'/pages/my/suggestComplaint/complaintCommit/complaintCommit?merchantId='+this.merchantId
		  })
    },
    //---跳转投诉详情页面
    goComplaintDetail(batchId){
		  uni.navigateTo({
		    url:'/pages/my/suggestComplaint/complaintDetail/complaintDetail?merchantId='+this.merchantId+'&batchId='+batchId
		  })
    },
    //---跳转建议提交页面
    goSuggestCommit(){
		  uni.navigateTo({
		    url:'/pages/my/suggestComplaint/suggestCommit/suggestCommit?merchantId='+this.merchantId
		  })
    },
    //---跳转建议详情页面
    goSuggestDetail(batchId){
		  uni.navigateTo({
		    url:'/pages/my/suggestComplaint/suggestDetail/suggestDetail?merchantId='+this.merchantId+'&batchId='+batchId
		  })
    },
    //---列表加载
    initList(){
		  let data={
		    merchantId:this.merchantId,//商户Id
		    pageIndex:this.pageIndex,
		    pageSize:50
		  }
		  if(this.showMyData){
		    //显示私有数据
		    data.openid=this.openid
		  }else{
		    //显示公共数据
		    data.publicStatus=1
		  }
		  this.$request('comment/userComment/loadPage',data).then((res)=>{
			  if(res.code=='00'){
		      let list=res.data.userCommentPageResVo.list||[]
          let total=res.data.userCommentPageResVo.pageTotal
		      list.forEach(item=>{
		        if(item.submitType==0){
		          //投诉
		          this.complaintList.push(item)
		        }
            if(item.submitType==1){
						  //建议
						  this.suggestList.push(item)
            }
		      })
          let length=this.complaintList.length+this.suggestList.length
          if(length<total){
					  this.pageIndex++
					  this.showMore=true
          }else{
					  this.showMore=false
          }
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  })
    }
  }
}
</script>

<style lang="scss" scoped>
	.top{
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: top;
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100rpx;
		color: #999;
		z-index: 1;
		>view{
			padding: 20rpx 60rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		>view.on{
			color: #333333;
		}
	}
	.line{
		height: 6rpx;
		background: #000000;
		border-radius: 6rpx;
		margin-top: 6rpx;
	}
	.middle{
		padding: 100rpx 20rpx 220rpx 20rpx;
	}
	.middle-list{
		background: #ffffff;
		border-radius: 8rpx;
		padding: 40rpx;
		margin-top: 20rpx;
	}
	.list-time{
		display: flex;
		justify-content: space-between;
		text:last-child{
			color: #1C397C;
		}
	}
	.list-content{
		margin-top: 24rpx;
		line-height: 36rpx;
	}
	.more{
		text-align: center;
		margin: 30rpx;
	}
	.empty{
		padding-top: 200rpx;
		text-align: center;
		color: #666666;
		image{
			width: 400rpx;
			height: 400rpx;
		}
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 20rpx 40rpx 60rpx 40rpx;
		border-top: 1px solid #EDEDED;
	}
</style>