<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 'GOODS': // 星妈优选商品
        link = {
          type: JumpType.MINI,
          url: `subPackages/shopMainProcess/product/index?productId=${item.link.value}&skuId=${item.link.skuId}`,
          extra: {
            appId: 'wx4205ec55b793245e',
          }
        }
        break
      case 'PAGE':  // 页面
        link = {
          type: JumpType.INNER,
          url: item.link.url,
        }
        break
      case 'LINK': // 自定义链接
        link = {
          type: JumpType.INNER,
          url: '/pages/activity/index?url=' + encodeURIComponent(item.link.url),
        }
        break
      case 'MINI_APP': // 小程序
        const pageType = item.link.pageType.toLowerCase()
        if(pageType == 'other'){
          link = {
            type: JumpType.INNER,
            url: item.link.url,
          }
        }else{
          link = {
            type: JumpType.INNER,
            url: '/pages/index/index?pageType=' + pageType,
          }
        }
        break
      case 'MINI_APP_THIRD': // 第三方小程序
        link = {
          type: JumpType.MINI,
          url: item.link.url,
          extra: {
            appId: item.link.value,
          }
        }
        break
      case 'SELF_GOODS': // 星妈会商品
        link = {
          type: JumpType.INNER,
          url: `/v3/goodDetail/goodDetail?gid=${item.link.value}`,
        }
        break
      case 'VIDEO': // 视频
        // todo 视频播放
        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>