<script setup lang="ts">
import {computed, inject} from 'vue'
import {jump} from '@/utils'
import {MdConfig} from "../types";
import {useMD} from "../use-md";

const ratio = 2

const props = defineProps<{
  properties?: {
    area?: { x: number, y: number, width: number, height: number }
    link?: { type: number, url: string, extra: any }
    mdConfig?: MdConfig
    needLogin?: boolean
  }
  openType?: string
  isLogin?: boolean
}>()

const debugMode = inject('debugMode', false)

const style = computed(() => {
  const area = props.properties.area
  return {
    left: area.x * ratio + 'rpx',
    top: area.y * ratio + 'rpx',
    width: area.width * ratio + 'rpx',
    height: area.height * ratio + 'rpx',
  }
})

const {logClick} = useMD(props.properties.mdConfig || {})

const emit = defineEmits<{
  (e: 'click', e: any): void
  (e: 'getphonenumber', e: any): void
}>()

function onClick(e) {
  emit('click', e)

  if ((!props.properties.needLogin || props.isLogin) && props.properties.link) {
    jump(props.properties.link)
  }
  logClick()
}

</script>

<template>
  <button class="click-area" :class="{'debug-mode': debugMode}" :style="style"
          :open-type="openType ?? (properties.needLogin && !isLogin ? 'getPhoneNumber' : undefined)"
          @click="onClick"
          @getphonenumber="(e) => emit('getphonenumber', e)"
  />
</template>

<style scoped lang="less">
.click-area {
  position: absolute;
  border: none;
  border-radius: 0;
  background-color: transparent;

  &.debug-mode {
    background-color: rgba(255, 0, 0, 0.3);
  }

  &::after {
    border: none;
  }
}
</style>