<template>
  <img class="page-image" :src="src" alt="" @load="onLoad">
  <template v-if="actions">
    <CoverBtn
      v-for="(action, inx) in actions"
      :key="inx"
      :center="centers[inx]"
      :width="action.width"
      :height="action.height"
      @click="action.onClick"
    />
  </template>
</template>

<script setup>
  import { ref } from 'vue';
  import CoverBtn from '@/components/CoverBtn.vue'

  const props = defineProps({
    src: String,
    actions: Array,
  });
  const emit = defineEmits(['load']);

  const centers = ref([]);

  const onLoad = (e) => {
    emit('load', e);
    const { width, height, naturalHeight, naturalWidth } = e.target;
    const xRate = width / naturalWidth;
    const yRate = height / naturalHeight;

    if (props.actions && props.actions.length) {
      centers.value = props.actions.map(action => {
        const [xPos, yPos] = action.pos
        return [xRate * xPos, yRate * yPos]
      });
    }
  }

</script>

<style lang="less" scoped>
.page-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
}
</style>