<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" class="interact-bar-item">
			<image 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>
	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
			}
		},
		data() {
			return {

			}
		},
		computed: {

		},
		methods: {
		}

	};
</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>
