<template>
  <BaseSameLayer
    ref="baseSameLayer"
    :hosSameLayerArgs="hosSameLayerArgs"
    embedType="native/midea-progresscycle-view"
    :defaultWidth="300"
    :defaultHeight="300"
    :key="dataVersion"
  ></BaseSameLayer>
</template>

<script>
import BaseSameLayer from "./baseSameLayer.vue";
const weexModule = weex.requireModule('weexModule');

export default {
  name: "MideaProgresscycleView",
  data() {
    return {
      width: 0,
      height: 0,
      dataVersion: 0,
      observer: null,
      isVisible: false
    }
  },
  components: {
    BaseSameLayer,
  },
  props: {
    hosUniqueProps: {
      type: Object,
      default() {
        return {};
      },
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    hosSameLayerArgs() {
      const result = {
        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
        width: this.width,
        height: this.height,
        data: this.data, 
        handleProgresscycleTap: this.handleProgresscycleTap,
        isVisabled: true //新增参数避免影响到旧插件
      };
      return result;
    },
  },
  watch: {
    // 深度监听 data 对象的变化
    data: {
      handler(newVal, oldVal) {
        try{
          const newStr = JSON.stringify(newVal);  
          const oldStr = JSON.stringify(oldVal);
          if (newStr !== oldStr) {
            this.dataVersion++;
          }
        }catch(e){

        }
      },
      deep: true, 
      immediate: false
    },
  },
  mounted() {
    this.width = this.$el.clientWidth;
    this.height = this.$el.clientHeight;
    
    // 初始化可见性监听
    this.observeVisibility();
  },
  beforeDestroy() {
    // 销毁前清除观察器
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }
  },

  methods: {
    handleProgresscycleTap (res){
      this.$emit("progresscycleTap", res);
    },

    /**
     * 初始化可见性监听
     * 使用 IntersectionObserver API 监听组件是否进入可见区域
     */
    observeVisibility() {
      // 检查浏览器是否支持 IntersectionObserver
      if (!window.IntersectionObserver) {
        console.warn('[MideaProgresscycleView] IntersectionObserver is not supported');
        return;
      }

      const options = {
        root: null, // 相对于视口
        rootMargin: '0px', // 不设置边距
        threshold: 0.1 // 当至少 10% 的元素可见时触发
      };

      this.observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // 组件进入可见区域
            this.onVisibilityChange(true);
          } else {
            // 组件离开可见区域
            this.onVisibilityChange(false);
          }
        });
      }, options);

      // 开始观察该组件
      if (this.$el) {
        this.observer.observe(this.$el);
      }
    },

    /**
     * 可见性变化回调函数
     * @param {Boolean} isVisible - 是否可见
     */
    onVisibilityChange(isVisible) {
      this.isVisible = isVisible;
      // 通过 $refs 获取子组件 BaseSameLayer 的 embedId
      const componentId = this.$refs.baseSameLayer.embedId;
      weexModule.callNative(
        'GlobalApi',
        {
          method: 'visibleChange',
          componentId: componentId,
          isVisible
        },
      );
    },
  },
};
</script>
