<template>
    <div class="mix-popup-picker">
        <div class="van-picker">
            <div class="van-hairline--top-bottom van-picker__toolbar" v-if="showToolbar">
                <slot name="header" >
                    <div class="van-picker__cancel" @click="onClick('cancel')">{{ cancelButtonText }}</div>
                    <div class="van-picker__title van-ellipsis" v-if="title">{{title}}</div>
                    <div class="van-picker__confirm" @click="onClick('confirm')">{{ confirmButtonText }}</div>
                </slot>
            </div><!---->
            <div class="van-picker__columns" :style="columnsStyle">
                <div class="van-picker-column" :style="columnsStyle">
                    <slot name="content"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BgoPopupPicker",
        props: {
            title: String,
            showToolbar: {
                type: Boolean,
                default: true
            },
            confirmButtonText: {
                type: String,
                default: '确认'
            },
            cancelButtonText: {
                type: String,
                default: '取消'
            },
            visibleItemCount: {
                type: Number,
                default: 5
            },
            itemHeight: {
                type: Number,
                default: 44
            }
        },
        computed: {
            columnsStyle() {
                return {
                    maxHeight: this.itemHeight * this.visibleItemCount + 'px'
                };
            }
        },
        methods: {
            onClick(type, event) {
                this.$emit('click', type, event);
            }
        }
    }
</script>

<style lang="scss">
    .mix-popup-picker {
        .van-picker-column {
            text-align: left;
            overflow: auto;
        }
    }
</style>
