"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _dom = require("../../ui/src/dom");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function createReactData() {
  return {
    groupName: _xeUtils.default.uniqueId('xe_group_'),
    selectStyle: {
      display: '',
      left: '',
      width: ''
    }
  };
}
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeSegmented',
  mixins: [_ui.globalMixins.sizeMixin],
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  props: {
    value: [String, Number],
    name: [String, Number],
    disabled: Boolean,
    options: Array,
    type: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().segmented.type;
      }
    },
    status: String,
    width: [String, Number],
    height: [String, Number],
    optionConfig: Object,
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().segmented.size || (0, _ui.getConfig)().size;
      }
    }
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = createReactData();
    return {
      xID: xID,
      reactData: reactData
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeItemType: function computeItemType() {
      var $xeSegmented = this;
      var props = $xeSegmented;
      var type = props.type;
      if (type === 'round') {
        return type;
      }
      if (type === 'inside') {
        return type;
      }
      return 'default';
    },
    computeWrapperStyle: function computeWrapperStyle() {
      var $xeSegmented = this;
      var props = $xeSegmented;
      var width = props.width;
      var stys = {};
      if (width) {
        stys.width = (0, _dom.toCssUnit)(width);
      }
      return stys;
    },
    computeOptionOpts: function computeOptionOpts() {
      var $xeSegmented = this;
      var props = $xeSegmented;
      return Object.assign({}, (0, _ui.getConfig)().segmented.optionConfig, props.optionConfig);
    },
    computeItemList: function computeItemList() {
      var $xeSegmented = this;
      var props = $xeSegmented;
      return props.options || [];
    },
    computeSelectIndex: function computeSelectIndex() {
      var $xeSegmented = this;
      var props = $xeSegmented;
      var modelValue = props.value;
      var itemList = $xeSegmented.computeItemList;
      return _xeUtils.default.findIndexOf(itemList, function (item) {
        return item.value === modelValue;
      });
    },
    comIsFullWidth: function comIsFullWidth() {
      var $xeSegmented = this;
      var wrapperStyle = $xeSegmented.computeWrapperStyle;
      return wrapperStyle.width === '100%';
    }
  }),
  watch: {
    computeSelectIndex: function computeSelectIndex() {
      var $xeSegmented = this;
      $xeSegmented.updateStyle();
    }
  },
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeSegmented = this;
      $xeSegmented.$emit(type, (0, _ui.createEvent)(evnt, {
        $segmented: $xeSegmented
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeSegmented = this;
      var _events = $xeSegmented._events;
      $xeSegmented.$emit('input', value);
      if (_events && _events.modelValue) {
        $xeSegmented.$emit('modelValue', value);
      } else {
        $xeSegmented.$emit('model-value', value);
      }
    },
    changeEvent: function changeEvent(evnt, item) {
      var $xeSegmented = this;
      var value = item.value;
      $xeSegmented.emitModel(value);
      $xeSegmented.dispatchEvent('change', {
        value: value
      }, evnt);
      $xeSegmented.updateStyle();
    },
    updateStyle: function updateStyle() {
      var $xeSegmented = this;
      var reactData = $xeSegmented.reactData;
      $xeSegmented.$nextTick(function () {
        var selectIndex = $xeSegmented.computeSelectIndex;
        var wrapperElem = $xeSegmented.$refs.refWrapperElem;
        var atStyle = {
          display: '',
          left: '',
          width: ''
        };
        if (wrapperElem) {
          var itemEl = wrapperElem.children[selectIndex];
          if (itemEl) {
            atStyle.display = 'block';
            atStyle.left = (0, _dom.toCssUnit)(itemEl.offsetLeft);
            atStyle.width = (0, _dom.toCssUnit)(itemEl.clientWidth);
          }
        }
        reactData.selectStyle = atStyle;
      });
    },
    //
    // Render
    //
    renderItems: function renderItems(h) {
      var $xeSegmented = this;
      var props = $xeSegmented;
      var reactData = $xeSegmented.reactData;
      var slots = $xeSegmented.$scopedSlots;
      var modelValue = props.value,
        name = props.name;
      var groupName = reactData.groupName;
      var optionOpts = $xeSegmented.computeOptionOpts;
      var itemList = $xeSegmented.computeItemList;
      var isFullWidth = $xeSegmented.comIsFullWidth;
      var fullItemWidth = isFullWidth ? Math.max(0, 100 / itemList.length) : 0;
      var defaultSlot = slots.default;
      var itemVNs = [];
      itemList.forEach(function (item, i) {
        var icon = item.icon,
          width = item.width;
        var itemWidth = width || optionOpts.width;
        itemVNs.push(h('label', {
          key: i,
          class: ['vxe-segmented--item', {
            'is--checked': modelValue === item.value
          }],
          style: isFullWidth || itemWidth ? {
            width: itemWidth ? (0, _dom.toCssUnit)(itemWidth) : fullItemWidth ? "".concat(fullItemWidth, "%") : ''
          } : undefined
        }, [h('input', {
          class: 'vxe-segmented--input',
          attrs: {
            type: 'radio',
            name: name || groupName
          },
          on: {
            change: function change(evnt) {
              $xeSegmented.changeEvent(evnt, item);
            }
          }
        }), h('div', {
          class: 'vxe-segmented--content'
        }, [icon ? h('div', {
          class: 'vxe-segmented--icon'
        }, [h('i', {
          class: icon
        })]) : (0, _ui.renderEmptyElement)($xeSegmented), h('div', {
          class: 'vxe-segmented--label'
        }, defaultSlot ? defaultSlot({
          option: item
        }) : _xeUtils.default.eqNull(item.label) ? '' : "".concat(item.label))])]));
      });
      return itemVNs;
    },
    renderVN: function renderVN(h) {
      var $xeSegmented = this;
      var props = $xeSegmented;
      var reactData = $xeSegmented.reactData;
      var status = props.status;
      var selectStyle = reactData.selectStyle;
      var itemType = $xeSegmented.computeItemType;
      var wrapperStyle = $xeSegmented.computeWrapperStyle;
      var vSize = $xeSegmented.computeSize;
      return h('div', {
        ref: 'refElem',
        class: ['vxe-segmented', "type--".concat(itemType), _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "theme--".concat(status), status)]
      }, [h('div', {
        class: 'vxe-segmented--group',
        style: wrapperStyle
      }, [h('div', {
        ref: 'refSelectedElem',
        class: 'vxe-segmented--selected',
        style: selectStyle
      }), h('div', {
        ref: 'refWrapperElem',
        class: 'vxe-segmented--inner'
      }, $xeSegmented.renderItems(h))])]);
    }
  },
  beforeDestroy: function beforeDestroy() {
    var $xeSegmented = this;
    var reactData = $xeSegmented.reactData;
    _xeUtils.default.assign(reactData, createReactData());
  },
  mounted: function mounted() {
    var $xeSegmented = this;
    $xeSegmented.updateStyle();
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */