<template>
    <view>
        <!-- 搜索 -->
		<u-sticky>
			<view class="header ios-top">
				<view class="search">
					<view class="search-nav">
						<u-search
							v-model="keyword"
							placeholder="请输入食物名称"
							focus
							:clearabled="true"
							:showAction="false"
							@change="change"
							@search="search"
							@clear="clear"
							color="#000000"
							bgColor="#F3F6FB"
							searchIconColor="#34CE98"
						/>
					</view>
					<view class="search-cancel" @click="$Router.back()">取消</view>
				</view>
			</view>
		</u-sticky>
        
        <view class="recommend" v-if="listArr == ''">
            <view class="recommend-title">
                大家都在搜
            </view>
            <view class="recommend-list">
                <view class="label" v-for="(item, index) in recommendArr" :key="index" @click="$Router.push({ name: 'rankingDetails', params: {id: item.food_id, title: item.name }})" >
                    {{ item.name }}
                </view>
            </view>
        </view>
        
        <view class="recommend" v-if="listArr != ''">
            <view class="recommend-title">
                搜索结果
            </view>
            <block v-if="listArr.length > 0">
                <oct-menu
                    :lists="listArr"
                    :btnStyle="{'margin-top': '30rpx'}"
                    isType="rank"
                    @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
                />
                <block v-if="page.total_page > 1">
                    <u-loadmore :status="status" />
                </block>
            </block>
            <u-empty
                v-else
                mode="search"
            />
        </view>
    </view>
</template>

<script>
    import { search } from '@/apis/interfaces/menu'
    import { foods } from '@/apis/interfaces/ranking'
    export default {
        data() {
            return {
                keyword     : '',
                listArr     : [],
                recommendArr: [],
                status      : 'loadmore',
                page        : ''
            };
        },
        mounted() {
            // 获取首页
            this.getSearch()
        },
        methods: {
            // 引导图片
            getSearch(){
            	search().then(res => {
                    this.recommendArr = res
            	})
            },
            
            // 分类-食物
            getRank(val, pages){
            	foods({
                    name: val,
                    page: pages
                }).then(res => {
                    if(res.page.current == 1){
                        this.listArr = []
                    }
                    this.listArr  = this.listArr.concat(res.data)
                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
                    this.page     = res.page
            	})
            },
            
            change(val) {
                this.keyword = val
                this.getRank(val)
            },
            
            // 搜索
            search() {},
            
            // 清除输入框
            clear() {}
        },
        
        // 下拉加载
        onReachBottom() {
            if(this.page.has_more){
                this.status = 'loading'
                let pages = this.page.current + 1
                // 获取列表
                this.getRank(this.keyword, pages)
                return
            }
            this.status = 'nomore'
        }
    };
</script>

<style lang="scss" scoped>
    // 搜索
	.header{
		background-color: white;
		.search {
			position: relative;
			padding: $padding/2 $padding;
		    box-sizing: border-box;
			.search-nav {
		        width: calc(100% - 100rpx);
				background: $window-color;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				color: $text-gray;
				font-size: $title-size-lg;
		        display: flex;
			}
		    .search-cancel {
		        color: $main-color;
		        position: absolute;
		        right: $padding;
		        top: $padding/2;
		        line-height: 80rpx;
		        width: 100rpx;
		        text-align: right;
		    }
		}
	}
    .recommend {
        padding: $padding;
        box-sizing: border-box;
        .recommend-title {
            font-weight: bold;
            margin-bottom: $margin;
        }
        .recommend-list {
            flex-wrap: wrap;
            display: flex;
            .label {
                display: inline-block;
                color: $text-color;
                background-color: #f3f3f3;
                border-radius: $radius * 2;
                padding: 0 $padding - 5;
                line-height: 54rpx;
                margin: $margin - 20;
                font-size: $title-size-sm;
            }
        }
    }
</style>
