<template>
  <view class="articleDetails">
	  <view class="ad-box">
		  <view style="font-size: 21px;color: #1C1E1F;font-weight: bold;">{{article.Name}}</view>
		  <view class="ad-box-tx">
			  <u-avatar :src="article.TeacherLogo" size="60" v-if="article.TeacherLogo!=null && article.TeacherLogo!=''"></u-avatar>
			  <u-avatar :src="mall.setting.share_pic" size="60" v-if="article.TeacherLogo==null || article.TeacherLogo==''"></u-avatar>
			  <view class="ad-box-txr">
				  <text style="font-weight: bold;" v-if="article.TeacherName!=null && article.TeacherName!=''">{{article.TeacherName}}</text>
				  <text style="font-weight: bold;" v-if="article.TeacherName==null || article.TeacherName==''">{{mall.setting.share_title}}</text>
				  <text style="font-size: 11px;color: #9A9A9A;">{{article.CreateDate}}</text>
			  </view>
		  </view>
		  <view style="padding-top: 15px;">
			  <h-parse :content="article.Describe" @navigate="clickDescription"></h-parse>
		  </view>
		  
	  </view>
	  <view style="width: 100%;height: 15px;background: #F5F6F7;"></view>
	  <view class="tiaoti">
		  <view style="display: flex;flex-direction: row;align-items: center;">
			  <view class="tiaoti-l"></view>
			  <text style="font-size: 12px;color: #1C1E1F;margin-left: 5px;font-weight: bold;">{{count}}条留言</text>
		  </view>
		  
		  <view style="display: flex;flex-direction: row;align-items: center;" v-if="count>5" @click="gocomList">
				<text style="font-size: 13px;color: #909399;margin-right: 5px;">查看更多</text>
				<u-icon name="arrow" size='24' color='#909399' ></u-icon>
		  </view>
		  
	  	
	  </view>
	  <view style="margin-bottom: 60px;font-family: aa;">
		  <view class="comlist" v-for="(cx, ci) in commentList" :key="ci">
			  <view style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				  <view style="display: flex;flex-direction: row;align-items: center">
					  <u-avatar :src="cx.UserPhotoPath" size="50" ></u-avatar>
					  <text style="font-size: 13px;color: #121212;margin-left: 5px;width: calc(100vw - 165px);
						overflow: hidden;
					    text-overflow: ellipsis;
					    display: -webkit-box;
					    -webkit-line-clamp: 1;
					    -webkit-box-orient: vertical;">{{cx.UserName}}</text>
				  </view>
				  <text style="font-size: 11px;color: #9A9A9A;">{{cx.CreateDate}}</text>
			  </view>
			  <view style="width: 100%;margin-top: 10px;font-size: 11px;color: #121212;line-height: 18px;">
				  {{cx.Content}}
			  </view>
			  <view class="comment-dao" style="flex-wrap: wrap;margin-top: 5px;" v-if="cx.CommentImgList.length>0">
			  	<image
			  	v-for="(item, index) in cx.CommentImgList" :key="index"
			  	  mode="aspectFill"
			  	  :src="item"
					@click="previewImage2(index,cx.CommentImgList)"
			  	  :style="{'width':san,'height':san}"
			  	/>
			  </view>
		  </view>
	  </view>
	  <view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;color: #5A5A5A;margin-bottom: 60px;" v-if="commentList.length==0">
		  暂无留言~
	  </view>
	  <view class="comment" v-if="article.IsComment==1">
		  <input type="text" v-model="commentMsg.Content"  placeholder='留下您精彩的留言' class="commentinput" >
		  <view class="comment-pl" :style="{background:mainColor}" @click="addComment">留言</view>
	  </view>
    <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
  </view>
</template>

<script>
import hParse from "@/components/u-parse/parse.vue";
import auth from "@/components/auth/index.vue";
export default {
  components: {
    auth,
	hParse
  },
  data() {
    return {
	  pageTitle:'详情',
      g: [],
      showAuth: false,
      u: {},
      mainColor: "",
	  pricecolor:'',
	  windowWidth:0,
	  ID:0,
	  article:{},
	  mall:{},
	  commentList:[],//留言列表
	  commentMsg:{
		  PlatformSource:1,
		  ArticleId:0,
		  Content:'',
		  CommentImgList:[],
	  },
	  san:'100px',
	  count:0,
    };
  },
  mounted() {
    
    this.mainColor = this.$uiConfig.mainColor;
    this.pricecolor = this.$uiConfig.pricecolor;
	this.windowWidth = this.$utils.SystemInfo().windowWidth;
	this.mall = uni.getStorageSync("basedata")?uni.getStorageSync("basedata").mall:{};
	uni.setNavigationBarTitle({
	  title: this.pageTitle,
	});
  },
  onLoad(options) {
  	if(options && options.ID){
		this.ID = options.ID;//资讯id
		this.commentMsg.ArticleId = options.ID;
		this.init();
		this.getArticleCommentPageList()
	}
	let that = this
	uni.getSystemInfo({
		success(res) {
			
			that.san = (res.windowWidth-20)/3+'px'
		}
	})
  },

  methods: {
	init(){
	  this.request2({
	  		url: '/api/AppletSchool/GetArticleModel',
	  		data: {ID:this.ID}
	  	},
	  	res => {
	  		this.loading = false;
	  		this.isloading = false;
	  		if (res.resultCode == 1) {
	  			this.article= res.data;
				this.article.CreateDate = this.article.CreateDate.replace('T',' ')
	  		}
	  
	  		
	  	}
	  );
    },
	getArticleCommentPageList(){//留言列表
		this.request2({
				url: '/api/AppletSchool/GetArticleCommentPageList',
				data: {pageIndex:1,pageSize:5,CommentGrade:0,ArticleId:this.ID}
			},
			res => {
				this.commentList  = res.data.pageData;
				this.count = res.data.count;
			}
		);
	},
	addComment(){//新增留言
		this.u = uni.getStorageSync("mall_UserInfo");
		if (!this.u) {
		  this.u = {
			nickName: "未登录",
			avatarUrl: ""
		  };
		  this.showAuth = true;
		}	else{
			this.request2({
					url: '/api/AppletEducation/SetArticleCommentInfo',
					data: this.commentMsg
				},
				res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
					this.commentMsg.Content = '';
					this.getArticleCommentPageList()//留言了之后调取留言列表
				}
			);
		}
		
	},
	//图片预览
	previewImage2(index, images) {
	  uni.previewImage({
	    urls: images,
	    current: index,
	  });
	},
	gocomList(){//跳转全部留言
		uni.navigateTo({ url: "/pages/school/commentPageList?ID=" + this.ID });
	},
	clickDescription(e) {
	  console.log(e);
	},
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
    },
    //关闭登录窗口
    gbAuth() {
      this.showAuth = false;
    },
  },
};
</script>

<style>
.articleDetails{
	width: 100%;
	height: 100vh;
	background: #FFF;
	font-family: aa;
	
}
.articleDetails .ad-box{
	width: 100%;
	padding: 15px;
}
.articleDetails .ad-box-tx{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 25px;
}
.articleDetails .ad-box-txr{
	margin-left: 10px;
	width: calc(100vw - 70px);
	height: 35px;
	font-size: 13px;
	color: #121212;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
	.articleDetails .tiaoti{
		width: 100%;
		height: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;
	}
	.articleDetails .tiaoti-l{
		width: 3px;
		height: 14px;
		
		background-image: linear-gradient(
		  to bottom,
		  #00D6A6,
		  #B5FFEE
		);
	}
	.articleDetails .comment{
		width: 100%;
		height: 55px;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFF;
	}
	.comment .comment-pl{
		width: 56px;
		height: 26px;
		font-size: 13px;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		
	}
	.articleDetails .commentinput{
		width: calc(100vw - 120px);
		height: 30px;
		background: #F3FAF8;
		border-radius: 15px;
		font-size: 13px;
		padding: 0 10px;
	}
	.articleDetails .comlist{
		padding: 10px;
		width: 100%;
		
	}
	.articleDetails .comment-dao{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
</style>
