<!-- webview only -->
<template>
  <div class="bl___cover-svga"
       @loaded="loadedEvent"
       @ended="endedEvent"
       @frameupdate="frameupdateEvent"
       @percentageupdate="percentageupdateEvent"
       @error="errorEvent"
       @framechange="framechange"
  >
  </div>
</template>

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

export default {
  name: 'Bili_CoverSvga',
  data() {
    return {};
  },
  props: {
    "src": {
      type: String,
      default: ''
    },
    "loops": {
      type: Number,
      default: 0
    },
    "clearsAfterStop": {
      type: Boolean,
      default: true
    },
    "fillMode": {
      type: String,
      default: 'forward'
    },
    "animation": {
      type: String,
      default: ''
    }
  },
  watch: {
    src(value) {
      this.changeAttr('src', value);
    },
    loops(value) {
      this.changeAttr('loops', value);
    },
    animation(value) {
      this.changeAttr('animation', value);
    },
    clearsAfterStop(value) {
      this.changeAttr('clearsAfterStop', value);
    },
    fillMode(value) {
      this.changeAttr('fillMode', value);
    }
  },
  methods: {
    loadedEvent(e) {
      this.$emit('loaded', {
        detail: e.data
      });
    },
    endedEvent(e) {
      this.$emit('ended', {
        detail: e.data
      });
    },
    frameupdateEvent(e) {
      this.$emit('frameupdate', {
        detail: e.data
      });
    },
    percentageupdateEvent(e) {
      this.$emit('percentageupdate', {
        detail: e.data
      });
    },
    errorEvent(e) {
      this.$emit('error', {
        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
        }
      });
    },
    framechange(e) {
      // 修复默认v-show为false，然后再设置为true，cover-view展示错误。
      if (getComputedStyle(this.$el).display !== 'none') {
        naDataToObj(this.$el, e.data);
      }
    }
  }
};
</script>

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

