<template>
    <view class="userinfo">
        <view class="userhead">
            <image :src="item.member_avatar"></image>
            <text class="follow" v-if="!is_follow" @click="following(item.member_id)">+</text>
			<u-icon v-else name="checkbox-mark" color="#ffffff" :size="28" class="follow"  @click="following(item.member_id)"></u-icon>
        </view>
		<!-- 点赞 -->
        <view class="operat zan">
            <u-icon name="thumb-up-fill" :color=" is_like ? '#FF7807' : '#ffffff' " :size="50" @click="likeType(item.article_id)"></u-icon>
            <text>{{item.like_num}}</text>
        </view>
		<!-- 收藏 -->
        <view class="operat shoucang">
            <u-icon name="star-fill" :color=" is_collect ? '#FF7807' : '#ffffff' " :size="50" @click="collecting(item.article_id)"></u-icon>
            <text>{{item.collect_num}}</text>
        </view>
		<!-- 评论 -->
        <view class="operat pinglun">
            <u-icon name="more-circle-fill" color="#ffffff" :size="50" @click="editing()"></u-icon>
            <text>{{item.comment_num}}</text>
        </view>
		<!-- 购物车 -->
        <view class="operat gouwu">
           <u-icon name="shopping-cart-fill" :color=" is_cart ? '#FF7807' : '#ffffff' " :size="50" @click="carting()"></u-icon>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.userinfo{
    width: 110rpx;
    height: 570rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .userhead{
		position: relative;
        display: flex;
        position: relative;
        align-items: center;
		&>image{
		    width: 110rpx;
		    height: 110rpx;
		    border-radius: 50%;
		    border: 2rpx solid #fff;
		}
		.follow {
			position: absolute;
			top: 90rpx;
			left: 35%;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 36rpx;
			border-radius: 50%;
			color: #fff;
			background-color: #FF780F;
		}
    }
	.operat {
		display: flex;
		align-items: center;
		flex-direction: column;
		& > text {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
}
</style>
<script>
export default {
    name:'userinfo',
	props:['list','cart'],
    data(){
        return {
			is_follow: this.list.is_attention || false,
			is_like: this.list.is_like || false,
			is_collect: this.list.is_collect || false,
			is_content: false,
			is_cart: this.cart || false,
			item: this.list || []
        }
    },
	watch: {
		list(newValue,old) {
			console.log(newValue,old);
		},
		cart(newValue,old) {
			// console.log(newValue,old);
			this.is_cart = newValue;
		},
		deep: true
	},
	methods: {
		// 关注
		following(id) {
			this.is_follow = !this.is_follow;
			this.$u.api.attentionMember({member_id: id}).then(res => {
				if (res.errCode == 0) {
					this.$u.toast(res.message);
				}
			})
		},
		// 点赞
		likeType(id) {
			// console.log(id);
			this.is_like = !this.is_like;
			this.$u.post("article/articleLike",{article_id: id}).then(res => {
				if (res.errCode == 0) {
					// console.log(res);
					this.list.like_num = res.data.num;
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		// 收藏
		collecting(id) {
			this.is_collect = !this.is_collect;
			this.$u.post("article/articleCollect",{article_id: id}).then(res => {
				if (res.errCode == 0) {
					// console.log(res);
					this.list.collect_num = res.data.num;
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		// 评论
		editing() {},
		// 购物车
		carting() {
			this.is_cart = !this.is_cart;
			// console.log(this.is_cart);
			this.$emit("openCart",this.is_cart);
		},
	}
}
</script>