'use strict';

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

var vue = require('vue');

const _hoisted_1 = { class: "fm-transfer-panel" };
const _hoisted_2 = { class: "fm-transfer-panel__header" };
const _hoisted_3 = { class: "fm-transfer-panel__body" };
const _hoisted_4 = { class: "fm-transfer-buttons__item" };
const _hoisted_5 = { class: "fm-transfer-buttons__item" };
const _hoisted_6 = { class: "fm-transfer-buttons__item" };
const _hoisted_7 = { class: "fm-transfer-buttons__item" };
const _hoisted_8 = { class: "fm-transfer-panel" };
const _hoisted_9 = { class: "fm-transfer-panel__header" };
const _hoisted_10 = { class: "fm-transfer-panel__body" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "FmTransfer"
  },
  __name: "index",
  props: {
    leftTitle: String,
    rightTitle: String,
    options: {
      type: Object,
      default: () => ({
        value: "id",
        label: "name",
        disabled: "disabled"
      })
    },
    leftData: { type: Array, default: () => [] },
    // 左边全部数据
    rightData: { type: Array, default: () => [] }
    // 右边全部数据
  },
  emits: ["left", "right", "allLeft", "allRight", "update:leftData", "update:rightData"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const state = vue.reactive({
      leftAllChecked: false,
      // 左边是否全选
      leftKeyword: "",
      // 左边搜索关键词
      leftChecked: [],
      // 左边选中数据
      rightAllChecked: false,
      // 右边是否全选
      rightKeyword: "",
      // 右边搜索关键词
      rightChecked: []
      // 右边选中数据
    });
    const leftFilterData = vue.computed(() => {
      let result = props.leftData.filter((e) => e[props.options.label].toLowerCase().includes(state.leftKeyword.toLowerCase()));
      if (state.leftChecked.length > 0) {
        for (let i = state.leftChecked.length - 1; i >= 0; i--) {
          const index = result.findIndex((e) => e[props.options.value] == state.leftChecked[i]);
          if (index == -1) state.leftChecked.splice(i, 1);
        }
      }
      return result;
    });
    const handleLeftAllChecked = (value) => {
      state.leftChecked = value ? leftFilterData.value.filter((e) => e[props.options.disabled] == false).map((e) => e[props.options.value]) : [];
    };
    const leftIndeterminate = vue.computed(() => {
      const checkedLength = state.leftChecked.length;
      const result = checkedLength > 0 && checkedLength < leftFilterData.value.filter((e) => e[props.options.disabled] == false).length;
      return result;
    });
    vue.watch(
      () => state.leftChecked,
      (val) => {
        state.leftAllChecked = val.length > 0 && val.length == leftFilterData.value.filter((e) => e[props.options.disabled] == false).length;
      }
    );
    const rightFilterData = vue.computed(() => {
      let result = props.rightData.filter((e) => e[props.options.label].toLowerCase().includes(state.rightKeyword.toLowerCase()));
      if (state.rightChecked.length > 0) {
        for (let i = state.rightChecked.length - 1; i >= 0; i--) {
          const index = result.findIndex((e) => e[props.options.value] == state.rightChecked[i]);
          if (index == -1) state.rightChecked.splice(i, 1);
        }
      }
      return result;
    });
    const handleRightAllChecked = (value) => {
      state.rightChecked = value ? rightFilterData.value.filter((e) => e[props.options.disabled] == false).map((e) => e[props.options.value]) : [];
    };
    const rightIndeterminate = vue.computed(() => {
      const checkedLength = state.rightChecked.length;
      const result = checkedLength > 0 && checkedLength < rightFilterData.value.filter((e) => e[props.options.disabled] == false).length;
      return result;
    });
    vue.watch(
      () => state.rightChecked,
      (val) => {
        state.rightAllChecked = val.length > 0 && val.length == rightFilterData.value.filter((e) => e[props.options.disabled] == false).length;
      }
    );
    const dbClickToRight = (item) => {
      if (item[props.options.value] && item[props.options.disabled] === false) {
        let adds = props.leftData.filter((e) => item[props.options.value] == e[props.options.value]);
        let cuts = props.leftData.filter((e) => item[props.options.value] != e[props.options.value]);
        emits("update:leftData", cuts);
        emits("update:rightData", props.rightData.concat(adds));
        emits("right");
        state.leftChecked = state.leftChecked.filter((e) => item[props.options.value] != e);
      }
    };
    const toRight = () => {
      if (state.leftChecked?.length > 0) {
        let adds = props.leftData.filter((e) => state.leftChecked.some((x) => x == e[props.options.value]));
        let cuts = props.leftData.filter((e) => state.leftChecked.every((x) => x != e[props.options.value]));
        emits("update:leftData", cuts);
        emits("update:rightData", props.rightData.concat(adds));
        emits("right");
        state.leftChecked = [];
      }
    };
    const allToRight = () => {
      if (leftFilterData.value?.length > 0) {
        let temp = leftFilterData.value.filter((e) => e[props.options.disabled] == false);
        let adds = props.leftData.filter((e) => temp.some((x) => x[props.options.value] == e[props.options.value]));
        let cuts = props.leftData.filter((e) => temp.every((x) => x[props.options.value] != e[props.options.value]));
        emits("update:leftData", cuts);
        emits("update:rightData", props.rightData.concat(adds));
        emits("allRight");
        state.leftChecked = [];
      }
    };
    const dbClickToLeft = (item) => {
      if (item[props.options.value] && item[props.options.disabled] === false) {
        let adds = props.rightData.filter((e) => item[props.options.value] == e[props.options.value]);
        let cuts = props.rightData.filter((e) => item[props.options.value] != e[props.options.value]);
        emits("update:leftData", props.leftData.concat(adds));
        emits("update:rightData", cuts);
        emits("left");
        state.rightChecked = state.rightChecked.filter((e) => item[props.options.value] != e);
      }
    };
    const toLeft = () => {
      if (state.rightChecked?.length > 0) {
        let adds = props.rightData.filter((e) => state.rightChecked.some((x) => x == e[props.options.value]));
        let cuts = props.rightData.filter((e) => state.rightChecked.every((x) => x != e[props.options.value]));
        emits("update:leftData", props.leftData.concat(adds));
        emits("update:rightData", cuts);
        emits("left");
        state.rightChecked = [];
      }
    };
    const allToLeft = () => {
      if (rightFilterData.value?.length > 0) {
        let temp = rightFilterData.value.filter((e) => e[props.options.disabled] == false);
        let adds = props.rightData.filter((e) => temp.some((x) => x[props.options.value] == e[props.options.value]));
        let cuts = props.rightData.filter((e) => temp.every((x) => x[props.options.value] != e[props.options.value]));
        emits("update:leftData", props.leftData.concat(adds));
        emits("update:rightData", cuts);
        emits("allLeft");
        state.rightChecked = [];
      }
    };
    return (_ctx, _cache) => {
      const _component_el_checkbox = vue.resolveComponent("el-checkbox");
      const _component_el_input = vue.resolveComponent("el-input");
      const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
      const _component_el_col = vue.resolveComponent("el-col");
      const _component_el_button = vue.resolveComponent("el-button");
      const _component_el_row = vue.resolveComponent("el-row");
      return vue.openBlock(), vue.createBlock(_component_el_row, { gutter: 10 }, {
        default: vue.withCtx(() => [
          vue.createVNode(_component_el_col, { span: 10 }, {
            default: vue.withCtx(() => [
              vue.createElementVNode("div", _hoisted_1, [
                vue.createElementVNode("p", _hoisted_2, [
                  vue.createVNode(_component_el_checkbox, {
                    modelValue: state.leftAllChecked,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.leftAllChecked = $event),
                    indeterminate: leftIndeterminate.value,
                    "validate-event": false,
                    onChange: handleLeftAllChecked
                  }, {
                    default: vue.withCtx(() => [
                      vue.createTextVNode(
                        vue.toDisplayString(props.leftTitle),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue", "indeterminate"]),
                  vue.createElementVNode(
                    "span",
                    null,
                    vue.toDisplayString(state.leftChecked.length) + "/" + vue.toDisplayString(props.leftData.length),
                    1
                    /* TEXT */
                  )
                ]),
                vue.createElementVNode("div", _hoisted_3, [
                  vue.createVNode(_component_el_input, {
                    class: "transfer-panel__filter",
                    modelValue: state.leftKeyword,
                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.leftKeyword = $event),
                    placeholder: "\u641C\u7D22",
                    "prefix-icon": "ele-Search",
                    clearable: "",
                    "validate-event": false
                  }, null, 8, ["modelValue"]),
                  vue.withDirectives(vue.createVNode(_component_el_checkbox_group, {
                    modelValue: state.leftChecked,
                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => state.leftChecked = $event),
                    "validate-event": false,
                    class: "fm-transfer-panel__list"
                  }, {
                    default: vue.withCtx(() => [
                      (vue.openBlock(true), vue.createElementBlock(
                        vue.Fragment,
                        null,
                        vue.renderList(leftFilterData.value, (item, index) => {
                          return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
                            key: index,
                            value: item[props.options.value],
                            label: item[props.options.label],
                            disabled: item[props.options.disabled],
                            "validate-event": false,
                            class: "fm-transfer-panel__item",
                            onDblclick: ($event) => dbClickToRight(item)
                          }, null, 8, ["value", "label", "disabled", "onDblclick"]);
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      ))
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue"]), [
                    [vue.vShow, true]
                  ])
                ])
              ])
            ]),
            _: 1
            /* STABLE */
          }),
          vue.createVNode(_component_el_col, {
            span: 4,
            class: "fm-transfer-buttons"
          }, {
            default: vue.withCtx(() => [
              vue.createElementVNode("div", _hoisted_4, [
                vue.createVNode(_component_el_button, {
                  type: "primary",
                  style: {},
                  icon: "ele-ArrowRight",
                  onClick: toRight
                })
              ]),
              vue.createElementVNode("div", _hoisted_5, [
                vue.createVNode(_component_el_button, {
                  type: "primary",
                  style: {},
                  icon: "ele-ArrowLeft",
                  onClick: toLeft
                })
              ]),
              vue.createElementVNode("div", _hoisted_6, [
                vue.createVNode(_component_el_button, {
                  type: "primary",
                  style: {},
                  icon: "ele-DArrowRight",
                  onClick: allToRight
                })
              ]),
              vue.createElementVNode("div", _hoisted_7, [
                vue.createVNode(_component_el_button, {
                  type: "primary",
                  style: {},
                  icon: "ele-DArrowLeft",
                  onClick: allToLeft
                })
              ])
            ]),
            _: 1
            /* STABLE */
          }),
          vue.createVNode(_component_el_col, { span: 10 }, {
            default: vue.withCtx(() => [
              vue.createElementVNode("div", _hoisted_8, [
                vue.createElementVNode("p", _hoisted_9, [
                  vue.createVNode(_component_el_checkbox, {
                    modelValue: state.rightAllChecked,
                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => state.rightAllChecked = $event),
                    indeterminate: rightIndeterminate.value,
                    "validate-event": false,
                    onChange: handleRightAllChecked
                  }, {
                    default: vue.withCtx(() => [
                      vue.createTextVNode(
                        vue.toDisplayString(props.rightTitle),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue", "indeterminate"]),
                  vue.createElementVNode(
                    "span",
                    null,
                    vue.toDisplayString(state.rightChecked.length) + "/" + vue.toDisplayString(props.rightData.length),
                    1
                    /* TEXT */
                  )
                ]),
                vue.createElementVNode("div", _hoisted_10, [
                  vue.createVNode(_component_el_input, {
                    class: "transfer-panel__filter",
                    modelValue: state.rightKeyword,
                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => state.rightKeyword = $event),
                    placeholder: "\u641C\u7D22",
                    "prefix-icon": "ele-Search",
                    clearable: "",
                    "validate-event": false
                  }, null, 8, ["modelValue"]),
                  vue.withDirectives(vue.createVNode(_component_el_checkbox_group, {
                    modelValue: state.rightChecked,
                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => state.rightChecked = $event),
                    "validate-event": false,
                    class: "fm-transfer-panel__list"
                  }, {
                    default: vue.withCtx(() => [
                      (vue.openBlock(true), vue.createElementBlock(
                        vue.Fragment,
                        null,
                        vue.renderList(rightFilterData.value, (item, index) => {
                          return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
                            key: index,
                            value: item[props.options.value],
                            label: item[props.options.label],
                            disabled: item[props.options.disabled],
                            "validate-event": false,
                            class: "fm-transfer-panel__item",
                            onDblclick: ($event) => dbClickToLeft(item)
                          }, null, 8, ["value", "label", "disabled", "onDblclick"]);
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      ))
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue"]), [
                    [vue.vShow, true]
                  ])
                ])
              ])
            ]),
            _: 1
            /* STABLE */
          })
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

exports.default = _sfc_main;
