<script setup lang="ts">
import {inject} from 'vue'
import ClickArea from "./ClickArea.vue";
import {JumpType} from "../types";

export interface ClickAreaType {
  x: number
  y: number
  width: number
  height: number
  link: {
    id: string
    type: string
    url: string
    label: string
    value: string
  }
}

const props = defineProps<{
  properties: {
    imageUrl: string
    list: ClickAreaType[]
  }
}>()

const debugMode = inject('debugMode', false)

function transformClickAreaProperties(item: ClickAreaType) {
  let link;
  if(item.link){
    switch (item.link.type) {
      case 'MINI_APP_THIRD':
        link = {
          type: JumpType.MINI,
          url: item.link.url,
          extra: {
            appId: item.link.value,
          }
        }
        break
    }
  }
  return {
    area: {
      x: item.x,
      y: item.y,
      width: item.width,
      height: item.height,
    },
    link,
  }
}
</script>

<template>
  <view class="hot-area">
    <image :src="properties.imageUrl" class="hot-area-bg" mode="widthFix"/>
    <ClickArea v-for="item in properties.list" :key="item.id"
               :properties="transformClickAreaProperties(item)"
    />
  </view>
</template>

<style scoped lang="less">
.hot-area {
  position: relative;

  &-bg {
    width: 100%;
    display: block;
  }
}
</style>