<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div
    :class="['common-icon-container', 'common-icon-container-mobile']"
    :style="{
      padding: iconHotAreaSize,
    }"
    @click="handleImgClick"
  >
    <image
      v-if="isApp"
      class="common-icon"
      :src="props.file"
      :style="{ width: iconWidth, height: iconHeight }"
    />
    <!-- pc 微信对 svg 的兼容性有问题，鼠标移到 svg 上去会丢失光标，为了规避此问题，我们用 div 包裹 img 标签    -->
    <div v-if="isWeChat" :style="{ width: iconWidth, height: iconHeight, cursor: 'pointer' }">
      <img
        class="common-icon"
        :src="props.file"
        :style="{ width: iconWidth, height: iconHeight }"
      >
    </div>
    <!-- h5 img 标签不用 div 包裹，避免样式异常    -->
    <img
      v-if="isH5"
      class="common-icon"
      :src="props.file"
      :style="{ width: iconWidth, height: iconHeight }"
    >
  </div>
</template>
<script setup lang="ts">
import vue from '../../adapter-vue';
import {isApp, isH5, isWeChat} from '../../utils/env';
const { withDefaults, computed } = vue;

interface IProps {
  file: string;
  size?: string;
  width?: string;
  height?: string;
  hotAreaSize?: number | string;
}

interface IEmits {
  (key: 'onClick', e: Event): void;
}

const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
  file: '',
  width: '20px',
  height: '20px',
});

const iconHotAreaSize = computed<undefined | string>(() => {
  if (!props.hotAreaSize) {
    return undefined;
  }
  if (isNaN(Number(props.hotAreaSize))) {
    return String(props.hotAreaSize);
  }
  return `${props.hotAreaSize}px`;
});

const iconWidth = computed(() => {
  return props.size ? props.size : props.width;
});

const iconHeight = computed(() => {
  return props.size ? props.size : props.height;
});

const handleImgClick = (e: Event) => {
  emits('onClick', e);
};
</script>

<style lang="scss" scoped>
.common-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.common-icon-container-mobile {
  cursor: none;
}
</style>
