<template>
  <div
    class="radio-icon-wrap"
    @click.stop="onClick"
    data-weiling-mobile-ui-wl-radio-icon
  >
    <div :class="radioWrapClass">
      <template v-if="isChecked">
        <WlSvg
          :type="svgType"
          color="var(--wl-primary-color)"
          :height="iconSize"
          :width="iconSize"
          v-if="['hook', 'icon'].includes(type)"
        />
        <p
          class="dot"
          v-else-if="type === 'dot'"
        />
        <p
          class="count"
          v-else-if="type === 'count'"
        >{{ count }}</p>
      </template>
    </div>
    <p
      class="uno-pl-8"
      v-if="text"
    >{{ text }}</p>
  </div>
</template>

<script lang="ts">
export default {
  name: "WlRadioIcon",
};
</script>

<script setup lang="ts">
import WlSvg from "@wltech/svg";
import { computed, ref, watchEffect } from "vue";
import { TCheckedType } from "@mobileUI/typings/WlRadioIcon";

type Props = {
  isChoosed?: boolean;
  disabled?: boolean;
  size?: number;
  color?: string;
  count?: number;
  type?: TCheckedType;
  iconType?: string;
  text?: string;
};

const props = withDefaults(defineProps<Props>(), {
  isChoosed: false,
  disabled: false,
  size: 18,
  color: "var(--wl-primary-color)",
  count: 1,
  type: "hook",
  iconType: "",
  text: "",
});

const isChecked = ref(false);

const iconSize = computed(() => props.size + "px");

const svgType = computed(() => (props.type === "hook" ? "successFill" : props.iconType));

const radioWrapClass = computed(() => {
  return `radio-wrap ${isChecked.value ? "" : "checked"}`;
});

const emit = defineEmits<{
  (e: "onClick", val: boolean);
}>();

const onClick = () => {
  if (props.disabled) return;
  emit("onClick", isChecked.value);
};

watchEffect(() => {
  isChecked.value = props.isChoosed;
});
</script>

<style lang="scss">
.radio-icon-wrap[data-weiling-mobile-ui-wl-radio-icon] {
  @extend %flex-middle-center;
  display: inline-flex;

  .radio-wrap {
    cursor: pointer;
    width: v-bind(iconSize);
    height: v-bind(iconSize);
    border-radius: 50%;
    @extend %flex-middle-center;

    &.checked {
      box-sizing: border-box;
      border: j(1) solid rgba(0, 0, 0, 0.3);
    }

    .hook {
      width: v-bind(iconSize);
      height: v-bind(iconSize);
      border-radius: 50%;
      @extend %flex-middle-center;
      background-color: var(--wl-primary-color);
    }

    .dot {
      width: v-bind(iconSize);
      height: v-bind(iconSize);
      border-radius: 50%;
      box-sizing: border-box;
      border: 6px solid v-bind(color);
    }

    .count {
      width: v-bind(iconSize);
      height: v-bind(iconSize);
      color: #fff;
      font-size: j(16);
      border-radius: 50%;
      background-color: var(--wl-primary-color);
      @extend %flex-middle-center;
    }
  }
}
</style>
