<template>
  <div v-if="fontReady">
    <v-stage :config="content" v-if="content" @mousedown="handleStageMouseDown">
      <v-layer>
        <v-rect v-if="content.background.type === 'color'" :config="content.background">
        </v-rect>
        <v-image v-if="content.background.type === 'image' && imageBgConfig" :config="imageBgConfig"></v-image>
      </v-layer>
      <v-layer>
        <template v-for="(item, key) in content.blocks">
          <v-text v-if="item.type === 'text'" :config="item"
                  @dragmove="onMove($event, item)"
                  @mousedown="handleStageMouseDown($event, item)"
                  @transform="handleTransformEnd"
                  @transformend="handleTransformEnd"></v-text>
          <v-image v-else-if="item.type === 'image'" :config="item"
                   @dragmove="onMove($event, item)"
                   @mousedown="handleStageMouseDown($event, item)"
                   @transform="handleTransformEnd"
                   @transformend="handleTransformEnd"></v-image>
          <v-image v-else-if="item.type === 'qrcode'" :config="item"
                   @dragmove="onMove($event, item)"
                   @mousedown="handleStageMouseDown($event, item)"
                   @transform="handleTransformEnd"
                   @transformend="handleTransformEnd"></v-image>

        </template>

        <v-transformer ref="transformer"/>
      </v-layer>
    </v-stage>
  </div>
  <div v-else>资源加载中...</div>
</template>

<script setup>

</script>

<style scoped>

</style>