<template>
    <div style="width:100%;height:100%" ref="patentImage">
       <el-image v-if="showImage" fit="contain" :src="imageSrc" v-bind="$attrs" v-on='$listeners' style="width:100%;height:100%">
            <div slot="error" class="image-slot">
                <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
            </div>
        </el-image> 
        <div v-else style="width:100%;height:100%" v-loading="true"></div>
    </div>
    
</template>

<script>
export default {
  components: {},
  props: {
    patent:{
        type:Object,
        default:null
    }
  },
  data() {
    return {
        showImage:true,
        imageSrc:''
    };
  },
  watch: {
    patent(){
        this.init()
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    init(){
        if(!this.patent || !this.patent.rowApplicationNo){
            return
        }
        if(this.patent.patentAbsImage){
            this.imageSrc = this.patent.patentAbsImage
            return
        }
        var that = this
        // 创建一个 Intersection Observer 实例
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 当元素进入视口时执行的逻辑
                    that.getImageSrc()
                    // 可以在这里执行懒加载、动画触发等操作
                    observer.unobserve(entry.target); // 如果只需要触发一次，可以取消观察
                }
            });
        }, {
            root: null, // null 表示视口
            rootMargin: '0px',
            threshold: 0.3 // 当元素 10% 进入视口时触发
        });

        // 选择需要观察的元素
        const elements = this.$refs.patentImage;
        observer.observe(elements);
    },
    getImageSrc(){
        this.showImage = false
        var params = {
          appNo: this.patent.rowApplicationNo,
        }
        this.$api.getPictureGuid(params).then(response => {
          if (response.code == 200) {
            this.$set(this.patent, 'patentAbsImage', response.data)
            this.imageSrc = this.patent.patentAbsImage
            this.showImage = true
          }
        })

    },
  },
};
</script>
<style lang="scss" scoped>
</style>'