<template>
    <van-popup v-model="showPicker" position="bottom"
               :safe-area-inset-bottom="true"
               :close-on-popstate="true">
        <div style="height: 70vh;overflow: hidden;background: #f7f8fa">
            <search-bar ref="searchBar" :label="label" :fixed="false"
                        @search="_search"></search-bar>
            <div style="height:calc(100% - 55px);overflow:auto">
                <div class="result-item" v-for="item in resultList" :key="item"
                     @click="_tapResult(item)">
                    <div>{{item}}</div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script>
    import {foodClassifyInfo} from '../../../api'

    export default {
        name: "SelectClass",
        data() {
            return {
                key: '',
                resultList: [],
                label: '',
                level: '',
                pname: '',
                showPicker: false
            }
        },
        methods: {
            _open(level, pname) {
                this.showPicker = true
                this.level = level
                this.pname = pname
                this.key = ''
                this.label = level === 0 ? '大类' : level === 1 ? '亚类' : level === 2 ? '次亚类' : '细类'
                this.$nextTick(function () {
                    this.$refs.searchBar.searchValue = ''
                })
                this._getData()
            },
            //简单查询 清空高级查询条件 赋值简单查询数据
            _search(value) {
                this.key = value
                this._getData()
            },
            _searchParams() {
                let obj = {level: this.level}
                if (this.key) {
                    obj.name = this.key
                }
                if (this.pname) {
                    obj.pName = this.pname
                }
                return obj
            },
            _getData: async function () {
                let result = await foodClassifyInfo.categoryList(this._searchParams())
                this.resultList = result
            },
            _tapResult(item) {
                this.$emit('on-result-change', item, this.level)
                this.showPicker = false
            },
        }
    }
</script>

<style scoped>

</style>
