<template>
  <view>
    <view
      class="bottom-ad"
      v-for="(item, index) in bottomAD"
      :key="item.id"
      @click="$utils.route.clickJumpType(item.$orig)"
    >
      <image style="width: 100%" :src="item.fileUrl" mode="widthFix"></image>
      <text>今日仅剩{{ index | dynamicQuantity }}个</text>
      <button>免费领取</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "m-home-bottomad",
  props: {
    bottomAD: {
      type: Array,
      default: [],
    },
  },
  filters: {
    dynamicQuantity(index) {
      index++;
      let x = new Date().getHours() / 3;
      let num = (x - 8) ** 2 + index * (8 - x) * 1 + index * 3 + 1;
      return parseInt(num);
    },
  },
};
</script>

<style lang="scss">
.bottom-ad {
  margin-top: 15rpx;
  position: relative;

  &:nth-child(2) {
    margin-top: 20rpx;
  }

  text {
    position: absolute;
    top: 104rpx;
    left: 220rpx;
    padding: 10rpx 15rpx;
    background: #ffe1d9;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #a40303;
  }

  button {
    position: absolute;
    top: 67rpx;
    right: 40rpx;
    display: inline-block;
    margin: 0;
    padding: 0rpx 26rpx;
    background: linear-gradient(90deg, #e31818, #ed3e24, #ed4f24);
    border-radius: 30rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
