<template>
  <view :class="radioClass" :style="stringifyStyle(rootStyle)" @click="onClick">
    <view :class="iconClass" :style="iconStyle">
      <slot name="icon" :checked="innerChecked">
        <sar-icon v-if="!$slots.icon" :name="iconName" />
      </slot>
    </view>
    <view v-if="$slots.default || label" :class="labelClass">
      <slot>{{ label }}</slot>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, provide, inject } from "vue";
import { classNames, createBem, stringifyStyle } from "../utils";
import {
  radioContextSymbol,
  radioProps,
  mapTypeIcon
} from "./common";
import SarIcon from "../icon/icon.vue";
import { useFormContext } from "../form/common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "radio",
  props: radioProps,
  emits: ["click"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("radio");
    const groupContext = inject(radioContextSymbol, null);
    const formContext = useFormContext();
    const innerChecked = computed(() => {
      return !!groupContext && groupContext.value === props.value;
    });
    const isDisabled = computed(() => {
      return formContext?.disabled ?? props.disabled ?? groupContext?.disabled;
    });
    const isReadonly = computed(() => {
      return formContext?.readonly ?? props.readonly ?? groupContext?.readonly;
    });
    const onClick = (event) => {
      if (!isDisabled.value && !isReadonly.value) {
        groupContext?.toggle(props.value);
      }
      emit("click", event);
    };
    provide(radioContextSymbol, null);
    const radioClass = computed(() => {
      return classNames(
        bem.b(),
        bem.m("checked", innerChecked.value),
        bem.m("disabled", isDisabled.value),
        bem.m("readonly", isReadonly.value),
        props.rootClass
      );
    });
    const iconName = computed(() => {
      const type = props.type ?? groupContext?.type ?? "circle";
      return mapTypeIcon[type][innerChecked.value ? 1 : 0];
    });
    const iconColor = computed(() => {
      return innerChecked.value && !isDisabled.value ? props.checkedColor ?? groupContext?.checkedColor : void 0;
    });
    const iconClass = computed(() => {
      return classNames(
        bem.e("icon"),
        bem.em("icon", "checked", innerChecked.value)
      );
    });
    const iconStyle = computed(() => {
      return stringifyStyle({
        fontSize: props.size ?? groupContext?.size,
        color: iconColor.value
      });
    });
    const labelClass = computed(() => {
      return classNames(bem.e("label"));
    });
    const __returned__ = { props, emit, bem, groupContext, formContext, innerChecked, isDisabled, isReadonly, onClick, radioClass, iconName, iconColor, iconClass, iconStyle, labelClass, get stringifyStyle() {
      return stringifyStyle;
    }, SarIcon };
    return __returned__;
  }
});
</script>

<style lang="scss">
@use './index.scss';
</style>