<template>
  <view class="safe-area" :style="{height:safeHeight,display:((type !== 'sticky') || 'none')}"></view>
	<view class="m-sticky-container" :style="{top:offsetHeightValue,position:type,zIndex: zIndex}">
    <slot />
  </view>
</template>

<script>
	import props from './props.js';
	/**
	 * Sticky  吸顶
	 * @description 警告提示，展现需要关注的信息。
	 * 
	 * @property {String}			title       显示的文字
	 */
	export default {
		name: 'm-sticky',
		mixins: [props],
		data() {
			return {
				show: true,
        safeHeight:'',
        offsetHeightValue:'0',
      }
		},
		computed: {
      offSetDefault(){
        let offsetHeight = uni.getSystemInfoSync().statusBarHeight;
        // #ifdef MP-WEIXIN
        offsetHeight += 44;
        // #endif
        return offsetHeight;
      },
		},
		methods: {
      getSafeHeight(){
        new Promise((resolve) => {
          uni.$m.sleep(10).then(() => {
            const info = uni.createSelectorQuery().in(this).select('.m-sticky-container');
            info.boundingClientRect(function (data) {
              resolve(data.height);
            }).exec(function (res) {});
          });
        }).then((height) => {
          this.safeHeight = height+'px';
          this.offsetHeightValue = (parseFloat(uni.$m.getPx(this.offSetDefault,false))+parseFloat(uni.$m.getPx(this.offsetTop,false))+'px')
          this.$emit('change',true);
        })
      },
		},
    mounted() {
      this.getSafeHeight();
    },
	}
</script>

<style lang="scss" scoped>
  .safe-area{
    width:100%;
  }
  .m-sticky-container{
    width:100%;

  }
</style>
