<template>
  <view :class="switchClass" :style="switchStyle" @click="onClick">
    <view :class="bem.e('thumb')">
      <sar-loading v-if="innerLoading" size="0.5em" />
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent as _defineComponent } from "vue";
import { computed, ref, watch } from "vue";
import { classNames, stringifyStyle, createBem } from "../utils";
import SarLoading from "../loading/loading.vue";
import { useFormContext, useFormItemContext } from "../form/common";
import { switchProps } from "./common";
const __default__ = {
  options: {
    virtualHost: true,
    styleIsolation: "shared"
  }
};
export default /* @__PURE__ */ _defineComponent({
  ...__default__,
  __name: "switch",
  props: switchProps,
  emits: ["click", "update:model-value", "update:loading"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("switch");
    const formContext = useFormContext();
    const formItemContext = useFormItemContext();
    const isDisabled = computed(() => {
      return formContext?.disabled ?? props.disabled;
    });
    const isReadonly = computed(() => {
      return formContext?.readonly ?? props.readonly;
    });
    const innerValue = ref(props.modelValue);
    watch(
      () => props.modelValue,
      () => {
        innerValue.value = props.modelValue;
        if (props.validateEvent) {
          formItemContext?.onChange();
        }
      }
    );
    const innerLoading = ref(props.loading);
    watch(
      () => props.loading,
      () => {
        innerLoading.value = props.loading;
      }
    );
    const isChecked = computed(() => {
      return innerValue.value === props.checkedValue;
    });
    const onClick = async (event) => {
      emit("click", event);
      if (isDisabled.value || isReadonly.value || innerLoading.value) {
        return;
      }
      const nextValue = innerValue.value === props.checkedValue ? props.uncheckedValue : props.checkedValue;
      if (props.beforeUpdate) {
        try {
          innerLoading.value = true;
          await props.beforeUpdate(nextValue);
        } catch {
          return;
        } finally {
          innerLoading.value = false;
        }
      }
      innerValue.value = nextValue;
      emit("update:model-value", nextValue);
    };
    const switchClass = computed(() => {
      return classNames(
        bem.b(),
        bem.m("checked", isChecked.value),
        bem.m("readonly", isReadonly.value),
        bem.m("disabled", isDisabled.value),
        props.rootClass
      );
    });
    const switchStyle = computed(() => {
      return stringifyStyle(
        {
          fontSize: props.size,
          backgroundColor: isChecked.value ? props.checkedColor : props.uncheckedColor
        },
        props.rootStyle
      );
    });
    const __returned__ = { props, emit, bem, formContext, formItemContext, isDisabled, isReadonly, innerValue, innerLoading, isChecked, onClick, switchClass, switchStyle, SarLoading };
    return __returned__;
  }
});
</script>

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