import { w as withInstall } from "../badge/index2.js";
import { defineComponent, useSlots, ref, watch, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, unref, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, renderSlot } from "vue";
import { _ as _sfc_main$2 } from "../input/index2.js";
import { _ as _sfc_main$3 } from "../button/index2.js";
import { _ as _sfc_main$1 } from "../checkbox/index2.js";
import "../_chunks/@layui/index.js";
import "../dropdownMenu/index2.js";
var index = /* @__PURE__ */ (() => ":root{--button-primary-text-color: #fff;--button-primary-background-color: var(--global-primary-color);--button-primary-border-color: var(--global-primary-color);--button-normal-text-color: #fff;--button-normal-background-color: var(--global-normal-color);--button-normal-border-color: var(--global-normal-color);--button-warm-text-color: #fff;--button-warm-background-color: var(--global-warm-color);--button-warm-border-color: var(--global-warm-color);--button-danger-text-color: #fff;--button-danger-background-color: var(--global-danger-color);--button-danger-border-color: var(--global-danger-color);--button-border-radius: var(--global-border-radius);--button-border-color: var(--global-neutral-color-6);--button-background-color: 0 0;--button-text-color: #666}.layui-btn{height:38px;line-height:36px;padding:0 18px;font-size:14px;text-align:center;white-space:nowrap;color:var(--button-text-color);background:var(--button-background-color);border-radius:var(--button-border-radius);border-color:var(--button-border-color);border-width:1px;border-style:solid;cursor:pointer}.layui-btn-primary{color:var(--button-primary-text-color);background-color:var(--button-primary-background-color);border-color:var(--button-primary-border-color)}.layui-btn-normal{color:var(--button-normal-text-color);background-color:var(--button-normal-background-color);border-color:var(--button-normal-border-color)}.layui-btn-warm{color:var(--button-warm-text-color);background-color:var(--button-warm-background-color);border-color:var(--button-warm-border-color)}.layui-btn-danger{color:var(--button-danger-text-color);background-color:var(--button-danger-background-color);border-color:var(--button-danger-border-color)}.layui-btn:hover{opacity:.8;filter:alpha(opacity=80)}.layui-btn:active{opacity:1;filter:alpha(opacity=100)}.layui-btn-lg{height:44px;line-height:44px;padding:0 25px;font-size:16px}.layui-btn-sm{height:30px;line-height:30px;padding:0 10px;font-size:12px}.layui-btn-xs{height:22px;line-height:22px;padding:0 5px;font-size:12px}.layui-btn-xs i{font-size:12px!important}.layui-btn-fluid{width:100%}.layui-btn-radius{border-radius:100px}.layui-btn-disabled,.layui-btn-disabled:active,.layui-btn-disabled:hover{border-color:#eee!important;background-color:#fbfbfb!important;color:#d2d2d2!important;cursor:not-allowed!important;opacity:1}.layui-btn+.layui-btn{margin-left:10px}.layui-btn .layui-icon{padding:0 2px;vertical-align:middle\\	;vertical-align:bottom}.layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border-top:1px solid var(--global-neutral-color-6);border-bottom:1px solid var(--global-neutral-color-6);border-right:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}:root{--transfer-box-border-radius: var(--global-border-radius)}.layui-transfer{display:flex}.layui-transfer .layui-btn+.layui-btn{margin-left:0}.layui-transfer-box,.layui-transfer-header,.layui-transfer-search{border-width:0;border-style:solid;border-color:#eee}.layui-transfer-box{position:relative;border-width:1px;display:flex;flex-direction:column;border-radius:var(--transfer-box-border-radius);background-color:#fff}.layui-transfer-box .layui-form-checkbox{width:100%;margin:0!important}.layui-transfer-header{height:38px;line-height:38px;padding:0 10px;border-bottom-width:1px;flex:0}.layui-transfer-search{position:relative;padding:10px;border-bottom-width:1px;flex:0}.layui-transfer-search .layui-input{height:35px;padding-left:2px;font-size:13px;letter-spacing:1px}.layui-transfer-search .layui-icon-search{color:#666}.layui-transfer-active{margin:0 15px}.layui-transfer-active .layui-btn{display:block;margin:0;padding:0 15px;background-color:#5fb878;border-color:#5fb878;color:#fff}.layui-transfer-active .layui-btn-disabled{background-color:#fbfbfb;border-color:#eee;color:#d2d2d2}.layui-transfer-active .layui-btn:first-child{margin-bottom:15px}.layui-transfer-active .layui-btn .layui-icon{margin:0;font-size:14px!important}.layui-transfer-data{padding:5px 0;overflow:auto;flex:1}.layui-transfer-data li{height:32px;line-height:32px;padding:0 10px}.layui-transfer-data li:hover{background-color:#f6f6f6;transition:.5s all}.layui-transfer-data .layui-none{padding:15px 10px;text-align:center;color:#999}.layui-transfer-active{display:flex;align-items:center;justify-items:center}.layui-transfer-footer{flex:0;height:38px;line-height:38px;border-top:1px solid #eee;padding:0 10px}\n")();
const _hoisted_1 = { class: "layui-transfer layui-form layui-border-box" };
const _hoisted_2 = { class: "layui-transfer-header" };
const _hoisted_3 = {
  key: 0,
  class: "layui-transfer-search"
};
const _hoisted_4 = { class: "layui-transfer-data" };
const _hoisted_5 = {
  key: 1,
  class: "layui-transfer-footer"
};
const _hoisted_6 = { class: "layui-transfer-active" };
const _hoisted_7 = { class: "layui-transfer-button-group" };
const _hoisted_8 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-next" }, null, -1);
const _hoisted_9 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-prev" }, null, -1);
const _hoisted_10 = { class: "layui-transfer-header" };
const _hoisted_11 = {
  key: 0,
  class: "layui-transfer-search"
};
const _hoisted_12 = { class: "layui-transfer-data" };
const _hoisted_13 = {
  key: 1,
  class: "layui-transfer-footer"
};
const __default__ = {
  name: "LayTransfer"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    id: { default: "id" },
    title: { default: () => ["\u4E3B\u5217\u8868", "\u526F\u5217\u8868"] },
    width: { default: "200px" },
    height: { default: "360px" },
    showSearch: { default: false },
    dataSource: { default: () => [] },
    modelValue: { default: () => [] }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const slots = useSlots();
    const leftDataSource = ref([]);
    const rightDataSource = ref([]);
    const _leftDataSource = ref([]);
    const _rightDataSource = ref([]);
    const leftSelectedKeys = ref([]);
    const rightSelectedKeys = ref([]);
    const allLeftChecked = ref(false);
    const allRightChecked = ref(false);
    const hasLeftChecked = ref(false);
    const hasRightChecked = ref(false);
    const allLeftChange = (isChecked) => {
      if (isChecked) {
        const datasources = leftDataSource.value.filter((item) => {
          return !item.disabled;
        });
        const ids = datasources.map((item) => {
          return item[props.id];
        });
        leftSelectedKeys.value = [...ids];
      } else {
        leftSelectedKeys.value = [];
      }
    };
    watch(
      () => [props.modelValue, props.dataSource],
      () => {
        let targetDataSource = [];
        props.dataSource.forEach((ds) => {
          if (props.modelValue.includes(ds[props.id])) {
            targetDataSource.push(ds);
          }
        });
        leftDataSource.value = props.dataSource.filter(
          (item) => !props.modelValue.includes(item[props.id])
        );
        _leftDataSource.value = props.dataSource.filter(
          (item) => !props.modelValue.includes(item[props.id])
        );
        rightDataSource.value = [...targetDataSource];
        _rightDataSource.value = [...targetDataSource];
      },
      { immediate: true }
    );
    watch(
      leftSelectedKeys,
      () => {
        if (leftDataSource.value.length === leftSelectedKeys.value.length && leftDataSource.value.length != 0) {
          allLeftChecked.value = true;
        } else {
          allLeftChecked.value = false;
        }
        if (leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0) {
          hasLeftChecked.value = true;
        } else {
          hasLeftChecked.value = false;
        }
      },
      { deep: true }
    );
    const allRightChange = (checked) => {
      if (checked) {
        const datasources = rightDataSource.value.filter((item) => {
          return !item.disabled;
        });
        const ids = datasources.map((item) => {
          return item[props.id];
        });
        rightSelectedKeys.value = [...ids];
      } else {
        rightSelectedKeys.value = [];
      }
    };
    watch(
      rightSelectedKeys,
      () => {
        if (rightDataSource.value.length === rightSelectedKeys.value.length && rightDataSource.value.length > 0) {
          allRightChecked.value = true;
        } else {
          allRightChecked.value = false;
        }
        if (rightSelectedKeys.value.length > 0 && rightDataSource.value.length != 0) {
          hasRightChecked.value = true;
        } else {
          hasRightChecked.value = false;
        }
      },
      { deep: true }
    );
    const add = () => {
      if (leftSelectedKeys.value.length === 0) {
        return;
      }
      let targetKeys = [];
      leftDataSource.value.forEach((item) => {
        if (leftSelectedKeys.value.indexOf(item[props.id]) != -1) {
          targetKeys.push(item[props.id]);
        }
      });
      rightDataSource.value.forEach((item) => {
        targetKeys.push(item[props.id]);
      });
      emits("change", targetKeys);
      emits("update:modelValue", targetKeys);
      leftSelectedKeys.value = [];
    };
    const remove = () => {
      if (rightSelectedKeys.value.length === 0) {
        return;
      }
      let targetKeys = [];
      rightDataSource.value.forEach((item) => {
        if (rightSelectedKeys.value.indexOf(item[props.id]) == -1) {
          targetKeys.push(item[props.id]);
        }
      });
      emits("change", targetKeys);
      emits("update:modelValue", targetKeys);
      rightSelectedKeys.value = [];
    };
    const searchLeft = (e) => {
      if (e === "") {
        leftDataSource.value = _leftDataSource.value;
      }
      leftDataSource.value = _leftDataSource.value.filter((item) => {
        if (item.title.indexOf(e) != -1) {
          return item;
        }
      });
    };
    const searchRight = (e) => {
      if (e === "") {
        rightDataSource.value = _rightDataSource.value;
      }
      rightDataSource.value = _rightDataSource.value.filter((item) => {
        if (item.title.indexOf(e) != -1) {
          return item;
        }
      });
    };
    const boxStyle = computed(() => {
      return {
        width: props.width,
        height: props.height
      };
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("div", {
            class: "layui-transfer-box",
            style: normalizeStyle(unref(boxStyle))
          }, [
            createElementVNode("div", _hoisted_2, [
              createVNode(_sfc_main$1, {
                modelValue: hasLeftChecked.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hasLeftChecked.value = $event),
                "is-indeterminate": !allLeftChecked.value,
                skin: "primary",
                value: "all",
                onChange: allLeftChange
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(__props.title[0]), 1)
                ]),
                _: 1
              }, 8, ["modelValue", "is-indeterminate"])
            ]),
            __props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_3, [
              createVNode(_sfc_main$2, {
                "prefix-icon": "layui-icon-search",
                onInput: searchLeft,
                placeholder: "\u5173\u952E\u8BCD\u641C\u7D22"
              })
            ])) : createCommentVNode("", true),
            createElementVNode("ul", _hoisted_4, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(leftDataSource.value, (dataSource) => {
                return openBlock(), createElementBlock("li", { key: dataSource }, [
                  createVNode(_sfc_main$1, {
                    modelValue: leftSelectedKeys.value,
                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => leftSelectedKeys.value = $event),
                    skin: "primary",
                    disabled: dataSource.disabled,
                    value: dataSource[__props.id]
                  }, {
                    default: withCtx(() => [
                      unref(slots).item ? renderSlot(_ctx.$slots, "item", {
                        key: 0,
                        data: dataSource
                      }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                        createTextVNode(toDisplayString(dataSource.title), 1)
                      ], 64))
                    ]),
                    _: 2
                  }, 1032, ["modelValue", "disabled", "value"])
                ]);
              }), 128))
            ]),
            unref(slots).leftFooter ? (openBlock(), createElementBlock("div", _hoisted_5, [
              renderSlot(_ctx.$slots, "leftFooter")
            ])) : createCommentVNode("", true)
          ], 4),
          createElementVNode("div", _hoisted_6, [
            createElementVNode("div", _hoisted_7, [
              createVNode(_sfc_main$3, {
                type: "primary",
                disabled: leftSelectedKeys.value.length == 0,
                onClick: add
              }, {
                default: withCtx(() => [
                  _hoisted_8
                ]),
                _: 1
              }, 8, ["disabled"]),
              createVNode(_sfc_main$3, {
                type: "primary",
                disabled: rightSelectedKeys.value.length == 0,
                onClick: remove
              }, {
                default: withCtx(() => [
                  _hoisted_9
                ]),
                _: 1
              }, 8, ["disabled"])
            ])
          ]),
          createElementVNode("div", {
            class: "layui-transfer-box",
            style: normalizeStyle(unref(boxStyle))
          }, [
            createElementVNode("div", _hoisted_10, [
              createVNode(_sfc_main$1, {
                modelValue: hasRightChecked.value,
                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hasRightChecked.value = $event),
                "is-indeterminate": !allRightChecked.value,
                skin: "primary",
                value: "all",
                onChange: allRightChange
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(__props.title[1]), 1)
                ]),
                _: 1
              }, 8, ["modelValue", "is-indeterminate"])
            ]),
            __props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_11, [
              createVNode(_sfc_main$2, {
                "prefix-icon": "layui-icon-search",
                onInput: searchRight,
                placeholder: "\u5173\u952E\u8BCD\u641C\u7D22"
              })
            ])) : createCommentVNode("", true),
            createElementVNode("ul", _hoisted_12, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(rightDataSource.value, (dataSource) => {
                return openBlock(), createElementBlock("li", { key: dataSource }, [
                  createVNode(_sfc_main$1, {
                    skin: "primary",
                    modelValue: rightSelectedKeys.value,
                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rightSelectedKeys.value = $event),
                    disabled: dataSource.disabled,
                    value: dataSource[__props.id]
                  }, {
                    default: withCtx(() => [
                      unref(slots).item ? renderSlot(_ctx.$slots, "item", {
                        key: 0,
                        data: dataSource
                      }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                        createTextVNode(toDisplayString(dataSource.title), 1)
                      ], 64))
                    ]),
                    _: 2
                  }, 1032, ["modelValue", "disabled", "value"])
                ]);
              }), 128))
            ]),
            unref(slots).rightFooter ? (openBlock(), createElementBlock("div", _hoisted_13, [
              renderSlot(_ctx.$slots, "rightFooter")
            ])) : createCommentVNode("", true)
          ], 4)
        ])
      ]);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };