import { defineComponent, useAttrs, ref, computed, nextTick, watch, resolveComponent, createBlock, openBlock, unref, withCtx, createElementBlock, createCommentVNode, normalizeClass, createElementVNode, createVNode, renderSlot, resolveDynamicComponent, mergeProps, createSlots, renderList, normalizeStyle, normalizeProps, guardReactiveProps } from 'vue';
import { isEmpty } from 'lodash-es';
import '../../../../utils/index.mjs';
import '../config/index.mjs';
import { createNamespace } from '../../../../utils/create-namespace.mjs';
import { formOptions, formColumns, keyValueItemEmits, keyValueItemProps } from '../config/key-value-item.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "LlKeyValueItem"
  },
  __name: "key-value-item",
  props: keyValueItemProps,
  emits: keyValueItemEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const attrs = useAttrs();
    const bem = createNamespace("key-value");
    const innerValue = ref(props.value);
    const formRef = ref();
    const getKeyType = computed(() => {
      const option = props.keyType;
      return option;
    });
    const getValueType = computed(() => {
      let option = props.valueType;
      if (innerValue.value["key"] && !isEmpty(props.keyValueTypeDict)) {
        option = props.keyValueTypeDict[innerValue.value["key"]];
      }
      return option;
    });
    const getKeyDisabled = computed(() => {
      return props.disabledKey?.includes(props.idx) || props.disabled || getKeyType.value?.disabled;
    });
    const getValueDisabled = computed(() => {
      return props.disabledValue?.includes(props.idx) || props.disabled || getValueType.value?.disabled;
    });
    const hasValue = computed(() => {
      return innerValue.value["key"] || innerValue.value["key"] === 0 || innerValue.value["value"];
    });
    const getDeleteDisabled = 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 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);
    };
    watch(
      innerValue,
      async (val) => {
        await 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 = resolveComponent("ll-select");
      const _component_ll_form_item = resolveComponent("ll-form-item");
      const _component_ll_icon = resolveComponent("ll-icon");
      const _component_ll_button = resolveComponent("ll-button");
      const _component_a_popconfirm = resolveComponent("a-popconfirm");
      const _component_ll_form = resolveComponent("ll-form");
      return openBlock(), createBlock(_component_ll_form, {
        ref_key: "formRef",
        ref: formRef,
        "form-columns": unref(formColumns),
        "form-data": props.value,
        "form-options": unref(formOptions)
      }, {
        formItem: withCtx(({ item }) => [
          item.key === "other" ? (openBlock(), createElementBlock(
            "div",
            {
              key: 0,
              class: normalizeClass(unref(bem).e("item"))
            },
            [
              props.keyValueType !== "single" ? (openBlock(), createElementBlock(
                "div",
                {
                  key: 0,
                  class: normalizeClass(unref(bem).m("left"))
                },
                [
                  createVNode(_component_ll_form_item, {
                    label: unref(attrs)["key-label"],
                    "label-col": {
                      span: 24
                    },
                    rules: getKeyType.value.rules || [],
                    name: "key"
                  }, {
                    default: withCtx(() => [
                      renderSlot(_ctx.$slots, "key", {}, () => [
                        !unref(isEmpty)(props.keyTypes) ? (openBlock(), 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"])) : (openBlock(), createBlock(resolveDynamicComponent(`ll-${getKeyType.value.type}`), 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%" }
                        }), createSlots({
                          _: 2
                          /* DYNAMIC */
                        }, [
                          renderList(Object.keys(_ctx.$slots), (_item) => {
                            return {
                              name: _item,
                              fn: withCtx((data) => [
                                renderSlot(_ctx.$slots, _item, mergeProps(data || {}, { content: "key" }))
                              ])
                            };
                          })
                        ]), 1040, ["value", "disabled"]))
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["label", "rules"])
                ],
                2
                /* CLASS */
              )) : createCommentVNode("v-if", true),
              props.keyValueType !== "single" ? (openBlock(), createElementBlock(
                "div",
                {
                  key: 1,
                  class: normalizeClass(unref(bem).m("separator")),
                  style: normalizeStyle({
                    "margin-top": !!unref(attrs)["key-label"] || !!unref(attrs)["value-label"] ? "26px" : "0px"
                  })
                },
                [
                  renderSlot(_ctx.$slots, "separator", {}, () => [
                    createVNode(_component_ll_icon, {
                      style: { "font-size": "16px" },
                      "icon-name": "icon-symbol"
                    })
                  ])
                ],
                6
                /* CLASS, STYLE */
              )) : createCommentVNode("v-if", true),
              createElementVNode(
                "div",
                {
                  class: normalizeClass(unref(bem).m("right"))
                },
                [
                  createVNode(_component_ll_form_item, {
                    label: unref(attrs)["value-label"],
                    "label-col": {
                      span: 24
                    },
                    rules: getValueType.value.rules || [],
                    name: "value"
                  }, {
                    default: withCtx(() => [
                      renderSlot(_ctx.$slots, "value-wrapper", normalizeProps(guardReactiveProps(getValueType.value)), () => [
                        (openBlock(), createBlock(resolveDynamicComponent(`ll-${getValueType.value.type}`), mergeProps({
                          value: innerValue.value["value"],
                          "onUpdate:value": _cache[2] || (_cache[2] = ($event) => innerValue.value["value"] = $event),
                          disabled: getValueDisabled.value,
                          style: { "width": "100%" }
                        }, getValueType.value), createSlots({
                          _: 2
                          /* DYNAMIC */
                        }, [
                          renderList(Object.keys(_ctx.$slots), (_item) => {
                            return {
                              name: _item,
                              fn: withCtx((data) => [
                                renderSlot(_ctx.$slots, _item, mergeProps(data || {}, { content: "value" }))
                              ])
                            };
                          })
                        ]), 1040, ["value", "disabled"]))
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["label", "rules"])
                ],
                2
                /* CLASS */
              ),
              hasValue.value ? (openBlock(), 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": unref(bem).m("popconfirm"),
                "get-popup-container": (trigger) => trigger.parentNode,
                "destroy-tooltip-on-hide": "",
                onConfirm: handleDelete
              }, {
                default: withCtx(() => [
                  createElementVNode(
                    "div",
                    {
                      class: normalizeClass(unref(bem).m("delete")),
                      style: normalizeStyle({
                        "margin-top": !!unref(attrs)["key-label"] || !!unref(attrs)["value-label"] ? "26px" : "0px"
                      })
                    },
                    [
                      createVNode(_component_ll_button, {
                        type: "link",
                        disabled: getDeleteDisabled.value
                      }, {
                        default: withCtx(() => [
                          renderSlot(_ctx.$slots, "delete-icon", {}, () => [
                            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"])) : (openBlock(), createElementBlock(
                "div",
                {
                  key: 3,
                  class: normalizeClass(unref(bem).m("delete")),
                  style: normalizeStyle({
                    "margin-top": !!unref(attrs)["key-label"] || !!unref(attrs)["value-label"] ? "26px" : "0px"
                  })
                },
                [
                  createVNode(_component_ll_button, {
                    type: "link",
                    disabled: getDeleteDisabled.value,
                    onClick: handleDelete
                  }, {
                    default: withCtx(() => [
                      renderSlot(_ctx.$slots, "delete-icon", {}, () => [
                        createVNode(_component_ll_icon, {
                          "icon-name": "icon-remove",
                          class: "delete"
                        })
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 8, ["disabled"])
                ],
                6
                /* CLASS, STYLE */
              ))
            ],
            2
            /* CLASS */
          )) : createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["form-columns", "form-data", "form-options"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=key-value-item.vue2.mjs.map
