<template>
	<phoneLoginWrap>
		<view class="body" @click="opTap">
			<!-- #ifndef APP-PLUS -->
			<uni-badge v-if="myItem.dot" class="dot-op" :text="myItem.dot" type="error" size="small"></uni-badge>
			<!-- #endif -->
			<image :class="myItem.ok ?'mini':null" class="item" mode="aspectFit" :src="myItem.ok ? myItem.iconOk : myItem.icon"></image>
			<view class="note" v-if="myItem.content && myItem.ok">{{myItem.content}}</view>
		</view>
	</phoneLoginWrap>
</template>

<script>
	// #ifndef APP-PLUS
	import uniBadge from "fellw-uni/components/uni-badge/uni-badge"
	// #endif

	import {
		submitUserBroadcastFabulous,
		submitUserBroadcastCollection
	} from 'fellw-uni/js/request.js'

	export default {
		components: {
			// #ifndef APP-PLUS
			uniBadge
			// #endif
		},
		props: ['item', 'info'],
		data() {
			return {
				myItem: {}
			}
		},
		created() {
			this.$info(`created Item`, this.item)
			this.myItem = this.item
		},
		methods: {
			async opTap() {
				const item = this.myItem
				this.$info(`Click item data`, item)
				if (item.zan) {
					if (item.ok) {
						this.$api.msg(`您已点赞`)
						return
					}
					await submitUserBroadcastFabulous(this.info.id)
					item.content++
					item.ok = true
					this.$api.msg(`👍点赞成功`)
				} else if (item.collection) {
					if (item.ok) {
						this.$api.msg(`您已收藏`)
						return
					}
					await submitUserBroadcastCollection(this.info.id)
					item.content++
					item.ok = true
					this.$api.msg(`收藏成功`)
				} else if (item.playback) {
					uni.navigateTo({
						url: '/pages/result/live'
					})
				}
				this.$emit('update', item)
			}
		}
	}
</script>


<style scoped>
	.body {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		text-align: center;
		margin: 0 4px;
		position: relative;
	}

	.item {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.mini {
		width: 40upx;
		height: 40upx;
		margin-top: 10upx;
		border-radius: 0;
	}

	.note {
		color: #F5B59A;
		font-size: .6rem;
	}

	.dot-op {
		position: absolute;
		right: 0;
		z-index: 99;
	}
</style>
