import { VantComponent } from '../common/component';
var FieldName;
(function (FieldName) {
    FieldName["TEXT"] = "text";
    FieldName["VALUE"] = "value";
    FieldName["CHILDREN"] = "children";
})(FieldName || (FieldName = {}));
const defaultFieldNames = {
    text: FieldName.TEXT,
    value: FieldName.VALUE,
    children: FieldName.CHILDREN,
};
VantComponent({
    props: {
        title: String,
        value: {
            type: String,
        },
        placeholder: {
            type: String,
            value: '请选择',
        },
        activeColor: {
            type: String,
            value: '#1989fa',
        },
        options: {
            type: Array,
            value: [],
        },
        swipeable: {
            type: Boolean,
            value: false,
        },
        closeable: {
            type: Boolean,
            value: true,
        },
        showHeader: {
            type: Boolean,
            value: true,
        },
        closeIcon: {
            type: String,
            value: 'cross',
        },
        fieldNames: {
            type: Object,
            value: defaultFieldNames,
            observer: 'updateFieldNames',
        },
        useTitleSlot: Boolean,
    },
    data: {
        tabs: [],
        activeTab: 0,
        textKey: FieldName.TEXT,
        valueKey: FieldName.VALUE,
        childrenKey: FieldName.CHILDREN,
        innerValue: '',
    },
    watch: {
        options() {
            this.updateTabs();
        },
        value(newVal) {
            this.updateValue(newVal);
        },
    },
    created() {
        this.updateTabs();
    },
    methods: {
        updateValue(val) {
            if (val !== undefined) {
                const values = this.data.tabs.map((tab) => tab.selected && tab.selected[this.data.valueKey]);
                if (values.indexOf(val) > -1) {
                    return;
                }
            }
            this.innerValue = val;
            this.updateTabs();
        },
        updateFieldNames() {
            const { text = 'text', value = 'value', children = 'children', } = this.data.fieldNames || defaultFieldNames;
            this.setData({
                textKey: text,
                valueKey: value,
                childrenKey: children,
            });
        },
        getSelectedOptionsByValue(options, value) {
            for (let i = 0; i < options.length; i++) {
                const option = options[i];
                if (option[this.data.valueKey] === value) {
                    return [option];
                }
                if (option[this.data.childrenKey]) {
                    const selectedOptions = this.getSelectedOptionsByValue(option[this.data.childrenKey], value);
                    if (selectedOptions) {
                        return [option, ...selectedOptions];
                    }
                }
            }
        },
        updateTabs() {
            const { options } = this.data;
            const { innerValue } = this;
            if (!options.length) {
                return;
            }
            if (innerValue !== undefined) {
                const selectedOptions = this.getSelectedOptionsByValue(options, innerValue);
                if (selectedOptions) {
                    let optionsCursor = options;
                    const tabs = selectedOptions.map((option) => {
                        const tab = {
                            options: optionsCursor,
                            selected: option,
                        };
                        const next = optionsCursor.find((item) => item[this.data.valueKey] === option[this.data.valueKey]);
                        if (next) {
                            optionsCursor = next[this.data.childrenKey];
                        }
                        return tab;
                    });
                    if (optionsCursor) {
                        tabs.push({
                            options: optionsCursor,
                            selected: null,
                        });
                    }
                    this.setData({
                        tabs,
                    });
                    wx.nextTick(() => {
                        this.setData({
                            activeTab: tabs.length - 1,
                        });
                    });
                    return;
                }
            }
            this.setData({
                tabs: [
                    {
                        options,
                        selected: null,
                    },
                ],
                activeTab: 0,
            });
        },
        onClose() {
            this.$emit('close');
        },
        onClickTab(e) {
            const { index: tabIndex, title } = e.detail;
            this.$emit('click-tab', { title, tabIndex });
            this.setData({
                activeTab: tabIndex,
            });
        },
        // 选中
        onSelect(e) {
            const { option, tabIndex } = e.currentTarget.dataset;
            if (option && option.disabled) {
                return;
            }
            const { valueKey, childrenKey } = this.data;
            let { tabs } = this.data;
            tabs[tabIndex].selected = option;
            if (tabs.length > tabIndex + 1) {
                tabs = tabs.slice(0, tabIndex + 1);
            }
            if (option[childrenKey]) {
                const nextTab = {
                    options: option[childrenKey],
                    selected: null,
                };
                if (tabs[tabIndex + 1]) {
                    tabs[tabIndex + 1] = nextTab;
                }
                else {
                    tabs.push(nextTab);
                }
                wx.nextTick(() => {
                    this.setData({
                        activeTab: tabIndex + 1,
                    });
                });
            }
            this.setData({
                tabs,
            });
            const selectedOptions = tabs.map((tab) => tab.selected).filter(Boolean);
            const value = option[valueKey];
            const params = {
                value,
                tabIndex,
                selectedOptions,
            };
            this.innerValue = value;
            this.$emit('change', params);
            if (!option[childrenKey]) {
                this.$emit('finish', params);
            }
        },
    },
});