<script>
import { createComponentName, componentMixin } from '../_utils/component';
import gdButton from '../Button';

export default {
    name: createComponentName('filter-list'),
    components: {
        gdButton,
    },
    mixins: [componentMixin],

    props: {
        visiableAllBtn: {
            type: Boolean,
            default: true,
        },

        parentIndex: {
            type: Number,
            default: 0,
        },

        selectId: {
            type: [String, Number, null],
            default: null,
        },
        selected: {
            type: Function,
            default() {},
        },
        info: {
            type: Object,
            default: () => ({ name: 'test', list: [] }),
        },
    },

    methods: {
        isSelected(id) {
            return this.selectId === id ? 'primary' : null;
        },

        renderAllBtn() {
            if (!this.visiableAllBtn) return null;

            return (
                <li>
                    <gd-button
                        type={this.isSelected(null)}
                        onClick={() => {
                            this.selected(this.info.name, null, 0);
                        }}
                        rect>全部</gd-button>
                </li>
            );
        },
    },

    render() {
        return (
            <div class={this.bem()}>
                <div>{this.info.name}</div>
                <ul>
                    {this.renderAllBtn()}
                    {
                        this.info.lists.map((item, index) => {
                            return (
                                <li key={index}>
                                    <gd-button
                                        type={this.isSelected(item.id)}
                                        onClick={() => {
                                            this.selected(this.info.name, item.id, index, this.parentIndex);
                                        }}
                                        rect>{item.name}</gd-button>
                                </li>
                            );
                        })
                    }
                </ul>
            </div>
        );
    },
};

</script>

<style lang="less">
@import '../_styles/base.less';
@c: ~'@{prefix}-filter-list';

.@{c} {
    display: flex;

    &  > div {
        width: 70px;

        font-family: PingFang SC,Microsoft YaHei;
        font-weight: bolder;
        line-height: 34px;
    }

    & > ul {
        display: flex;
        flex: 1;
        margin: 0;
        padding: 0;

        li {
            list-style: none;
            &:not(:last-child) {
                margin:0 8px 16px 0;
            }
        }
    }
}

</style>
