"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
const XEUtils = require("xe-utils");
require("../../ui/index.js");
const utils = require("../../ui/src/utils.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const VxeSwitchComponent = comp.defineVxeComponent({
  name: "VxeSwitch",
  props: {
    modelValue: [String, Number, Boolean],
    disabled: {
      type: Boolean,
      default: null
    },
    readonly: {
      type: Boolean,
      default: null
    },
    size: {
      type: String,
      default: () => config.getConfig().switch.size || config.getConfig().size
    },
    openLabel: String,
    closeLabel: String,
    openValue: {
      type: [String, Number, Boolean],
      default: true
    },
    closeValue: {
      type: [String, Number, Boolean],
      default: false
    },
    openIcon: String,
    closeIcon: String,
    openActiveIcon: String,
    closeActiveIcon: String
  },
  emits: [
    "update:modelValue",
    "change",
    "focus",
    "blur"
  ],
  setup(props, context) {
    const { emit } = context;
    const $xeForm = vue.inject("$xeForm", null);
    const formItemInfo = vue.inject("xeFormItemInfo", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const reactData = vue.reactive({
      isActivated: false,
      hasAnimat: false,
      offsetLeft: 0
    });
    const internalData = {};
    const $xeSwitch = {
      xID,
      props,
      context,
      reactData,
      internalData
    };
    const refButton = vue.ref();
    let switchMethods = {};
    const computeIsDisabled = vue.computed(() => {
      const { disabled } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.readonly || $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeIsReadonly = vue.computed(() => {
      const { readonly } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly || $xeForm.props.disabled;
        }
        return false;
      }
      return readonly;
    });
    const computeOnShowLabel = vue.computed(() => {
      return utils.getFuncText(props.openLabel);
    });
    const computeOffShowLabel = vue.computed(() => {
      return utils.getFuncText(props.closeLabel);
    });
    const computeIsChecked = vue.computed(() => {
      return props.modelValue === props.openValue;
    });
    const emitModel = (value) => {
      emit("update:modelValue", value);
    };
    const clickEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      const isReadonly = computeIsReadonly.value;
      if (!(isDisabled || isReadonly)) {
        const isChecked = computeIsChecked.value;
        clearTimeout(internalData.atTimeout);
        const value = isChecked ? props.closeValue : props.openValue;
        reactData.hasAnimat = true;
        emitModel(value);
        switchMethods.dispatchEvent("change", { value }, evnt);
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
        }
        internalData.atTimeout = setTimeout(() => {
          reactData.hasAnimat = false;
          internalData.atTimeout = void 0;
        }, 400);
      }
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, event.createEvent(evnt, { $switch: $xeSwitch }, params));
    };
    const focusEvent = (evnt) => {
      reactData.isActivated = true;
      switchMethods.dispatchEvent("focus", { value: props.modelValue }, evnt);
    };
    const blurEvent = (evnt) => {
      reactData.isActivated = false;
      switchMethods.dispatchEvent("blur", { value: props.modelValue }, evnt);
    };
    switchMethods = {
      dispatchEvent,
      focus() {
        const btnElem = refButton.value;
        reactData.isActivated = true;
        if (btnElem) {
          btnElem.focus();
        }
        return vue.nextTick();
      },
      blur() {
        const btnElem = refButton.value;
        if (btnElem) {
          btnElem.blur();
        }
        reactData.isActivated = false;
        return vue.nextTick();
      }
    };
    Object.assign($xeSwitch, switchMethods);
    const renderVN = () => {
      const { openIcon, closeIcon, openActiveIcon, closeActiveIcon } = props;
      const vSize = computeSize.value;
      const isChecked = computeIsChecked.value;
      const onShowLabel = computeOnShowLabel.value;
      const offShowLabel = computeOffShowLabel.value;
      const isDisabled = computeIsDisabled.value;
      const isReadonly = computeIsReadonly.value;
      return vue.h("div", {
        class: ["vxe-switch", isChecked ? "is--on" : "is--off", {
          [`size--${vSize}`]: vSize,
          "is--disabled": isDisabled,
          "is--readonly": isReadonly,
          "is--animat": reactData.hasAnimat
        }]
      }, [
        vue.h("button", {
          ref: refButton,
          class: "vxe-switch--button",
          type: "button",
          disabled: isDisabled || isReadonly,
          onClick: clickEvent,
          onFocus: focusEvent,
          onBlur: blurEvent
        }, [
          vue.h("span", {
            class: "vxe-switch--label vxe-switch--label-on"
          }, [
            openIcon ? vue.h("i", {
              class: ["vxe-switch--label-icon", openIcon]
            }) : index_esm.renderEmptyElement(),
            onShowLabel
          ]),
          vue.h("span", {
            class: "vxe-switch--label vxe-switch--label-off"
          }, [
            closeIcon ? vue.h("i", {
              class: ["vxe-switch--label-icon", closeIcon]
            }) : index_esm.renderEmptyElement(),
            offShowLabel
          ]),
          vue.h("span", {
            class: ["vxe-switch--icon"]
          }, openActiveIcon || closeActiveIcon ? [
            vue.h("i", {
              class: isChecked ? openActiveIcon : closeActiveIcon
            })
          ] : [])
        ])
      ]);
    };
    $xeSwitch.renderVN = renderVN;
    return $xeSwitch;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeSwitchComponent;
