<template>
  <view class="guidercarCommentList" :style="{ height: contentHeight }">
    <u-tabs
	  name="name"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      :active-color="mainColor"
      
    ></u-tabs>
	
    <u-empty v-if="g.length == 0" text="暂无评论" mode="list"></u-empty>

    <view
      v-if="g.length > 0"
      style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;
        
      "
    >
      <scroll-view
        :scroll-y="true"
        :enable-back-to-top="true"
        :enable-flex="true"
        @scrolltolower="lower"
        :style="{ height: '100%' }"
      >
        <view class="interDList" v-for="(x, i) in g" :key="i">
			<view class="comment-dao" style="justify-content: space-between;">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<u-avatar :src="x.UserPhotoPath" :size="50"></u-avatar>
					<span style='font-size: 14px;color: #000000;width: 200rpx; margin-left: 10px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;'>
						{{x.UserName}}
					</span>
				</view>
				<span style='font-size: 12px;color: #AAAAAA;'>{{x.CommentList[0].CreateDate}}</span>
			</view>
			<view class="comment-dao" >
				<u-rate
				  :current="x.CommentList[0].CommentScore"
				  active-color="#FF4442"
				  inactive-color="#b2b2b2"
				  active-icon="star"
				  inactive-icon="star-o"
				  size="20"
					:disabled="true"
				></u-rate>
				<span style='font-size: 11px;color: #565656;margin-left: 15px;'>导游:{{x.CommentList[1].GuideName}}</span>
			</view>
			<view class="comment-dao" style="padding: 10px 0;">
				<span>{{x.CommentList[1].Content}}</span>
			</view>
			<view class="comment-dao" style="flex-wrap: wrap;">
				<image
				v-for="(item, index) in x.CommentList[1].CommentImgList" :key="index"
				  mode="aspectFill"
				  :src="item"
				  :style="{'width':san,'height':san}"
				/>
			</view>
			<view style="width: 100%;height: 1px;background: rgba(0, 0, 0, 0.1);margin: 10px 0;"></view>
			
			 <view class="comment-dao" >
			 	<u-rate
			 	  :current="x.CommentList[0].CommentScore"
			 	  active-color="#FF4442"
			 	  inactive-color="#b2b2b2"
			 	  active-icon="star"
			 	  inactive-icon="star-o"
			 	  size="20"
			 		:disabled="true"
			 	></u-rate>
			 	<span style='font-size: 11px;color: #565656;margin-left: 15px;'>{{x.CommentList[0].CarBrandName}},{{x.CommentList[0].CarColorName}}</span>
			 </view>
			 <view class="comment-dao" style="padding: 10px 0;">
			 	<span>{{x.CommentList[0].Content}}</span>
			 </view>
			 <view class="comment-dao" style="flex-wrap: wrap;">
			 	<image
			 	v-for="(item, index) in x.CommentList[0].CommentImgList" :key="index"
			 	  mode="aspectFill"
			 	  :src="item"
			 	  :style="{'width':san,'height':san}"
			 	/>
			 </view>
        </view>
       <u-loadmore
         :status="status"
         :load-text="loadText"
         :font-size="24"
         :margin-top="20"
         :margin-bottom="20"
         bg-color="#f3f4f6"
       />
      </scroll-view>
	 
    </view>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <u-loading mode="flower" size="48">></u-loading>
      <Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
    </view>
    <!-- 取消提示 -->

    <u-toast ref="uToast" />
   
  </view>
</template>

<script>

export default {

  data() {
    return {
      pageTitle: "评论",
      current: 0,
      list: [

      ],
	  
	  msg:{
		 GoodsId:0,
		 pageIndex:1,
		 pageSize:10,
		 CommentGrade:0,
		  
	  },
      mainColor: "",
	  secondary:'',
      contentHeight: 0,
      page: 1,
      page_count: 1,
      g: [],
      loading: false,
      san:'100px',
	  status: "loadmore",
	  loadText: {
	    loadmore: "轻轻上拉，加载更多",
	    loading: "努力加载中",
	    nomore: "没有更多了",
	  },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
	this.secondary = this.$uiConfig.secondary;
  },
  mounted() {
  
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
	let that = this
	uni.getSystemInfo({
		success(res) {
			that.san = (res.windowWidth-30)/3+'px'
		}
	})
	
  },
	onLoad(options){
		if(options && options.GoodsId){
			this.msg.GoodsId = options.GoodsId;
			// this.init();
			this.getAppletGoodsCommentStatistics();//获取商品评论数
		}
			
		
	},
  methods: {
    change(index) {
		
      this.current = index;
	  this.msg.CommentGrade = this.list[index].Id
      this.msg.pageIndex = 1;
      this.g = [];
      this.loading = true;
      this.init();
    },
    init() {
		this.loading = true;
		
      this.request2(
      	{
      		url: '/api/AppletGuideCar/GetAppletGoodsCommentPageList',
      		data: this.msg
      	},
      	res => {
      			
      		if(res.resultCode==1){
				this.loading = false;
				this.g = this.g.concat(res.data.pageData);
				 this.page_count = res.data.pageCount;
				 if (this.page_count == 1) {
				   this.status = "nomore";
				 }
      		}
      	}
      );
    },
	getAppletGoodsCommentStatistics(){
		this.request2(
		  {
		    url: "/api/AppletGuideCar/GetAppletGoodsCommentStatistics",
		    data: {
				GoodsId:this.msg.GoodsId
			},
		  },
		  (res) => {
		  
		  let data = res.data.List
		  data.forEach(x=>{
			  x.name = x.Name+'(' + x.Count + ')'
		  })
		  data.unshift({name:'全部',Id:0})
		  this.list = data
		  this.msg.CommentGrade = data[0].Id
		   this.init();
		  }
		);
	},
    lower(e) {
	  if (this.msg.pageIndex < this.page_count) {
		this.msg.pageIndex++;
			this.status = "loading";
		this.init();
	  } else {
		
			this.status = "nomore";
	  }
    },
	
	
  },
};
</script>
<style>
.guidercarCommentList {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.guidercarCommentList .loading {
  width: 200rpx;
  height: 200rpx;
  background: #000000;
  opacity: 0.7;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  top: 30%;
  margin-left: -100rpx;
  z-index: 999;
}
.guidercarCommentList .interDList{
	width:100% ;
	padding: 20px 15px;
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 10px;
}
.guidercarCommentList .comment-dao{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	
}
</style>
