<template>
  <section class="banner">
    <a
      v-lazy:background-image="bannerImg"
      class="banner__wrap"
      target="_blank"
      :style="`padding-top: ${paddingTop}%`"
    >
      <div
        v-lazy:background-image="bannerImg"
        class="banner__glazing-firefox"
        :style="`filter: blur(${filterBlur}px)`"
      ></div>
      <slot></slot>
      <div class="banner__glazing" :style="`backdrop-filter: saturate(${saturate}%) blur(${blur}px)`"></div>
    </a>
  </section>
</template>

<script>
// 默认背景图
import { mapGetters } from 'vuex'
import CONFIG,{ ENV_CONFIG } from '@/config'

export default {
  name: 'Banner',
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      paddingTop: (160 / 375) * 100,
      saturate: 100,
      blur: 0,
      filterBlur: 0,
    }
  },
  computed: {
    ...mapGetters({
      info: 'questionnaire/questionnaireInfo',
    }),
    bannerImg() {
      const img = `//${ENV_CONFIG.OSS_DOMAIN}/common/img/questionLottery.png`
      return `${img}${CONFIG.ossImageServe}`
    },
  },
  watch: {
    scrollTop: {
      handler(nVal) {
        const headDistance = 98
        const saturateMax = 80
        const blurMax = 20
        const filterBlurMax = 6
        const scroll = nVal > headDistance ? headDistance : nVal <= 0 ? 0 : nVal
        const scale = scroll / headDistance
        this.saturate = scale * saturateMax + 100
        this.blur = scale * blurMax
        this.filterBlur = scale * filterBlurMax
        this.paddingTop = (160 / 375) * 100 - (scroll / 375) * 100
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  display: flex;
  overflow: hidden;
  &__wrap {
    width: 100%;
    position: relative;
    padding-top: 160 / 375 * 100%;
    height: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  &__glazing {
    /* chrome safiri 等浏览器下的毛玻璃实现 */
    @supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
  &__glazing-firefox {
    display: none;
    /* 兼容 firefox 浏览器下的毛玻璃实现 */
    @supports not (backdrop-filter: saturate(180%) blur(20px)) {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }
  }
}
</style>
