<template>
	<view class="interact-bar">
		<view v-if="comments" class="interact-bar-item">
			<image class="pto-img" src="../../static/images/icon/bar-comment.png" size="24"></image>
			<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.comments}}</text>
		</view>
		<view v-if="answers" class="interact-bar-item">
			<image class="pto-img" src="../../static/images/icon/bar-comment.png" size="24"></image>
			<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.answers}}</text>
		</view>
		<view v-if="praises" @click="addPraise()" class="interact-bar-item">
			<image v-if="isPraise" class="pto-img" src="../../static/images/icon/bar-praise-active.png" size="24"></image>
			<image v-else class="pto-img" src="../../static/images/icon/bar-praise.png" size="24"></image>
			<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.praises}}</text>
		</view>
		<view v-if="favorites" class="interact-bar-item">
			<image class="pto-img" src="../../static/images/icon/bar-favorite.png" size="24"></image>
			<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.favorites}}</text>
		</view>
		<!-- <view v-if="views" class="interact-bar-item">
			<u-icon name="eye" color="#969696" size="18"></u-icon>
			<text style="font-size: 10px;color: #969696;margin-left: 6upx;">888</text>
		</view> -->
	</view>
</template>

<script>
	import apiStat from '@/api/phase2/stat.js'
	import apiPraises from '@/api/modules/praises.js'
	import { mapGetters } from 'vuex';
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {
						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
			},
		},
		data() {
			return {
				loading:false,
               isPraise:false,
			}
		},
		 watch:{
		    data(newVal,oldVal){
		      if(newVal && newVal.id!=''){
		         this.checkHas();
		      }
		    }
		  },
		computed:{
			  ...mapGetters(['userInfo']),
		},
		methods: {
			checkHas(){
			    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;
			        }
			      });
			    }
			},
			messageSave(refId,title,sendName,acceptName,acceptId,typeText){
			        // let typeText
			        // if(type=='share'){
			        //   typeText='分享给我'
			        // }
			        // if(type=='favorite'){
			        //   typeText='收藏了我发布的'
			        // }
			        // if(type=='praise'){
			        //   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='提问'
			        }
			        if(this.type==5){
			          content='回答'
			        }
			        if(this.type==6){
			          content='课程笔记'
			        }
			        if(this.type==60){
			          content='课程笔记评论'
			        }
			// 点赞type
			        if(this.type==10){
			          content='课程评论'
			        }
			        if(this.type==20){
			          content='文章评论'
			        }
			        if(this.type==30){
			          content='案例评论'
			        }
			        // 评论点赞通知没有关联id,评论通知暂时关闭
			        if(this.type==60 || this.type==10 || this.type==20 || this.type==30 || this.type == 6) {
			          return;
			          // content=sendName+typeText+content
			        } else {
			          content=sendName+typeText+content+'-'+title
			        }
			
			
			      let message={
			        content,
			        refId,
			        refType:this.type,
			        source:1,
			        pageUrl:location.href,
			        sendAid:this.userInfo.aid,
			        sendName,
			        acceptName,
			        acceptId,
			        title:'系统消息',
			        sendType:1,
			        conType,
			      }
			      apiMessage.save(message).then(res=>{
			        if(res.status!=200){ console.log('发送消息失败') }
			      })
			    },
			 addPraise(){
			     if(this.type==0){
			       console.log('未设置type值,1表课程,2表文章，3表案例，4表问答,6笔记')
			       return;
			      }
			      //需要判断是否已点赞，已点赞的不再加
			      if(!this.readonly){
			        let postData={
			          objType:this.type,
			          objId:this.data.id,
			          title:'',
			
			        }
			        if(this.type==1){
			          postData.title=this.data.name;
			        }else if(this.type == 5){
			          postData.title=this.data.content;
			        } else if(this.type == 10 || this.type == 20 || this.type == 30){
			          postData.title=this.data.content;
			        } else {
						postData.title=this.data.title;
					}
			        if(this.loading) {
			          return;
			        }
			        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;
			              if(this.unicom) {
			                this.$store.dispatch("unicomPraises",false)
			              }
			              //自己给自己点赞不算
			              let authorId=this.data.sysCreateAid;
			              if(this.type==3){ //案例取作者id
			                 authorId=this.data.authorId;
			              }else if(this.type==1){ //课程取老师的id
			                // 目前页面上没有点赞的地方，课程有多个老师，也要给每个老师加吗？
			                 //console.log(this.data,'点赞中课程的传的数据')
			              }
			              if(this.userInfo.aid!=authorId){
			                let event = {
			                  key: "CancelPraise",//
			                  title: "取消点赞",//事件的标题
			                  parameters:"author:"+authorId,//用户自定义参数 name:value,name:value
			                  content: "取消点赞"+postData.title,//事件的内容
			                  objId: this.data.id,//关联的id
			                  objType: this.type,//关联的类型
			                  objInfo: this.data.title,
			                  aid: this.userInfo.aid, //当前登录人的id
			                  aname: this.userInfo.name,//当前人的姓名
			                  status: 1 ,//状态，直接写1
							  source:2,
			                }
							apiStat.sendEvent(event);
			                // this.$store.dispatch("userTrigger", event);
			              }
			              // this.$message({message:'取消点赞',type:'success'})
			            }else{
			              console.log('取消失败：'+res.message);
			            }
			          })
			        } else {
			          apiPraises.save(postData).then(res=>{
			            this.loading = false;
			            if(res.status==200){
			              if(res.result){
			                this.data.praises++;
			              }
			              if(this.type!=1&&this.type!=5){
			                this.messageSave(this.data.id,this.data.title,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'点赞了我的');
			              }
			              // if(this.type==5){
			              //   this.messageSave(this.data.id,this.data.content,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'评论了我的');
			              // }
			              this.isPraise=true;
			              // this.$message({message:'点赞成功',type:'success'})
			              let contentText = '';
			              if(this.type==1){
			                  contentText='课程';
			                  // conType = this.data.type;
			                }
			                if(this.type==2){
			                  contentText='文章'
			                }
			                if(this.type==3){
			                  contentText='案例'
			                }
			                if(this.type==4){
			                  contentText='提问'
			                }
			                if(this.type==5){
			                  contentText='回答'
			                }
			                if(this.type==6){
			                  contentText='课程笔记'
			                }
			                if(this.type==60){
			                  contentText='课程笔记评论'
			                }
			        // 点赞type
			                if(this.type==10){
			                  contentText='课程评论'
			                }
			                if(this.type==20){
			                  contentText='文章评论'
			                }
			                if(this.type==30){
			                  contentText='案例评论'
			                }
			              if(this.userInfo.aid!=this.data.sysCreateAid){
			                let event = {
			                  key: "Praise",//后台的事件key  发布文章且审核通过
			                  title: "点赞",//事件的标题
			                  parameters:"author:"+this.data.sysCreateAid,//用户自定义参数 name:value,name:value
			                  content: "点赞了"+contentText,//事件的内容
			                  objId: this.data.id,//关联的id
			                  objType: this.type,//关联的类型
			                  objInfo: this.data.title,
			                  aid: this.userInfo.aid, //当前登录人的id
			                  aname: this.userInfo.name,//当前人的姓名
			                  status: 1 ,//状态，直接写1
							  source:2,
			                }
							apiStat.sendEvent(event);
			                // this.$store.dispatch("userTrigger", event);
			              }
			            }else{
			              console.log('点赞失败：'+res.message);
			            }
			          })
			        }
			
			      }
			    },
		}

	};
</script>

<style lang="scss" scoped>
	.interact-bar {
		height: 60rpx;
		display: flex;
		justify-content: flex-end;
		.interact-bar-item {
			line-height: 60rpx;
			display: flex;
            margin-right: 30upx;
			.pto-img {
			    margin-top: 12upx;
			 	width: 18px;
				height: 18px;
				margin-left: 28upx;
				// vertical-align: middle;
			}
			.interact-bar-icon {
				margin: 0 0 0 10upx;
				cursor: pointer;
			}
		}
		.noCollect{
			margin-left: auto;
		}
	}
</style>
