<template>
    <view class="content">
        <view class="equityTop">
            <view class="equityTool">
                <view class="search">
                    <image class="search-img" src="/static/icons/purineSearch.png" mode="aspectFill"></image>
                    <input class="search-input" type="text" placeholder="食物嘌呤查询" @input="searchSitle" />
                </view>
            </view>
            <scroll-view scroll-x class="equityTab">
                <view class="item-box" :class="{active : categoryId == item.category_id}" v-for="(item, index) in sortArr" :key="index" @click="sortClick(item.category_id)">
                    {{ item.title }}
                </view>
            </scroll-view>
        </view>
        <view class="contentList">
            <view class="List" v-if="foodsArr.length > 0">
                <view class="List-label" @click="$Router.push({name: 'purineDetails', params: { id: item.food_id }})" v-for="(item, index) in foodsArr" :key="index">
                    <image class="List-img" :src="item.cover" mode="aspectFill"></image>
                    <view class="List-cont">
                        <view class="List-top">
                            <view class="nowrap List-top-name">
                                {{ item.name }}
                            </view>
                            <view class="List-top-tips">
                                {{ item.count.votes }}人投票
                            </view>
                        </view>
                        <view class="List-text">
                            {{ item.explain }}
                        </view>
                        <view class="List-levels">
                            嘌呤：{{ item.number }}mg/100g
                        </view>
                    </view>
                </view>
                <view class="pagesLoding" v-if="lodingStats">
                    <block v-if="page.has_more">
                        <image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
                    </block>
                    <block v-else>
                        没有更多了~
                    </block>
                </view>
            </view>
            <view class="pack-center pages-hint" v-else>
                <image src="/static/imgs/coupon_null.png"></image>
                <view>暂无数据</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { foodList } from '@/apis/interfaces/gout'
    export default {
    	data() {
    		return {
    			foodsArr    : [],   //实物列表
                sortArr     : [],   //分类
                categoryId  : '',
                title       : '',
                page          : {},     //分页信息
                lodingStats   : false   //加载状态
    		}
    	},
        onLoad() {
            // 获取食物数据
            this.lastInfo();
        },
    	methods: {
            // 食物数据
            lastInfo(page) {
            	foodList({
                    title: this.title,
                    category_id: this.categoryId,
                    page : page || ''
                }).then(res => {
                    let listArr = this.foodsArr,
                        newData = []
                        if(page == 1 || page == undefined) listArr = []
                        newData = listArr.concat(res.foods.data)
                    this.sortArr    = res.categories
                    this.categoryId = res.category.category_id
                    this.foodsArr   = newData
                    this.page       = res.foods.page
                    this.lodingStats= false
                    uni.stopPullDownRefresh()
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 选择分类
            sortClick(id) {
                this.categoryId = id
                // 获取食物数据
                this.lastInfo();
            },
            
            // 输入关键字
            searchSitle(name) {
                this.title = name.detail.value
                // 获取食物数据
                this.lastInfo();
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 商品列表数据
                this.lastInfo();
            },
        
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    // 商品列表数据
                    this.lastInfo(pageNumber);
                }
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
    }
    
    .equityTop {
        background-color: #FFFFFF;
        height: 220rpx;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 99;
        padding: 30rpx;
        box-sizing: border-box;
        .equityTool {
            position: relative;
            height: 68rpx;
            line-height: 68rpx;
            display: flex;
            .search {
                flex: 1;
                display: flex;
                border-radius:60rpx;
                background-color: #f8f8f8;
                margin-right: 40rpx;
                padding: 0 20rpx;
                box-sizing: border-box;
                .search-input {
                    height: 100%;
                    width: 100%;
                    font-size: 28rpx;
                }
                .search-img {
                    width: 40rpx;
                    height: 40rpx;
                    margin: 16rpx 15rpx 0;
                    vertical-align: middle;
                }
            }
            .moreBtn {
                display: flex;
                .moreBtn-img {
                    width: 54rpx;
                    height: 54rpx;
                    margin-top: 10rpx;
                    vertical-align: middle;
                }
            }
        }
        .equityTab {
            white-space:nowrap;
            margin-top: 20rpx;
            .item-box{
            	display: inline-block;
                height: 86rpx;
                line-height: 86rpx;
                margin-right: 40rpx;
                font-size: 30rpx;
                position: relative;
                &::after {
                    position: absolute;
                    content: '';
                    left: calc(50% - 20rpx);
                    bottom: 0;
                    background-color: #FFFFFF;
                    width: 40rpx;
                    height: 8rpx;
                    border-radius: 60rpx;
                }
                &.active::after {
                    background-color: #6e79ec;
                }
                &.active {
                    color: #6e79ec;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
    
    .contentList {
        margin-top: 220rpx;
        padding: 30rpx;
        width: 100%;
        box-sizing: border-box;
        .List {
            background-color: #FFFFFF;
            border-radius: 10rpx;
            box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
            .List-label {
                padding: 20rpx;
                box-sizing: border-box;
                position: relative;
                .List-img {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 10rpx;
                }
                .List-cont {
                    position: absolute;
                    width: 100%;
                    top: 0;
                    left: 0;
                    padding: 20rpx 20rpx 20rpx 180rpx;
                    box-sizing: border-box;
                    .List-top {
                        display: flex;
                        line-height: 40rpx;
                        .List-top-name {
                            flex: 1;
                            margin-right: 20rpx;
                            font-weight: 600;
                        }
                        .List-top-tips {
                            display: inline-block;
                            background-color: #f1f3ff;
                            color: #6d79ec;
                            font-size: 24rpx;
                            border-radius: 6rpx;
                            height: 40rpx;
                            padding: 0 10rpx;
                        }
                    }
                    .List-text {
                        font-size: 24rpx;
                        padding: 10rpx 0 20rpx;
                        color: #919191;
                    }
                    .List-levels {
                        font-size: 26rpx;
                        color: #54975e;
                    }
                }
            }
        }
    }
</style>
