<template>
  <div>
    <embed
        :id="embedId"
        type="native/image"
        :width="width"
        :height="height"
        :src="src"
    />
  </div>
</template>

<script>

const weexModule = weex.requireModule('weexModule');
export default {
  name: "HlImage",
  props: {
    src: {
      type: String,
      required: true,
    },
    resize: {
      type: String,
      default: "contain",
    },
    placeholder: {
      type: String,
      default: "images/loading.gif",
    },
    quality: {
      type: String,
      default: "original",
    },
    width: {
      type: [Number, String],
      default: 300,
    },
    height: {
      type: [Number, String],
      default: 120,
    },
  },
  data() {
    return {
      embedId: `image_${this._uid}`, // 使用Vue实例的唯一ID来生成embed元素的唯一ID
      isTransferScheduled: false, // 添加一个标志来检查是否已经安排了transferPropsAndListeners的调用
    };
  },
  created() {
    console.log("[weex] hl-image created!");
    console.log("[weex] embed.width", this.width);
    console.log("[weex] embed.height", this.height);
    this.transferPropsAndListeners(); // 组件创建时调用
  },
  mounted() {
    this.addTouchEvent();
  },
  beforeDestroy() {
    this.removeTouchEvent();
  },
  methods: {
    transferPropsAndListeners() {
      // 构建一个包含所需信息的对象
      const args = {
        componentId: this.embedId,
        width: this.width,
        height: this.height,
        src: this.src,
        resize: this.resize,
        placeholder: this.placeholder,
        quality: this.quality,
        handleLoad: this.handleLoad
      };
      // 调用JSbridge方法，传递属性和监听方法到原生组件
      // @ts-ignore
      // native.transferSameLayerArgs(args);
      weexModule.callNative('transferSameLayerArgs', args)
    },
    // 必须给embed元素添加touchstart事件监听，addEventListener的第二个参数监听事件对象置空即可（同层渲染事件处理需要）
    addTouchEvent() {
      const embedElement = document.getElementById(this.embedId);
      if (embedElement) {
        console.log("[weex] hl-richtext-embed addEventListener");
        embedElement.addEventListener('touchstart', {});
      }
    },
    removeTouchEvent() {
      const embedElement = document.getElementById(this.embedId);
      if (embedElement) {
        console.log("[weex] hl-richtext-embed removeEventListener");
        embedElement.removeEventListener('touchstart', {});
      }
    },
    scheduleTransfer() {
      if (!this.isTransferScheduled) {
        this.isTransferScheduled = true;
        this.$nextTick(() => {
          this.transferPropsAndListeners();
          this.isTransferScheduled = false;
        });
      }
    },
    save(callback) {
      console.log("testxxxxx", "image 组件 save 方法被触发")
      weexModule.callNative('imageSaveHandle', {src: this.src,},callback)
    },
    handleLoad(res) {
      this.$emit("load", res);
    },
  },
  watch: {
    // TO-DO 多个属性变化，待修改为一次性传递
    src(newSrc, oldSrc) {
      if (newSrc !== oldSrc) {
        this.scheduleTransfer(); // 当src属性变化时重新调用
      }
    },
    resize(newResize, oldResize) {
      if (newResize !== oldResize) {
        this.scheduleTransfer(); // 当resize属性变化时重新调用
      }
    },
    placeholder(newPlaceholder, oldPlaceholder) {
      if (newPlaceholder !== oldPlaceholder) {
        this.scheduleTransfer(); // 当placeholder属性变化时重新调用
      }
    },
    quality(newQuality, oldQuality) {
      if (newQuality !== oldQuality) {
        this.scheduleTransfer(); // 当quality属性变化时重新调用
      }
    },
    "$attrs.width": {
      immediate: true,
      handler(newWidth) {
        this.width = newWidth || 300; // 当父组件的宽度属性变化时，更新本地宽度值
      },
    },
    "$attrs.height": {
      immediate: true,
      handler(newHeight) {
        this.height = newHeight || 120; // 当父组件的高度属性变化时，更新本地高度值
      },
    },
  },
};
</script>

<style scoped>
</style>