/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { h as helper } from '../../_chunks/dep-29915b8e.js';
import isString from 'lodash/isString';
import isNumber from 'lodash/isNumber';
import { emitEvent } from '../../utils/event.js';
import { getClassPrefixMixins } from '../config-provider/config-receiver.js';
import mixins from '../../utils/mixins.js';
import _Radio from './radio.js';
import { RadioGroupProps } from './props.js';
import '../../utils/helper.js';
import 'lodash/camelCase';
import 'vue';
import 'lodash/mergeWith';
import 'lodash';
import '../config-provider/context.js';
import '../../_chunks/dep-def4c2ce.js';
import '../../utils/render-node.js';

const classPrefixMixins = getClassPrefixMixins("radio-group");
var _RadioGroup = mixins(classPrefixMixins).extend({
  name: "LRadioGroup",
  props: {
    ...RadioGroupProps
  },
  components: {
    LRadio: _Radio
  },
  provide() {
    return {
      radioGroup: this
    };
  },
  data() {
    return {
      barStyle: {
        width: "0px",
        left: "0px"
      },
      observer: null
    };
  },
  computed: {
    checkedClassName() {
      return `.${this.classPrefix}-radio-button.${this.commonStatusClassName.checked}`;
    }
  },
  render(h) {
    const {
      $scopedSlots
    } = this;
    let children = $scopedSlots.default && $scopedSlots.default(null);
    if (this.options && this.options.length) {
      children = this.options.map((option, index) => {
        let opt = option;
        if (isNumber(option) || isString(option)) opt = {
          value: option,
          label: option.toString()
        };
        return h("l-radio", helper([{}, {
          "props": option
        }, {
          "key": `radio-group-options-${opt.value}-${index}`,
          "attrs": {
            "name": this.name,
            "checked": this.value === opt.value,
            "disabled": "disabled" in opt ? opt.disabled : this.disabled,
            "value": opt.value
          }
        }]), [typeof opt.label === "function" ? opt.label(h) : opt.label]);
      });
    }
    const groupClass = [`${this.componentName}`, this.commonSizeClassName[this.size], {
      [`${this.componentName}__outline`]: this.variant === "outline",
      [`${this.componentName}--filled`]: this.variant.includes("filled"),
      [`${this.componentName}--primary-filled`]: this.variant === "primary-filled"
    }];
    if (this.variant.includes("filled")) {
      children && children.push(h("div", {
        "style": this.barStyle,
        "class": `${this.componentName}__bg-block`
      }));
    }
    return h("div", {
      "class": groupClass
    }, [children]);
  },
  watch: {
    value() {
      this.$nextTick(() => this.calcBarStyle());
    }
  },
  created() {
    this.$on("checked-change", this.handleRadioChange);
  },
  mounted() {
    this.calcBarStyle();
    const observer = new MutationObserver(this.calcBarStyle);
    observer.observe(this.$el, {
      childList: true,
      attributes: true,
      subtree: true
    });
    this.observer = observer;
  },
  beforeDestroy() {
    this.observer.disconnect();
  },
  methods: {
    handleRadioChange(value, context) {
      emitEvent(this, "change", value, context);
    },
    calcDefaultBarStyle() {
      const defaultNode = this.$el.cloneNode(true);
      const div = document.createElement("div");
      div.setAttribute("style", "position: absolute; visibility: hidden;");
      div.appendChild(defaultNode);
      document.body.appendChild(div);
      const defaultCheckedRadio = div.querySelector(this.checkedClassName);
      const {
        offsetWidth,
        offsetLeft
      } = defaultCheckedRadio;
      this.barStyle = {
        width: `${offsetWidth}px`,
        left: `${offsetLeft}px`
      };
      document.body.removeChild(div);
    },
    calcBarStyle() {
      if (this.variant === "outline") return;
      const checkedRadio = this.$el.querySelector(this.checkedClassName);
      if (!checkedRadio) return;
      const {
        offsetWidth,
        offsetLeft
      } = checkedRadio;
      if (!offsetWidth) this.calcDefaultBarStyle();else this.barStyle = {
        width: `${offsetWidth}px`,
        left: `${offsetLeft}px`
      };
    }
  }
});

export { _RadioGroup as default };
//# sourceMappingURL=group.js.map
