<!-- webview only -->
<template>
  <div class="bl___cover-image"
       @load="load"
       @error="error"
       @click="clickEvent"
       @touchstart="touchstartEvent"
       @touchmove="touchmoveEvent"
       @touchend="touchendEvent"
       @touchcancel="touchcancelEvent"
       @framechange="framechange"
  >
  </div>
</template>

<script>
import {naDataToObj} from '../util/logic';

export default {
  name: 'Bili_CoverImage',
  props: {
    "src": {
      type: String,
      default: ''
    },
    "animation": {
      type: String,
      default: ''
    },
  },
  watch: {
    src: {
      handler: function (value) {
        this.changeAttr('src', value);
      }
    },
    animation(value) {
      this.changeAttr('animation', value);
    }
  },
  data() {
    return {};
  },
  methods: {
    framechange(e) {
      // 修复默认v-show为false，然后再设置为true，cover-view展示错误。
      if (getComputedStyle(this.$el).display !== 'none') {
        naDataToObj(this.$el, e.data);
      }
    },
    clickEvent(e) {
      this.$emit('click', {
        detail: e.data
      });
    },
    touchstartEvent(e) {
      this.$emit('touchstart', {
        detail: e.data
      });
    },
    touchmoveEvent(e) {
      this.$emit('touchmove', {
        detail: e.data
      });
    },
    touchendEvent(e) {
      this.$emit('touchend', {
        detail: e.data
      });
    },
    touchcancelEvent(e) {
      this.$emit('touchcancel', {
        detail: e.data
      });
    },
    changeAttr(key, value) {
      let _obj = {};
      _obj[key] = value;
      SmallApp.postMessage({
        "module": "dom", // cover-view 的所有通信固定使用 dom
        "method": "updateAttrs", // addElement...
        "args": {
          id: this.$el.getAttribute('nodeid'),
          attrs: _obj
        }
      });
    },
    load(e) {
      this.$emit('load', e);
    },
    error(e) {
      if (Object.keys(this.$listeners).indexOf('error') > -1) {
        this.$emit('error', e);
      }
    },
  }
};
</script>

<style lang="less">
.bl___cover-image {
  width: var(--width);
  height: var(--height);
  --width: '320px';
  --height: '240px';
  overflow: hidden;
}
</style>

