<template>
  <div
    ref="ThemeDataPlant"
    class="ThemeDataPlant"
    :style="{
      'background-color': pageSettingData.backgroundColor,
      'background-image':bacImage,
      'background-repeat':pageSettingData.backgroundFit == 'repeat' ? 'repeat' : 'no-repeat',
      'position':pageSettingData.backgroundImageLock ? 'fixed' : 'absolute',
      'background-size' : '100% auto'
      }"
  >
  </div>
</template>

<script>
export default {
  props: {
  },
  components : {
    // 'area-navigation' : () => import('~/components/theme/components/other/area-navigation')
  },
  data() {
    return {
      flag: false,
      render: true,
      pageInfo:{},
      pageData:{},
      pageSettingData:{},
      bacImage:""
    };
  },
  created(){
    if (this.mpApp.globalData.pageList) {
        this.pageInfo = this.mpApp.globalData.pageList.filter((item) => item.pageCode == 1)[0];
        this.pageSettingData = JSON.parse(this.pageInfo.pageSettingData);
        console.log(this.pageInfo.pageSettingData,'kl')
    }else{
      let _this = this
      this.mpApp.indexBgCallBack = function(data){
        _this.pageInfo = _this.mpApp.globalData.pageList.filter((item) => item.pageCode == 1)[0];
        _this.pageSettingData = JSON.parse(_this.pageInfo.pageSettingData);
        console.log(_this.pageSettingData,'kl1')
        _this.bacImage = `url(${_this.pageSettingData.backgroundImage})`
      }
    }
  },
  mounted(){
    this.bacImage = `url(${this.pageSettingData.backgroundImage})`
  },
  computed:{
  }

};
</script>

<style lang="scss" scoped>
.ThemeDataPlant {
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  z-index: -1;
}
.ThemeDataPlant::before {
  content: " ";
  // position: var(--lock);
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // background-color: var(--bg_color);
  // background-image: var(--image);
  // background-repeat: var(--repeat);
  background-size: 100% auto;
}
</style>