<template>
  <view class="center" @click="clickEvt">
    <view
      class="center2 fp--center"
      :style="{
        borderRadius: bgRadius,
        height: bgHeight,
        width: bgWidth,
        padding: bgPadding,
        background: bgColor,
      }"
    >
      <text
        class="bg--100 h--45rpx w--45rpx"
        :style="{
          height: imgHeight,
          width: imgWidth,
          backgroundImage: `url(${imgUrl})`,
        }"
      ></text>
    </view>
    <view class="mt--3 fs--13 c666" :style="textStyle">{{ text }}</view>
  </view>
</template>
<script lang="ts" setup name="w-icon-text">
import { CSSProperties } from "vue";
interface Props {
  bgColor?: string;
  bgRadius?: string;
  bgWidth?: string;
  bgHeight?: string;
  bgPadding?: string;
  imgWidth?: string;
  imgHeight?: string;
  imgUrl?: string;
  text?: string;
  textStyle?: string | CSSProperties;
}

withDefaults(defineProps<Props>(), {
  bgRadius: "20rpx",
  bgWidth: "60rpx",
  bgHeight: "60rpx",
  bgPadding: "10rpx",
  bgColor: "#377dff",
  imgWidth: "45rpx",
  imgHeight: "45rpx",
  imgUrl: "45rpx",
});
const emit = defineEmits(["click"]);
const clickEvt = () => {
  emit("click");
};
</script>
<style lang="scss" scoped></style>
