<!--
  背景模板 
  
  使用方式： 
  
  A. 背景图片的通用外部view  （ APP不支持背景图片的变量动态替换， 所以只能业务页面来写入背景图片的地址。   ）
     <JeepayBackground :bgImgView="true">页面内容</JeepayBackground>
	 <style scoped>
	 	/deep/ .bg-img-view { background: url('/static/indexImg/user-bg.svg'); }
	 </style>
	 
  B. 背景是自定义颜色的外部view ( 默认蓝色渐变 )
	    <JeepayBackground :bgColorStyle="{}">页面内容</JeepayBackground>
  
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/19 08:08
-->
<template>
	
 <!-- 微信小程序：  <page-meta>: 只能是页面内的第一个节点，且不能被 wx:if 或 wx:for 动态变更
	 uniapp: 打包到小程序， 会添加 <jeepay-background>标签， 导致该问题。  无奈 小程序不可使用：  <page-meta> 标签，  实现方式为： page-wrapper height方式。 
	-->	
  <!-- <page-meta :pageStyle="'overflow:' + (vdata.pageMetaOverflow ? 'visible' : 'hidden')"></page-meta> -->
<!-- #ifdef APP-PLUS-->
  <page-meta :pageStyle="'overflow:' + (vdata.pageMetaOverflow ? 'visible' : 'hidden')"></page-meta>
  <!-- #endif -->
  <!-- page-wrapper 包裹 -->
  <view class="page-wrapper" :style="{overflow:vdata.pageMetaOverflow ? 'visible' : 'hidden', height:vdata.pageMetaOverflow ? 'auto' : '90vh'}">
	  
	  <!-- 背景图片view -->
	  <view class="bg-img-view" :style="vdata.bgImgStyle">
		  
		  <!-- 背景颜色view -->
		  <view class="bg-color-view" :style="vdata.bgColorStyle" style="border-radius:0;background-color: #318AFE!important;">
			  <view class="bgbottomStyle">
			  </view>
		  </view>
      <!-- 解决定位层级问题 -->
      <view class="bg-main">
		    <slot></slot>
      </view>
	  </view>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted, provide, computed } from 'vue'
	
// 选择是图片风格  还是 背景颜色风格。 
const props = defineProps({
  // 背景图片
  bgImgView: { type: Boolean }, // APP 不支持背景图片的动态替换。。。 
  
  // 背景颜色style
  bgColorStyle: { type: Object },
//   禁止滚动穿透
 
})


function changePageMetaOverflowFunc(v){
	vdata.pageMetaOverflow = v
}
provide('changePageMetaOverflowFunc', changePageMetaOverflowFunc)


const vdata = reactive({
	
	bgImgStyle : { }, // 注意： style变量需要全部替换， 不可使用Object.assign修改里面的值, 否则 APP不生效！ 
	bgColorStyle : { },
	pageMetaOverflow: true
})
provide('pageMetaOverflow',computed(()=>vdata.pageMetaOverflow))
onMounted(() => {
	
	// 包含背景图片 
	if(props.bgImgView){
		vdata.bgImgStyle = {
			position: "absolute",
			top: 0,
			left: 0,
			right: 0,
			backgroundRepeat: 'no-repeat'
		}
	}
	
	
	// 包含背景色
	if(props.bgColorStyle){
		let defStyle = { // 默认颜色 
			position: "absolute",
			top: 0,
			left: 0,
			right: 0,
			height: '550rpx',
			borderRadius: '0 0 32rpx 32rpx',
			// background: 'linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)',
		}
		vdata.bgColorStyle = Object.assign(defStyle, props.bgColorStyle)
	}
})
</script>
<style scoped lang="scss">
.bg-main{
  position: relative;
  z-index: 10;
}
.bgbottomStyle{
	position: absolute;
	bottom: -2rpx;
	left: 0;
	
	width: 750rpx;
	height: 74rpx;
	background: linear-gradient( 180deg, rgba(195,215,235,0) 0%, #F9F9F9 100%);
}
</style>
