'use strict';

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

var vue = require('vue');
var lodashEs = require('lodash-es');
require('../../../../utils/index.js');
require('../config/index.js');
var createNamespace = require('../../../../utils/create-namespace.js');
var keyValueItem = require('../config/key-value-item.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "LlKeyValueItem"
  },
  __name: "key-value-item",
  props: keyValueItem.keyValueItemProps,
  emits: keyValueItem.keyValueItemEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const attrs = vue.useAttrs();
    const bem = createNamespace.createNamespace("key-value");
    const innerValue = vue.ref(props.value);
    const formRef = vue.ref();
    const getKeyType = vue.computed(() => {
      const option = props.keyType;
      return option;
    });
    const getValueType = vue.computed(() => {
      let option = props.valueType;
      if (innerValue.value["key"] && !lodashEs.isEmpty(props.keyValueTypeDict)) {
        option = props.keyValueTypeDict[innerValue.value["key"]];
      }
      return option;
    });
    const getKeyDisabled = vue.computed(() => {
      return props.disabledKey?.includes(props.idx) || props.disabled || getKeyType.value?.disabled;
    });
    const getValueDisabled = vue.computed(() => {
      return props.disabledValue?.includes(props.idx) || props.disabled || getValueType.value?.disabled;
    });
    const hasValue = vue.computed(() => {
      return innerValue.value["key"] || innerValue.value["key"] === 0 || innerValue.value["value"];
    });
    const getDeleteDisabled = vue.computed(() => {
      return props.disabledDelete?.includes(props.idx) || props.disabled || props.values.length === 1 && !hasValue.value;
    });
    const handleDelete = () => {
      emits("delete");
    };
    const handleChange = async () => {
      innerValue.value["value"] = null;
      await formRef.value?.clearValidate();
    };
    const validate = async () => {
      await vue.nextTick();
      try {
        await formRef.value?.validate();
        return Promise.resolve();
      } catch (error) {
        console.log({ error }, props.idx);
        return Promise.reject();
      }
    };
    const resetFields = async () => {
      await formRef.value?.resetFields();
    };
    const clearValidate = async (namePath) => {
      await formRef.value?.clearValidate(namePath);
    };
    vue.watch(
      innerValue,
      async (val) => {
        await vue.nextTick().then(() => {
          try {
            emits("update:value", val);
            emits("change");
          } catch (error) {
            console.error(error);
          }
        });
      },
      {
        deep: true
      }
    );
    __expose({
      validate,
      resetFields,
      clearValidate
    });
    return (_ctx, _cache) => {
      const _component_ll_select = vue.resolveComponent("ll-select");
      const _component_ll_form_item = vue.resolveComponent("ll-form-item");
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_button = vue.resolveComponent("ll-button");
      const _component_a_popconfirm = vue.resolveComponent("a-popconfirm");
      const _component_ll_form = vue.resolveComponent("ll-form");
      return vue.openBlock(), vue.createBlock(_component_ll_form, {
        ref_key: "formRef",
        ref: formRef,
        "form-columns": vue.unref(keyValueItem.formColumns),
        "form-data": props.value,
        "form-options": vue.unref(keyValueItem.formOptions)
      }, {
        formItem: vue.withCtx(({ item }) => [
          item.key === "other" ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: vue.normalizeClass(vue.unref(bem).e("item"))
            },
            [
              props.keyValueType !== "single" ? (vue.openBlock(), vue.createElementBlock(
                "div",
                {
                  key: 0,
                  class: vue.normalizeClass(vue.unref(bem).m("left"))
                },
                [
                  vue.createVNode(_component_ll_form_item, {
                    label: vue.unref(attrs)["key-label"],
                    "label-col": {
                      span: 24
                    },
                    rules: getKeyType.value.rules || [],
                    name: "key"
                  }, {
                    default: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "key", {}, () => [
                        !vue.unref(lodashEs.isEmpty)(props.keyTypes) ? (vue.openBlock(), vue.createBlock(_component_ll_select, {
                          key: 0,
                          value: innerValue.value["key"],
                          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => innerValue.value["key"] = $event),
                          options: props.keyTypes,
                          disabled: getKeyDisabled.value,
                          style: { "width": "100%" },
                          placeholder: "\u8BF7\u9009\u62E9",
                          "allow-clear": "",
                          onChange: handleChange
                        }, null, 8, ["value", "options", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(`ll-${getKeyType.value.type}`), vue.mergeProps({
                          key: 1,
                          value: innerValue.value["key"],
                          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => innerValue.value["key"] = $event)
                        }, getKeyType.value, {
                          disabled: getKeyDisabled.value,
                          style: { "width": "100%" }
                        }), vue.createSlots({
                          _: 2
                          /* DYNAMIC */
                        }, [
                          vue.renderList(Object.keys(_ctx.$slots), (_item) => {
                            return {
                              name: _item,
                              fn: vue.withCtx((data) => [
                                vue.renderSlot(_ctx.$slots, _item, vue.mergeProps(data || {}, { content: "key" }))
                              ])
                            };
                          })
                        ]), 1040, ["value", "disabled"]))
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["label", "rules"])
                ],
                2
                /* CLASS */
              )) : vue.createCommentVNode("v-if", true),
              props.keyValueType !== "single" ? (vue.openBlock(), vue.createElementBlock(
                "div",
                {
                  key: 1,
                  class: vue.normalizeClass(vue.unref(bem).m("separator")),
                  style: vue.normalizeStyle({
                    "margin-top": !!vue.unref(attrs)["key-label"] || !!vue.unref(attrs)["value-label"] ? "26px" : "0px"
                  })
                },
                [
                  vue.renderSlot(_ctx.$slots, "separator", {}, () => [
                    vue.createVNode(_component_ll_icon, {
                      style: { "font-size": "16px" },
                      "icon-name": "icon-symbol"
                    })
                  ])
                ],
                6
                /* CLASS, STYLE */
              )) : vue.createCommentVNode("v-if", true),
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).m("right"))
                },
                [
                  vue.createVNode(_component_ll_form_item, {
                    label: vue.unref(attrs)["value-label"],
                    "label-col": {
                      span: 24
                    },
                    rules: getValueType.value.rules || [],
                    name: "value"
                  }, {
                    default: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "value-wrapper", vue.normalizeProps(vue.guardReactiveProps(getValueType.value)), () => [
                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(`ll-${getValueType.value.type}`), vue.mergeProps({
                          value: innerValue.value["value"],
                          "onUpdate:value": _cache[2] || (_cache[2] = ($event) => innerValue.value["value"] = $event),
                          disabled: getValueDisabled.value,
                          style: { "width": "100%" }
                        }, getValueType.value), vue.createSlots({
                          _: 2
                          /* DYNAMIC */
                        }, [
                          vue.renderList(Object.keys(_ctx.$slots), (_item) => {
                            return {
                              name: _item,
                              fn: vue.withCtx((data) => [
                                vue.renderSlot(_ctx.$slots, _item, vue.mergeProps(data || {}, { content: "value" }))
                              ])
                            };
                          })
                        ]), 1040, ["value", "disabled"]))
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["label", "rules"])
                ],
                2
                /* CLASS */
              ),
              hasValue.value ? (vue.openBlock(), vue.createBlock(_component_a_popconfirm, {
                key: 2,
                title: "\u786E\u5B9A\u8981\u79FB\u9664\u5417?",
                "ok-text": "\u786E\u8BA4",
                "cancel-text": "\u53D6\u6D88",
                placement: "topRight",
                "overlay-class-name": vue.unref(bem).m("popconfirm"),
                "get-popup-container": (trigger) => trigger.parentNode,
                "destroy-tooltip-on-hide": "",
                onConfirm: handleDelete
              }, {
                default: vue.withCtx(() => [
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass(vue.unref(bem).m("delete")),
                      style: vue.normalizeStyle({
                        "margin-top": !!vue.unref(attrs)["key-label"] || !!vue.unref(attrs)["value-label"] ? "26px" : "0px"
                      })
                    },
                    [
                      vue.createVNode(_component_ll_button, {
                        type: "link",
                        disabled: getDeleteDisabled.value
                      }, {
                        default: vue.withCtx(() => [
                          vue.renderSlot(_ctx.$slots, "delete-icon", {}, () => [
                            vue.createVNode(_component_ll_icon, {
                              "icon-name": "icon-remove",
                              class: "delete"
                            })
                          ])
                        ]),
                        _: 3
                        /* FORWARDED */
                      }, 8, ["disabled"])
                    ],
                    6
                    /* CLASS, STYLE */
                  )
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["overlay-class-name", "get-popup-container"])) : (vue.openBlock(), vue.createElementBlock(
                "div",
                {
                  key: 3,
                  class: vue.normalizeClass(vue.unref(bem).m("delete")),
                  style: vue.normalizeStyle({
                    "margin-top": !!vue.unref(attrs)["key-label"] || !!vue.unref(attrs)["value-label"] ? "26px" : "0px"
                  })
                },
                [
                  vue.createVNode(_component_ll_button, {
                    type: "link",
                    disabled: getDeleteDisabled.value,
                    onClick: handleDelete
                  }, {
                    default: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "delete-icon", {}, () => [
                        vue.createVNode(_component_ll_icon, {
                          "icon-name": "icon-remove",
                          class: "delete"
                        })
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["disabled"])
                ],
                6
                /* CLASS, STYLE */
              ))
            ],
            2
            /* CLASS */
          )) : vue.createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["form-columns", "form-data", "form-options"]);
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=key-value-item.vue2.js.map
