<template>
    <!--https://youzan.github.io/vant/#/zh-CN/search-->
    <div class="search-bar-box-fixed-top" :class="{'search-bar-box':fixed===false}">
        <van-search
                v-model="searchValue"
                show-action
                :placeholder="'请输入搜索'+labelText"
                @search="onSearch"
        >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>
        <div @click="showHighSearch = true" v-if="highSearch" class="high-search-text">高级查询</div>
        <div class="high-search-cont" v-if="showHighSearch">
            <van-nav-bar title="高级搜索"
                         :left-arrow="true"
                         @click-left="showHighSearch=false"></van-nav-bar>
            <slot name="highSearch"></slot>
            <div class="btn-box">
                <van-button block type="info" @click="onHighSearch">搜索</van-button>
                <van-button block type="default" @click="onReset" style="margin-top: 10px">清空</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchBar",
        props: {
            label: String,
            //是否展示高级查询按钮
            highSearch: {type: Boolean, default: false},
            fixed: {type: Boolean, default: true}
        },
        data() {
            return {
                showHighSearch: false,
                searchValue: '',
            }
        },
        computed: {
            labelText: {
                get() {
                    return this.label ? this.label : '关键字'
                },
            }
        },
        watch: {
            showHighSearch: function (val) {
                let that = this
                mui.init({
                    beforeback: function () {
                        if (val) {
                            that._hideHighSearch()
                            return false;
                        } else {
                            return true
                        }
                    }
                });
            }
        },
        methods: {
            onSearch() {
                this.$emit('search', this.searchValue)
            },
            onHighSearch() {
                this.searchValue = ''
                this.$emit('high-search')
            },
            _hideHighSearch() {
                this.showHighSearch = false
            },
            onReset() {
                this.$emit('clear-high')
            }
        }
    }
</script>

<style scoped>

</style>
