/**
 * ldesign v0.2.11
 * (c) 2022/10/31 17:39 built by swimly
 * @license MIT
 */

'use strict';

var Vue = require('vue');
var desktop = require('@ldesign/desktop');
var iconsVue = require('@ldesign/icons-vue');
var utils_mixins = require('../utils/mixins.js');
var templates_query_props = require('../templates/query/props.js');

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

var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);

var Content = utils_mixins["default"](Vue__default["default"]).extend({
  name: "LdesignQueryContent",
  props: {
    ...templates_query_props.QueryContentProps
  },
  inject: {
    query: {
      default: void 0
    }
  },
  computed: {
    itemStyle() {
      return item => {
        const grid = item.grid ? item.grid : 1;
        return {
          width: `${this.itemWidth * grid}%`
        };
      };
    },
    lastItemStyle() {
      const grids = this.conditions.map(item => item.grid || 1);
      const total = grids.reduce((a, b) => a + b, 0);
      const last = this.query.grid - total % this.query.grid;
      return {
        width: `${100 / this.query.grid * last}%`
      };
    },
    styles() {
      return this.query.theme === "popup" ? {
        display: "flex"
      } : null;
    }
  },
  render(h) {
    return h("div", {
      "class": "ldesign-query__content",
      "style": this.styles
    }, [this.conditions.map((item, index) => {
      return h("div", {
        "class": "ldesign-query__item",
        "key": index,
        "style": this.itemStyle(item)
      }, [h("div", {
        "class": "ldesign-query__wrap"
      }, [h("h2", {
        "class": "ldesign-query__title"
      }, [item.title]), h("div", {
        "class": "ldesign-query__value"
      }, [h(item.component, {
        props: item.props,
        on: {
          ...item.on
        }
      })])])]);
    }), this.query.isExpanded && h("div", {
      "class": "ldesign-query__item",
      "style": this.lastItemStyle
    }, [h(Buttons)])]);
  }
});

var Buttons = utils_mixins["default"](Vue__default["default"]).extend({
  name: "LdesignPage",
  props: {
    ...templates_query_props.QueryButtonProps
  },
  inject: {
    query: {
      default: void 0
    }
  },
  computed: {
    label() {
      return this.query.isExpanded ? "\u6536\u8D77" : "\u5C55\u5F00";
    },
    icon() {
      return !this.query.isExpanded ? iconsVue.ChevronDownIcon : iconsVue.ChevronUpIcon;
    }
  },
  render(h) {
    return h("div", {
      "class": "ldesign-query__buttons"
    }, [this.query.theme === "expand" && h(desktop.Button, {
      "attrs": {
        "variant": "text"
      },
      "on": {
        "click": this.query.toggleExpand
      }
    }, [h("template", {
      "slot": "icon"
    }, [h(this.icon)]), this.label]), this.options.map(item => {
      return h(desktop.Button, {
        "props": {
          ...item
        }
      }, [item.label]);
    }), this.query.theme === "popup" && h(desktop.Popup, {
      "attrs": {
        "trigger": "click",
        "placement": "bottom-right",
        "overlayInnerStyle": {
          width: `${this.query.width}px`,
          padding: "16px"
        }
      }
    }, [h(desktop.Button, {
      "attrs": {
        "variant": "text"
      }
    }, [h("template", {
      "slot": "icon"
    }, [h(this.icon)]), this.label]), h("template", {
      "slot": "content"
    }, [h(Content, {
      "attrs": {
        "conditions": this.query.contentConditions,
        "itemWidth": this.query.itemWidth
      }
    })])])]);
  }
});

exports.Buttons = Buttons;
exports.Content = Content;
//# sourceMappingURL=button.js.map
