<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>
