<template>
	<view>
		<u-navbar title="评论详细">
		  <template #right
		    ><view style="width: 50rpx; font-size: 32rpx">
		      <!-- <u-icon name="star" v-if="true"></u-icon> -->
			  <!-- <u-icon style="font-size:0.22rem;color:#ffc300" v-else  name="star-fill"></u-icon> -->
		    </view>
		  </template>
		</u-navbar>
		<!-- 评论 -->
		<view class="comment">
		  <view class="flex-col section_4">
		    <view class="justify-between group_8">
		      <text class="text_22">回复 {{total}}</text>
		    </view>
		    <view class="flex-col group_27">
		      <view class="flex-col group">
		       <view class="justify-between group_6">
		          <view class="flex-row">
		            <image
		              :src="$u.http.config.imgUrl + headData.userHead"
		              class="image image_6"
		            />
		            <text class="text_24">{{headData.userName}}</text>
					<text class="text_27">{{headData.creationTime}}</text>
		          </view>
		          <view class="flex-row group_12">
		            <text class="text_25">{{headData.likesCount}}</text>
		            <image
		              src="/static/common/img/homepage/like.png"
		              class="image_8"
		            />
		          </view>
		        </view>
			<view class="flex-col">
					<text class="text_26" @click="onreply">{{headData.content}}</text>
				<!-- 	<view class="justify-evenly section_5">
					  <text class="text_42">{{total}}回复</text>
					  <image
					    src="/static/common/img/16486282410596443868.png"
					    class="image_12"
					  />
					</view> -->
					<!-- <text class="text_27">{{headData.creationTime}}</text> -->
				</view>
				<view class="flex-col items-start group_9" v-for="(i,index) in commonData" :key="index">
				  <view class="flex-row group_13">
				    <image
				      :src="$u.http.config.imgUrl + i.userHead"
				      class="image image_9"
				    />
				    <view class="group_14">
				      <text class="text_28">{{i.userName}}</text>
					  <text class="text_30">{{i.creationTime}}</text>
				      <view class="flex-col items-start group_15">
				        <text class="text_29">{{i.content}}</text>
				      </view>
				    </view>
				  </view>
				</view>
		      </view>
		    </view>
		  </view>
		</view>
		<u-mask :show="show" @click="isMask">
			   <msgbox  @onsend="onSend" @onmsgShow="onMsgShow" ref="msg" :placeholder="placeholder"></msgbox>	   
		</u-mask>
	</view>
</template>

<script>
	import msgbox from "../../../components/messageBox.vue";
	export default {
		data(){
			return {
				data : {
					PageIndex:1,
					PageSize:10,
					Title:"",
					Keyword:"",
					id:"",
				},
				show:false,
				headData:{},
				commonData:[],
				placeholder:"",
				total:0,
			}
		},
		onLoad(e){
			this.headData = JSON.parse(e.head)
			this.data = JSON.parse(e.data)
			this.data.PageIndex = 1
			this.data.PageSize = 10
		},
		created(){
			this.getComment()
		},
		methods:{
			getComment(){
				this.$u.apiList.GetComment(this.data).then((res)=>{
					this.commonData = res.items
					this.total = res.items.length
				})
			},
			onreply(){
				this.show = true
				this.placeholder = '回复'+this.headData.userName
				this.$refs.msg.placeholder = this.placeholder
			},
			isMask(){
				this.show =false
			},
			onSend(msg){
				  const data = {
						commendId:this.headData.commendId,
						articleId:this.headData.articleId,
						userId:this.vuex_user.id,
						replyUserId:this.headData.userId,
						content:msg,
						level:1,
						type:this.headData.type
				  }
				  this.$u.apiList.InsertComment(data).then((res)=>{
						this.getComment()
				  })
			},
			onMsgShow(val){
				  this.isMsgShow = val
				  this.show = val
			},
		},
		components: {
		  msgbox: msgbox,
		},
	}
</script>

<style lang="scss" scoped>
	.comment {
	  .section_4 {
	    padding: 0.26rem 0.14rem 0.61rem 0.16rem;
	    background-color: rgb(255, 255, 255);
		// margin-top:0.1rem;
		.section_5 {
		  margin-top: 0.13rem;
		  padding: 0.04rem 0.05rem 0.05rem 0.095rem;
		  background-color: rgb(246, 247, 250);
		  border-radius: 0.1rem;
		  width: 0.6rem;
		  .text_42 {
		    color: rgb(2, 2, 2);
		    font-size: 0.12rem;
		    font-family: Adobe Heiti Std;
		    line-height: 0.11rem;
		  }
		  .image_12 {
		    margin-top: 0.015rem;
		    width: 0.05rem;
		    height: 0.09rem;
		  }
		}
	    .group_8 {
	      margin-left: 0.025rem;
	      .text_22 {
	        margin-bottom: 0.02rem;
	        color: rgb(2, 2, 2);
	        font-size: 0.15rem;
	        font-family: Adobe Heiti Std;
	        line-height: 0.14rem;
	      }
	      .text_23 {
	        color: rgb(180, 182, 189);
	        font-size: 0.15rem;
	        font-family: Adobe Heiti Std;
	        line-height: 0.17rem;
	      }
	    }	
	    .group_27 {
	      margin-top: 0.25rem;
	      .group {
	        padding: 0 0.005rem;
	        .group_6 {
	          margin-right: 0.02rem;
	          .group_12 {
	            margin-top: 0.04rem;
	            .text_25 {
	              margin-top: 0.04rem;
	              color: rgb(2, 2, 2);
	              font-size: 0.15rem;
	              font-family: Adobe Heiti Std;
	              line-height: 0.12rem;
	            }
	            .image_8 {
	              margin-left: 0.045rem;
	              flex-shrink: 0;
	              width: 0.16rem;
	              height: 0.15rem;
				  transform: translateY(0.02rem);
	            }
	          }

	          .image_6 {
	            flex-shrink: 0;
	          }
	          .text_24 {
	            margin-left: 0.13rem;
	            margin-top: 0.07rem;
	            color: rgb(2, 2, 2);
	            font-size: 0.13rem;
	            font-family: Adobe Heiti Std;
	            line-height: 0.13rem;
	          }

			  .text_27 {
				margin-left: 0.13rem;
				margin-top: 0.07rem;
				align-self: flex-start;
				color: rgb(180, 182, 189);
				font-size: 0.12rem;
				font-family: Adobe Heiti Std;
				line-height: 0.12rem;
			  }
	        }
	        .text_26 {
			  width: 100%;
			  padding-left: 0.4rem;
	          margin-top: 0.075rem;
	          align-self: center;
	          color: rgb(55, 59, 72);
	          font-size: 0.15rem;
	          font-family: Adobe Heiti Std;
	          line-height: 0.14rem;
	        }
	      }
	      .group_9 {
	        margin-top: 0.14rem;
	        padding: 0 0.38rem;
	        .group_13 {
	          margin-left: 0.035rem;
	          .image_9 {
	            flex-shrink: 0;
	          }
	          .group_14 {
	            margin-left: 0.18rem;
	            margin-top: 0.05rem;
	            flex: 1 1 auto;
	            .text_28 {
	              align-self: flex-start;
	              color: rgb(2, 2, 2);
	              font-size: 0.13rem;
	              font-family: Adobe Heiti Std;
	              line-height: 0.13rem;
	            }
				.text_30 {
	                margin-left: 0.13rem;
	                margin-top: 0.045rem;
	                color: rgb(180, 182, 189);
	                font-size: 0.12rem;
	                font-family: Adobe Heiti Std;
	                line-height: 0.12rem;
	              }
	            .group_15 {
	              margin-top: 0.12rem;
	              .text_29 {
	                color: rgb(55, 59, 72);
	                font-size: 0.15rem;
	                font-family: Adobe Heiti Std;
	                line-height: 0.14rem;
	              }
	            }
	          }
	        }
	        .group_16 {
	          margin-left: 0.035rem;
	          margin-top: 0.11rem;
	          width: 1.09rem;
	          .group_17 {
	            margin-top: 0.075rem;
	            .text_31 {
	              align-self: flex-start;
	              color: rgb(2, 2, 2);
	              font-size: 0.13rem;
	              font-family: Adobe Heiti Std;
	              line-height: 0.1rem;
	            }
	            .group_18 {
	              margin-top: 0.14rem;
	              padding-left: 0.015rem;
	              .text_32 {
	                color: rgb(55, 59, 72);
	                font-size: 0.15rem;
	                font-family: Adobe Heiti Std;
	                line-height: 0.14rem;
	              }
	              .text_33 {
	                margin-top: 0.03rem;
	                color: rgb(180, 182, 189);
	                font-size: 0.12rem;
	                font-family: Adobe Heiti Std;
	                line-height: 0.12rem;
	              }
	            }
	          }
	        }
	        .group_19 {
	          margin-left: 0.05rem;
	          margin-top: 0.12rem;
	          width: 1.07rem;
	          .group_20 {
	            margin-top: 0.07rem;
	            .text_34 {
	              align-self: flex-start;
	              color: rgb(2, 2, 2);
	              font-size: 0.13rem;
	              font-family: Adobe Heiti Std;
	              line-height: 0.12rem;
	            }
	            .group_21 {
	              margin-top: 0.14rem;
	              .text_35 {
	                color: rgb(55, 59, 72);
	                font-size: 0.15rem;
	                font-family: Adobe Heiti Std;
	                line-height: 0.14rem;
	              }
	              .text_36 {
	                margin-left: 0.01rem;
	                margin-top: 0.03rem;
	                color: rgb(180, 182, 189);
	                font-size: 0.12rem;
	                font-family: Adobe Heiti Std;
	                line-height: 0.12rem;
	              }
	            }
	          }
	        }
	       
	      }
	      .image {
	        width: 0.3rem;
	        height: 0.3rem;
			border-radius:50%;
	      }
	    }
	  }
	}
</style>