<template>
    <view class="head-bar">
        <picker class="hb-picker" :range="range" :range-key="rangeKey" @change="$emit('change', $event)">
            <view class="hp-frame">
                <input class="hf-ipt" type="text" disabled :value="value" :placeholder="placeholder">
                <image class="hf-icon" mode="aspectFit" src="/subpackage/verification/static/images/arrow_c9f.png"></image>
            </view>
        </picker>
        <image v-if="search" class="hb-icon" mode="aspectFit" src="/subpackage/verification/static/images/search.png" @click="$emit('click:search')"></image>
    </view>
</template>

<script>
export default {
    props: {
        value: { type: String, default: ''  },
        placeholder: { type: String, default: '' },
        range: { type: Array, default: [] },
        rangeKey: { type: String, default: '' },
        search: { type: Boolean, default: false }
    }
}
</script>

<style lang="scss">
    .head-bar{
        padding-left: 24upx;
        padding-right: 24upx;
        height: 144upx;
        background: #fff;
        @include ctf(space-between);
        .hb-picker{
            flex-grow: 1;
            .hp-frame{
                padding: 0 24upx;
                height: 92upx;
                background: #f2f2f7;
                @include ctf(space-between);
                .hf-ipt{
                    flex-grow: 1;
                    height: 100%;
                    @include flcw(28upx, 40upx, #333);
                }
                .hf-icon{
                    flex-shrink: 0;
                    width: 28upx;
                    height: 28upx;
                }
            }
        }
        .hb-icon{
            flex-shrink: 0;
            margin-right: 16upx;
            margin-left: 26upx;
            width: 40upx;
            height: 40upx;
        }
    }
</style>