<template>
    <view class="pickertype">
        <view @click="show=true" class="justify-between group_8">
            <view class="flex-row group_9">
                <text>{{typeName?typeName:"请选择"}}</text>
                <u-icon name="arrow-down" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
            </view>
        </view>
        <u-picker @confirm="getType" @cancel="getcancel" :show="show" :columns="columns"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                typeName: '',
                typeId: '',
            }
        },
        props: {
            columns: {
                type: Array,
                default () {
                    return [
                        ['保密', '男', '女']
                    ];
                }
            }
        },
        methods: {
            getType(e) {
                console.log(e)
                this.typeId = e.indexs[0]
                this.typeName = e.value[0]
                this.show = false
            },
            getcancel() {
                this.show = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pickertype {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        flex: 1;
        width: 100%;

        .group_8 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;

            text {
                margin-right: 10rpx;
            }
        }

    }
</style>