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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var helper = require('../../chunks/helper.js');
var isString = require('lodash/isString');
var isNumber = require('lodash/isNumber');
var utils_event = require('../../utils/event.js');
var components_configProvider_configReceiver = require('../config-provider/config-receiver.js');
var utils_mixins = require('../../utils/mixins.js');
var components_radio_radio = require('./radio.js');
var components_radio_props = require('./props.js');
require('../../utils/helper.js');
require('lodash/camelCase');
require('vue');
require('lodash/mergeWith');
require('lodash');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../../utils/render-node.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);

const classPrefixMixins = components_configProvider_configReceiver.getClassPrefixMixins("radio-group");
var _RadioGroup = utils_mixins["default"](classPrefixMixins).extend({
  name: "LRadioGroup",
  props: {
    ...components_radio_props.RadioGroupProps
  },
  components: {
    LRadio: components_radio_radio["default"]
  },
  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__default["default"](option) || isString__default["default"](option)) opt = {
          value: option,
          label: option.toString()
        };
        return h("l-radio", helper.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) {
      utils_event.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`
      };
    }
  }
});

exports["default"] = _RadioGroup;
//# sourceMappingURL=group.js.map
