<template>
	<view class="checkin" :style="{
      'background-image': 'url(' + check.backgroundPicUrl + ')',
    }">
		<template v-if="check.showText">
			<view style="width:100%" :style="{color:check.textColor,'text-align':check.textPosition}">
				<view style="margin-bottom:10px;">今日签到可获得5积分</view>
				<!-- todo 签到功能对接 -->
				<view>已连续签到9天</view>
			</view>
		</template>
		<view class="hot-area" v-if="check.hotspot" @click="clickHandler" :style="[formatStyle]"></view>
	</view>
</template>

<script>
	export default {
		props: ["check"],
		data() {
			return {
				formatStyle: "",
			};
		},
		created() {
			if (this.check.hotspot) {
				this.formatStyle = {
					height: `${this.check.hotspot.height}rpx`,
					width: `${this.check.hotspot.width}rpx`,
					left: `${this.check.hotspot.left}rpx`,
					top: `${this.check.hotspot.top}rpx;`
				}
			}
		},
		methods: {
			clickHandler(e) {
				if (
					this.check.hotspot &&
					this.check.hotspot.link &&
					this.check.hotspot.link != ""
				) {
					uni.navigateTo({
						url: this.check.hotspot.lin
					});
				}
			},
		},
	};
</script>

<style>
	.checkin {
		background-repeat: no-repeat;
		height: 200rpx;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 20px;
	}

	.checkin text {
		line-height: 25px;
	}

	.checkin .hot-area {
		position: absolute;
		z-index: 2;
	}
</style>
