<template>
	  <view>
	      <view class="complaintContainer">
	          <view class="complaint" @click="toComplaintDetail(item)" v-for="(item, index) in complaint" :key="index">
	              <view class="complain">
	                  <view class="complaintHead">
	                      <view>标题</view>
	                      <view class="complaintTitle">{{item.complaintTitle}}</view>
	                  </view>
	                  <view class="complaintBody">
	                      <view>摘要</view>
	                      <view class="complaintContent">{{item.complaintDetail}}</view>
	                  </view>
	              </view>
	              <view>
	                  <view class="dispose">{{item.status}}</view>
	              </view>
	          </view>	  
	      </view>
	      <!-- 开始写建议按钮 -->
	      <view class="b-button-wrapper">
	          <view class="b-button" @click="toWriteComplaint">
	              <text>写投诉</text>
	          </view>
	      </view>
	  </view>
</template>

<script>
	export default {
		data() {
			return {
				complaint: [],
				queryObj: {
					pageNum: 1,
					pageSize: 5
				}
			};
		},
		onShow() {
			this.init();
		},
		methods:{
			async init(){
				const { data: result } =await uni.$http.get('/education/my-complaint/findPersonComplaint',this.queryObj)
				this.complaint = result.data.data;
			},
			// 点击建议列表，跳转到对应的建议详情页
			toComplaintDetail(item){
				let complaint = JSON.stringify(item)
				uni.navigateTo({
					url: '/subpkg/my/complaint/my_complaint_detail?item=' + encodeURIComponent(complaint)
				})
			},
			// 跳转到写建议页面
			toWriteComplaint(){
			   uni.navigateTo({
			   	url: '/subpkg/my/complaint/my_complaint_write'
			   })
			}
			
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		// background-color: #FFF;		
	}
</style>

<style lang="scss" scoped>
/* 页面背景 */
// page{
//     /* height: 100%; */
//     /* height: auto !important; */
//     background-color: #E2F0D9;
// }

/* 建议列表区 */
.complaintContainer{
    height: 100%;
    padding-bottom: 120rpx;
			font-size: 30rpx;
}

/* 单条建议的背景 */
.complaint{
	    display: flex;
	    padding: 20rpx;
	    margin: 30rpx;
	    height: 100rpx;
	    border-radius: 30rpx;
	    background-color: #FFF;
		align-items: center;
		justify-content: center;
}

/* 单条建议左侧标题和内容摘要 */
.complain{
    width: 75%;
}

/* 标题和内容摘要布局 */
.complaintHead,
.complaintBody{
    display: flex;
}

/* 摘要 */
.complaintBody{
    margin-top: 10rpx;
}

/* 标题详情和内容详情左边距 */
.complaintTitle,
.complaintContent{
    margin-left: 20rpx;
    width: 65%;
}

/* 标题内容详情 */
.complaintTitle{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 内容摘要详情 */
.complaintContent{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 处理状态 */
.dispose{
    font-weight: bold;
    color: red;
    margin-left: 30rpx;
}

	// 底部按钮
	.b-button-wrapper{
		display: flex;//要加上，否则，剧中无效
		position: absolute;
		bottom: 60rpx;
		height: 140rpx;
		width: 100%;
		align-items: center;
		justify-content: center;
		
	}	
	.b-button {
		width: 300rpx;
		border-radius: 50rpx;
		// margin-bottom: 40rpx;
		background-color: #35b882;
		height: 85rpx;
		font-size: 30rpx;
		color:#fff;
		display: flex;//要加上，否则，剧中无效
		align-items: center;
		justify-content: center;
	}
	
</style>