<template>
	<view>
		<view style="height: 50px;"></view>
		<view class="interact-fixed">
			<view class="interact-bar" style="display: flex;">
				<view class="interact-bar-item" style="width: 50%;">
					<slot>
						<view class="field" @click="openInput()">
							<u-icon name="edit-pen-fill" size="18" class="field-icon"></u-icon>
							<text class="wenz">写评论</text>
						</view>
					</slot>
				</view>
				<!-- <view v-if="answers"  class="interact-bar-item">
					<view class="interact-bar-icon"><image style="width:34upx;height: 31upx;" src="/static/images/icon/comment.png" alt=""></view>
					<view class="interact-bar-txt">{{data.answers}}</view>
				</view> -->
				<view class="" style="display:flex;width: 50%;justify-content: flex-end;padding-right: 20rpx;margin-top: 16upx;">
					<view v-if="comments"  class="interact-bar-item" @click="handleComment()">
						<view class="interact-bar-icon"><image style="width:40upx;height: 40upx;" src="/static/images/icon/comment.png" alt=""></view>
						<!-- <view class="interact-bar-txt">{{data.comments}}</view> -->
					</view>
					<view v-if="praises" @click="addPraise" class="interact-bar-item">
						<view class="interact-bar-icon" v-if="isPraise"><image style="width:40upx;height: 40upx;" src="/static/images/icon/artice-praise-active.png" alt="" ></view>
						<view class="interact-bar-icon" v-else><image style="width:40upx;height: 40upx;" src="/static/images/icon/artice-praise.png" alt="" ></view>
						<!-- <view class="interact-bar-txt">{{data.praises}}</view> -->
					</view>
					<view v-if="favorites"  @click="addFavorite()" class="interact-bar-item">
						<view class="interact-bar-icon" v-if="isFavorite"><image style="width:40upx;height: 40upx;" src="/static/images/icon/favorite-active.png" alt="" ></view>
						<view class="interact-bar-icon" v-else><image style="width:40upx;height: 40upx;" src="/static/images/icon/favorite.png" alt="" ></view>
						<!-- <view class="interact-bar-txt">收藏</view> -->
						<!-- <view class="interact-bar-txt">{{data.favorites}}</view> -->
						<!-- 这里需要一个是否已经收藏的变量来控制，已收藏就显示收藏数 -->
					</view>
					<view v-if="shares" @click="addShare" class="interact-bar-item">
						<view class="interact-bar-icon"><image style="width:40upx;height: 40upx;" src="/static/images/icon/share.png" alt=""></view>
						<!-- <view class="interact-bar-txt">分享</view> -->
					</view>
				</view>
			</view>
			
		</view>
		<u-toast ref="interactToast"></u-toast>
		<u-popup :show="inputShow" @close="closeInput" @open="openInput" :round="16">
		  <view class="users-box" v-show="usersListShow">
		  	<view class="users-list" v-for="u in usersList" :key="u.id" @click="userSelect(u)">
		  		<u-avatar shape="circle" :size="50" v-if="u.avatar != ''" :src="u.avatar"></u-avatar>
				<view v-else>
					<u-avatar shape="circle" v-if="u.sex === 1" :size="50" src="../../static/images/man.png"></u-avatar>
					<u-avatar shape="circle" v-else :size="50" src="../../static/images/woman.png"></u-avatar>
				</view>
		  		<!-- <u-avatar v-else :size="25" random-bg-color :text="data.name" shape="square"></u-avatar> -->
		  	    <view class="uavatar-scale">{{u.name}}</view>
		  	</view>
		  </view>
			
			<view>
				<view style="padding: 40upx 44upx 32upx 22upx;">
					<view ><u--textarea style="border: none;background: #F4F4F4;" :height="50" v-model="inputValue" placeholder="写下您的评论(140字以内),可以@作者哦～" count ></u--textarea></view>
					<view style="padding-top: 10px;line-height: 80upx;display: flex;float: right;">
						<view @click="usersClick()">@</view>
						<view style="padding:20upx;"><u-button @click="submit" style="padding: 2upx 30upx;height: 52upx;background: #87B3FF;border-color: #87B3FF;" type="primary" text="发布"></u-button></view>
					</view>
				</view>
				<view>
					
				</view>
			</view>
		</u-popup>
		<interact-share ref="comShare" :data="data":type="type"></interact-share>
	</view>
</template>
<script>
	import apiPraises from '@/api/modules/praises.js'
	import apiComment from '@/api/modules/comments.js'
	import apiShares from '@/api/modules/shares.js'
	import apiFavorites from '@/api/modules/favorites.js'
	import apiUser from '@/api/system/user.js'
	import apiCoursePortal from '@/api/modules/coursePortal.js'
	import apiMessage from '@/api/system/message.js'
	import { mapGetters } from 'vuex';
export default {
  props: {
    data:{
      type:Object,
      default(){
        return{
			id:'',
			type:1,
            answers:23,
            favorites:23,
            comments:18,
            shares:16,
            praises:68,
            views:12,
          }
      }
    },
    align:{
      type:String,
      default:'right'
    },
    answers:{
      type:Boolean,
      default:false
    },
    comments:{
      type:Boolean,
      default:true
    },
    favorites:{
      type:Boolean,
      default:true
    },
    shares:{
      type:Boolean,
      default:true
    },
    praises:{
      type:Boolean,
      default:true
    },
    views:{
      type:Boolean,
      default:true
    },
	type:{
	  type:Number,
	  default:0 //默认是课程
	},
	users:{
		// type:Object,
	}
  },
  computed:{
	  ...mapGetters(['userInfo']),
  },
  data(){
    return {
		userData:{},
		usersListShow: false,
		usersList: [],
    	isPraise:false,
		isFavorite:false,
		inputShow:false,
		inputValue:'',
		loading:false,
		shareInfo:{
			show:false,
			name:'',
			users:[],
		},
		toUserDig:{
		  show:false,
		  name:'',
		  chooseUserId:'',
		  chooseUserName:'',
		  list:[]
		}
    }
  },
  watch:{
    data(newVal,oldVal){
      if(newVal && newVal.id!=''){
         this.checkHas();
		 this.loadUser();
      }
    }
  },
  mounted() {
	   this.checkHas();
	   this.loadUser();
  },
  methods:{
	  handleComment() {
		  this.$emit('handle-comment');
	  },
	      messageSave(refId,title,sendName,acceptName,acceptId,typeText){
	          let content;
	          let conType;
	          if(this.type==1){
	            content='课程';
	            conType = this.data.type;
	          }
	          if(this.type==2){
	            content='文章'
	          }
	          if(this.type==3){
	            content='案例'
	          }
	          if(this.type==4){
	            content='问答'
	          }
	        content=sendName+typeText+content+'-'+title
	        let message={
	          content,
	          refId,
	          refType:this.type,
	          sendName,
	          acceptName,
	          acceptId,
	          title:'系统消息',
	          sendType:1,
	          conType,
			  content,
			  source:1,
			  // pageUrl:location.href,
			   pageUrl:'',
			  sendAid:this.userInfo.aid,
	        }
	        apiMessage.save(message).then(res=>{
	          if(res.status==200){
	  
	          }
	        })
	      },
	  userSelect(data) {
		  this.usersListShow = false;
		  this.userData = data;
		  // this.toUserDig.chooseUserId = data.id;
		  // this.toUserDig.chooseUserName = data.name;
		  this.toUserDig.chooseUserId = data.sysCreateAid;
		  this.toUserDig.chooseUserName = data.sysCreateBy;
		  this.inputValue = "@"+data.name+this.inputValue;
	  },
	  usersClick() {
		  if(this.usersListShow) {
			  this.usersListShow = false;
		  } else {
			  this.usersListShow = true;
		  }
	  },
	  loadUser() {
		  if(this.type == 1) {
			  this.usersList = this.users;
		  }
		  if(this.type == 2) {
			  this.usersList = [];
			  this.usersList.push({
				 sysCreateAid: this.data.sysCreateAid,
				 sysCreateBy:this.data.sysCreateBy
			  })
		  }
		  let ids = [];
		  this.usersList && this.usersList.forEach(item=>{
			  if(this.type == 1) {
				  item.sysCreateAid = item.teacherId;
			  }
			  item.avatar= '';
			  item.name= '';
			  item.sex = '';
			  ids.push(item.sysCreateAid);
		  })
		
		  this.loadUserInfos(this.usersList,ids);
	  },
	  loadUserInfos(list,userIds){
	  	let $this=this;
	  	const noReapetIds=[...new Set(userIds)]
	  	apiUser.getByIds(noReapetIds).then(res=>{
	  	  if(res.status==200){
	  	   list&& list.forEach(item=>{
	  			res.result.some(author=>{
	  				if(author.aid==item.sysCreateAid){
	  					if(author.avatar!=''){
	  						item.avatar=$this.$config.fileUrl+author.avatar;
	  					}
						item.name = author.name;
						item.sex = author.sex;
	  					return true;
	  				}
	  				return false;
	  			})
	  	    })
	  	  }else{
	  		  console.log('查询用户信息失败:'+res.error);
	  		}
	  	})
	  },
	  checkHas(){
	    if(this.type>0 && this.data.id){
			if(this.praises){
				apiPraises.has(this.type,this.data.id).then(rs=>{
				  if(rs.status==200 && rs.result){
				    this.isPraise=true;
				  }else{
				    this.isPraise=false;
				  }
				});
			}
			if(this.favorites){
				apiFavorites.has(this.type,this.data.id).then(rs=>{
				  if(rs.status==200 && rs.result){
				    this.isFavorite=true;
				  }else{
				    this.isFavorite=false;
				  }
				})
			}
	    }
	  },
	  submit(){
	    if(this.inputValue!=''){
	      let cdata={
	        objType:this.type,
	        objId:this.data.id,
	        parentId:'-1',
	        content:this.inputValue,
	        clevel:1,
	        toAid:'',
	        toAname:'',
	      }
	      if(this.inputValue.charAt(0) == '@' && this.toUserDig.chooseUserId!=='' && this.toUserDig.chooseUserName!=''){
	        cdata.toAid=this.toUserDig.chooseUserId;
	        cdata.toAname=this.toUserDig.chooseUserName;
	      }
	      apiComment.add(cdata).then(res=>{
	         if(res.status==200){
	            this.$refs.interactToast.show({message:'发布成功',type:'success'});
	            this.inputValue='';
				this.data.comments++;
	            this.toUserDig.chooseUserId='';
	            this.toUserDig.chooseUserName='';
				this.inputShow=false;
				this.$emit("comment-success", res.result);
	         }else{
	      		this.$refs.interactToast.show({message:'发布失败',type:'error'});
	         }
	      });
	    }
	  },
	addPraise(){
	 if(this.type==0){
	   //console.log('未设置type值,1表课程,2表文章，3表案例，4表问答')
	   return;
	  }
	  if(this.loading){
		  return;
	  }
	  //需要判断是否已点赞，已点赞的不再加
	    let postData={
	      objType:this.type,
	      objId:this.data.id,
	      title:'',
	    }
	    if(this.type==1){
	      postData.title=this.data.name;
	    }else{
	      postData.title=this.data.title;
	    }
		this.loading=true;
		if(this.isPraise){
			apiPraises.remove(this.type,this.data.id).then(res=>{
				 this.loading=false;
			     if(res.status==200){
			       if(res.result){
			         this.data.praises--;
			       }
			       this.isPraise=false;
			       this.$refs.interactToast.show({message:'取消点赞',type:'success'});
				   this.$emit("praise-success", res.result);
			     }else{
			       this.$refs.interactToast.show({message:'取消失败',type:'error'});
			     }
			   })
		} else {
			
			apiPraises.save(postData).then(res=>{
				this.loading=false;
			  if(res.status==200){
			    if(res.result){
			      this.data.praises++;
			    }
			    this.isPraise=true;
				this.$refs.interactToast.show({message:'点赞成功',type:'success'});
				this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'点赞了我的');
				this.$emit("praise-success", res.result);
			  }else{
				this.$refs.interactToast.show({message:'点赞失败',type:'error'});
			  }
			})
		}
	},
	addFavorite(){
	  if(this.type==0){
	    console.log('未设置type值,1表课程,2表文章，3表案例，4表问答')
	    return;
	   }
	   if(this.loading){
	   	 return;
	   }
	  //需要判断是否已点赞，已点赞的不再加
	  let postData={
	    objType:this.type,
	    objId:this.data.id,
	    title:'',
	  }
	  if(this.type==1){
	    postData.title=this.data.name;
	  }else{
	    postData.title=this.data.title;
	  }
	   this.loading=true;
	   if(this.isFavorite) {// 已经收藏，再次点击取消收藏
	        apiFavorites.remove(this.type,this.data.id).then(res=>{
				this.loading=false;
	          if(res.status==200){
	            this.isFavorite=false;
	            if(res.result){
	              this.data.favorites--;
	            }
				this.$refs.interactToast.show({message:'已取消收藏',type:'success'});
	            // this.$emit('addFavorite',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
	          }else{
	            console.log('取消收藏失败：'+res.message);
	          }
	        })
		} else {
			apiFavorites.save(postData).then(res=>{
			  this.loading=false;
			  if(res.status==200 && res.result){
				this.isFavorite=true;
				this.data.favorites++;
				this.$refs.interactToast.show({message:'已加入收藏',type:'success'});
				if(this.type==1){
					this.messageSave(this.data.id,this.data.name,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
				}else{
					this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
				}
				this.$emit('favorite-success',res.result);//添加收藏,如果是true代表添加成功，false代表已存在
			  }else{
				this.$refs.interactToast.show({message:'收藏失败',type:'error'});
				console.log('加入收藏失败：'+res.message);
			  }
			})
		}
	},
	openInput(){
		this.inputShow=true;
	},
	closeInput(){
		this.inputShow=false;
	},
    addShare(){
      //分享
		this.$refs.comShare.openShare();
    }
  }

};
</script>

<style lang="scss" scoped>
	.users-box{
		height: 150upx;
		padding: 50upx;
		display: flex;
		.users-list{
			width: 100upx;
			.uavatar-scale{
				text-align: center;
				margin-top: 10upx;
			}
		}
	}
	
	.txtbtn{
		background-color: #e9e9e9;
		border: 1px solid #e0e0e0;
		padding: 3px 10px;
		border-radius: 6px;
		font-size: 0.8em;
	}
	.interact-fixed{
		position: fixed;
		z-index: 999;
		bottom: 0px;
		width: 100%;
		border-top: 1px solid rgba(153,153,153,0.12);;
		height: 50px;
		padding-top: 10px;
		background-color: #FFFFFF;
	}

	.interact-bar{
	  height: 35px;
	  // display: flex;
	  // justify-content: space-around;
	  padding-left: 40rpx;
	  .interact-bar-item {
		  width: 50px;
	     .interact-bar-icon{
			 text-align: center;
			 img{
				 width: 30upx;
				 height: 30upx;
			 }
		 }
		 .interact-bar-txt{
			 font-size: 12px;
			 color: #343434;
			 text-align: center;
			 
		 }	  
	  }
	}
	.field{
		width: 200px;
		height: 40px;
		line-height: 30px;
		background: rgb(247,247,249);
		border-radius: 34upx;
		display: flex;
		.field-icon{
			margin-top: 2px;
			margin-left: 10px;
		}
		.wenz{
			font-size: 12px;
			color: #666666;
			margin-left: 2px;
			margin-top: 6px;
		}
	}
  
</style>
