<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="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="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:['建议','投诉'],//导航列表
      merchantId:'',//商户Id
      openid:uni.getStorageSync('openid')||'',//openid
      suggestList:[],//建议列表
      complaintList:[],//投诉列表
    }
  },
  onLoad(option) {
    this.merchantId=option.merchantId||''
  },
  onShow() {
    this.initList()
  },
  methods:{
    //---导航切换
    tabChange(index){
      this.active=index
    },
    //---跳转建议提交页面
    goSuggestCommit(){
      uni.navigateTo({
        url:'/pages/my/suggestComplaint/suggestCommit/suggestCommit?merchantId='+this.merchantId
      })
    },
    //---跳转投诉提交页面
    goComplaintCommit(){
		  uni.navigateTo({
		    url:'/pages/my/suggestComplaint/complaintCommit/complaintCommit?merchantId='+this.merchantId
		  })
    },
    //---跳转建议详情页面
    goSuggestDetail(batchId){
      uni.navigateTo({
        url:'/pages/my/suggestComplaint/suggestDetail/suggestDetail?merchantId='+this.merchantId+'&batchId='+batchId
      })
    },
    //---跳转投诉详情页面
    goComplaintDetail(batchId){
		  uni.navigateTo({
		    url:'/pages/my/suggestComplaint/complaintDetail/complaintDetail?merchantId='+this.merchantId+'&batchId='+batchId
		  })
    },
    //---列表加载
    initList(){
      let data={
        merchantId:this.merchantId,//商户Id
        openid:this.openid,//openid
        pageIndex: 1,
        pageSize:9999
      }
      this.complaintList=[]
      this.suggestList=[]
      this.$request('comment/userComment/loadPage',data).then((res)=>{
			  if(res.code=='00'){
          let list=res.data.userCommentPageResVo.list||[]
          list.forEach(item=>{
            if(item.submitType==0){
              //投诉
              this.complaintList.push(item)
            }
            if(item.submitType==1){
              //建议
              this.suggestList.push(item)
            }
          })
			  }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;
		>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: 120rpx 20rpx 160rpx 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;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 20rpx 40rpx 60rpx 40rpx;
		border-top: 1px solid #EDEDED;
	}
	.empty{
		padding-top: 200rpx;
		text-align: center;
		color: #666666;
		image{
			width: 400rpx;
			height: 400rpx;
		}
	}
</style>