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

<script>
export default {
  name: 'Bili_CoverLabel',
  data() {
    return {};
  },
  props: {
    "animation": {
      type: String,
      default: ''
    }
  },
  watch: {
    animation(value) {
      // this.changeAttr('animation', value);
    }
  },
  methods: {
    clickEvent(e) {
      this.$emit('click', {
        detail: {
          position: {
            x: e.x,
            y: e.y
          }
        }
      });
    },
    touchstartEvent(e) {
      this.$emit('touchstart', {
        detail: {
          changedTouches: Array.from(e.changedTouches).map(x=>{
            return {
              x: x.pageX,
              y: x.pageY,
            }
          })
        }
      });
    },
    touchmoveEvent(e) {
      this.$emit('touchmove', {
        detail: {
          changedTouches: Array.from(e.changedTouches).map(x=>{
            return {
              x: x.pageX,
              y: x.pageY,
            }
          })
        }
      });
    },
    touchendEvent(e) {
      this.$emit('touchend', {
        detail: {
          changedTouches: Array.from(e.changedTouches).map(x=>{
            return {
              x: x.pageX,
              y: x.pageY,
            }
          })
        }
      });
    },
    touchcancelEvent(e) {
      this.$emit('touchcancel', {
        detail: {
          changedTouches: Array.from(e.changedTouches).map(x=>{
            return {
              x: x.pageX,
              y: x.pageY,
            }
          })
        }
      });
    }
  }
};
</script>

<style lang="less">
.bl___cover-label {
  width: auto;
  height: auto;
  word-wrap: break-word;
  overflow: hidden;
}
</style>
