/* Analyzed bindings: {
  "type": "setup-maybe-ref",
  "float": "setup-maybe-ref",
  "options": "props",
  "disabled": "setup-maybe-ref",
  "multiple": "setup-maybe-ref",
  "column": "props",
  "noColumn": "props",
  "showImage": "props",
  "showSubLabel": "props",
  "value": "props",
  "computed": "setup-const",
  "PropType": "setup-const",
  "ref": "setup-const",
  "toRefs": "setup-const",
  "watch": "setup-const",
  "Avatar": "setup-maybe-ref",
  "Row": "setup-maybe-ref",
  "Col": "setup-maybe-ref",
  "props": "setup-reactive-const",
  "emits": "setup-const",
  "activeKeys": "setup-ref",
  "itemOptions": "setup-maybe-ref",
  "getOptions": "setup-const",
  "handleSelect": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, createVNode as _createVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "j-card-title-warp" };
const _hoisted_3 = { class: "title" };
const _hoisted_4 = {
    key: 0,
    class: "sub-title"
};
const _hoisted_5 = {
    key: 0,
    class: "j-card-image"
};
const _hoisted_6 = ["onClick"];
const _hoisted_7 = { class: "j-card-title-warp" };
const _hoisted_8 = { class: "title" };
const _hoisted_9 = {
    key: 0,
    class: "sub-title"
};
const _hoisted_10 = {
    key: 0,
    class: "j-card-image"
};
import { computed, ref, toRefs, watch } from 'vue';
import { Avatar, Row, Col } from '../components';
const __sfc_main__ = /*#__PURE__*/ _defineComponent({
    props: {
        type: {
            type: String,
            default: 'horizontal',
        },
        float: {
            type: String,
            default: 'left',
        },
        options: {
            type: Array,
            default: () => [],
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        column: {
            type: Number,
            default: 3,
        },
        noColumn: {
            type: Boolean,
            default: false,
        },
        showImage: {
            type: Boolean,
            default: true,
        },
        showSubLabel: {
            type: Boolean,
            default: true,
        },
        value: {
            type: [String, Array],
            default: undefined,
        },
    },
    emits: ['update:value', 'change'],
    setup(__props, { emit: emits }) {
        const props = __props;
        const { multiple, type, disabled, float } = toRefs(props);
        const activeKeys = ref([]);
        const itemOptions = computed(() => props.options);
        const getOptions = (keys) => {
            return itemOptions.value.filter((item) => {
                return keys.includes(item.value);
            });
        };
        const handleSelect = (key, item) => {
            if (disabled.value || item.disabled)
                return;
            let cloneActiveKeys = new Set(activeKeys.value);
            const isActive = cloneActiveKeys.has(key);
            if (isActive) {
                cloneActiveKeys.delete(key);
            }
            else {
                // 添加
                multiple.value
                    ? cloneActiveKeys.add(key)
                    : (cloneActiveKeys = new Set([key]));
            }
            activeKeys.value = [...cloneActiveKeys.keys()];
            const options = multiple.value ? getOptions(activeKeys.value) : item;
            emits('update:value', activeKeys.value);
            emits('change', activeKeys.value, options);
        };
        watch(() => props.value, () => {
            activeKeys.value = Array.isArray(props.value)
                ? props.value
                : [props.value];
        }, { immediate: true });
        return (_ctx, _cache) => {
            return (_openBlock(), _createElementBlock("div", {
                class: _normalizeClass({ 'j-card-panel': true, 'no-column': __props.noColumn })
            }, [
                (!__props.noColumn)
                    ? (_openBlock(), _createBlock(_unref(Row), {
                        key: 0,
                        gutter: [16, 16]
                    }, {
                        default: _withCtx(() => [
                            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(itemOptions), (item) => {
                                return (_openBlock(), _createBlock(_unref(Col), {
                                    key: item.value,
                                    span: 24 / __props.column
                                }, {
                                    default: _withCtx(() => [
                                        _createElementVNode("div", {
                                            class: _normalizeClass({
                                                'j-card-item': true,
                                                active: activeKeys.value.includes(item.value),
                                                disabled: _unref(disabled) || item.disabled,
                                                horizontal: _unref(type) === 'horizontal',
                                                vertical: _unref(type) === 'vertical',
                                                right: _unref(float) === 'right',
                                                left: _unref(float) === 'left',
                                            }),
                                            onClick: () => handleSelect(item.value, item)
                                        }, [
                                            _createElementVNode("div", _hoisted_2, [
                                                _createElementVNode("div", _hoisted_3, [
                                                    _renderSlot(_ctx.$slots, "title", {
                                                        title: item.label,
                                                        option: item
                                                    }, () => [
                                                        _createTextVNode(_toDisplayString(item.label), 1 /* TEXT */)
                                                    ])
                                                ]),
                                                (item.subLabel && __props.showSubLabel)
                                                    ? (_openBlock(), _createElementBlock("div", _hoisted_4, [
                                                        _renderSlot(_ctx.$slots, "subLabel", {
                                                            subLabel: item.subLabel,
                                                            option: item
                                                        }, () => [
                                                            _createTextVNode(_toDisplayString(item.subLabel), 1 /* TEXT */)
                                                        ])
                                                    ]))
                                                    : _createCommentVNode("v-if", true)
                                            ]),
                                            (__props.showImage)
                                                ? (_openBlock(), _createElementBlock("div", _hoisted_5, [
                                                    _renderSlot(_ctx.$slots, "image", {
                                                        image: item.iconUrl,
                                                        option: item
                                                    }, () => [
                                                        _createVNode(_unref(Avatar), {
                                                            class: "icon box-shadow",
                                                            src: item.iconUrl
                                                        }, null, 8 /* PROPS */, ["src"])
                                                    ])
                                                ]))
                                                : _createCommentVNode("v-if", true)
                                        ], 10 /* CLASS, PROPS */, _hoisted_1)
                                    ]),
                                    _: 2 /* DYNAMIC */
                                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["span"]));
                            }), 128 /* KEYED_FRAGMENT */))
                        ]),
                        _: 3 /* FORWARDED */
                    }))
                    : (_openBlock(true), _createElementBlock(_Fragment, { key: 1 }, _renderList(_unref(itemOptions), (item) => {
                        return (_openBlock(), _createElementBlock("div", {
                            key: item.value,
                            class: _normalizeClass({
                                'j-card-item': true,
                                active: activeKeys.value.includes(item.value),
                                disabled: _unref(disabled) || item.disabled,
                                horizontal: _unref(type) === 'horizontal',
                                vertical: _unref(type) === 'vertical',
                                right: _unref(float) === 'right',
                                left: _unref(float) === 'left',
                            }),
                            onClick: () => handleSelect(item.value, item)
                        }, [
                            _createElementVNode("div", _hoisted_7, [
                                _createElementVNode("div", _hoisted_8, [
                                    _renderSlot(_ctx.$slots, "title", {
                                        title: item.label,
                                        option: item
                                    }, () => [
                                        _createTextVNode(_toDisplayString(item.label), 1 /* TEXT */)
                                    ])
                                ]),
                                (item.subLabel && __props.showSubLabel)
                                    ? (_openBlock(), _createElementBlock("div", _hoisted_9, [
                                        _renderSlot(_ctx.$slots, "subLabel", {
                                            subLabel: item.subLabel,
                                            option: item
                                        }, () => [
                                            _createTextVNode(_toDisplayString(item.subLabel), 1 /* TEXT */)
                                        ])
                                    ]))
                                    : _createCommentVNode("v-if", true)
                            ]),
                            (__props.showImage)
                                ? (_openBlock(), _createElementBlock("div", _hoisted_10, [
                                    _renderSlot(_ctx.$slots, "image", {
                                        image: item.iconUrl,
                                        option: item
                                    }, () => [
                                        _createVNode(_unref(Avatar), {
                                            class: "icon box-shadow",
                                            src: item.iconUrl
                                        }, null, 8 /* PROPS */, ["src"])
                                    ])
                                ]))
                                : _createCommentVNode("v-if", true)
                        ], 10 /* CLASS, PROPS */, _hoisted_6));
                    }), 128 /* KEYED_FRAGMENT */))
            ], 2 /* CLASS */));
        };
    }
});
export default __sfc_main__;