<template>
    <view class="waper">
    	<u-navbar :autoBack="true" :bgColor="scrollTop > 20 ? '#fff' : 'transparent'" :left-icon-color="scrollTop > 20 ? '#303133' : '#FFF'">
    		<view slot='center' class="navbar_title">{{scrollTop > 20 ? '文创特产' : ''}}</view>
    	</u-navbar>
        <view class="banner">
            <swiper :autoplay="true" :interval="5000" :duration="1000">
                <swiper-item>
                    <image src="https://common/shop_bg.png" mode=""></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="waper_box">
            <view class="search">
                <view class="icon">
                    <u-icon name="search" color="#999" size="40rpx"></u-icon>
                </view>
                <input type="text" placeholder="搜索商品/关键词" v-model="title" placeholder-class="placeholder" @input="setTitle" />
            </view>
            <view class="hot" v-if="recommendList.length > 0">
                <view class="home_title">
                    <view class="left">
                        <view>口碑榜</view>
                    </view>
                    <view class="right">
                        <u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="32rpx" top="2rpx"></u-icon>
                    </view>
                </view>
                <view class="hot_waper">
                    <scroll-view scroll-x="true">
                        <navigator hover-class="none" class="list" v-for="(i, index) in recommendList" :key="index" :url="'/pages/shop/detail?id=' + i.id">
                            <image :src="$utils.setImgUrl(i.image)" mode=""></image>
                            <view class="title">{{i.title}}</view>
                            <view class="money">
                                <text>￥</text>
                                <text>{{i.price}}</text>
                            </view>
                        </navigator>
                    </scroll-view>
                </view>
            </view>
            <view class="list_box">
                <scroll-view scroll-x="true">
                    <view class="menu">
						<view v-for="(i, index) in menu" :key="index" :class="{active: menuIndex === i.id}" @click="tabMenu(i)">
							{{i.name}}
						</view>
                    </view>
                </scroll-view>
                <view class="list_waper">
                    <navigator class="list" v-for="(i, index) in list" :key="index" hover-class="none" :url="'/pages/shop/detail?id=' + i.id">
                        <view class="img">
                            <image :src="$utils.setImgUrl(i.image)" mode=""></image>
                        </view>
                        <view class="info">
                            <view>{{i.title}}</view>
                            <view>
                                <text>{{i.price}}</text>
                                <text>已售{{(i.showSales ? i.showSales : 0) + i.sales}}</text>
                            </view>
                        </view>
                    </navigator>
                    <view class="null" v-if="list.length == 0">~ 暂无数据 ~</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            scrollTop: 0,
            menu: [],
            menuIndex: '',
            list: [],
            total: 0,
            title: '',
            categoryList: [],
            recommendList: [],
            page: 1,
            loding: false
        }
    },
    onPageScroll (e) {
        this.scrollTop = e.scrollTop;
    },
    onReachBottom () {
        if (this.loding) {
            return false;
        }
        if (this.list.length >= this.total) {
            return false;
        }
        this.page ++;
        this.getList();
    },
    async onLoad () {
        let config = uni.getStorageSync('configData');;
        let category = await this.$shop.getCategoryList({ pid: 0, scenicId: this.$scenicId, storeId: 1 });
        let arr = [{ name: '全部商品', id: '' }];
        category.data.forEach((item) => {
            arr.push({ name: item.name, id: item.id })
        })
        this.menu = arr;
        let shop = await this.$shop.getGoodsList({ pageNum: 1, pageSize: 3, flag: 'recommend' });
        this.recommendList = shop.rows;
        this.getList();
    },
    methods: {
        setTitle () {
            this.page = 1;
            this.getList();
        },
        async getList () {
            this.loding = true;
            let data = { pageNum: this.page, pageSize: 10 };
            if (this.menuIndex) data.categoryIds = this.menuIndex;
            if (this.title) data.title = this.title;
            let info = await this.$shop.getGoodsList(data);
            this.total = info.total;
            if (this.page == 1) this.list = [];
            this.list = this.list.concat(info.rows);
            this.loding = false;
        },
        tabMenu (info) {
            this.menuIndex = info.id;
            this.page = 1;
            this.getList();
        }
    }
}
</script>

<style lang="scss">
.banner{
    width: 100%; height: 588rpx;
    swiper{ width: 100%; height: 100%; }
}
.waper_box{
    width: 100%; background: #FFFFFF; border-radius: 30rpx 30rpx 0 0; box-sizing: border-box; padding: 70rpx 24rpx; margin-top: -98rpx; position: relative; z-index: 5;
    .search{
        width: 100%; height: 80rpx; border-radius: 40rpx; box-sizing: border-box; padding-left: 82rpx; padding-right: 32rpx; position: relative; background: #F6F6F6; margin-bottom: 40rpx;
        .icon{ position: absolute; left: 32rpx; top: 50%; transform: translateY(-50%); }
        input{ width: 100%; height: 100%; font-size: 28rpx; color: rgba(0,0,0,0.25); }
        .placeholder{ color: #999; }
    }
    .hot{
        width: 100%;
        .home_title{
            width: 100%; display: flex; justify-content: space-between; align-items: center; height: 50rpx;
            .left{
                view{ line-height: 53rpx; color: rgba(0,0,0,0.85); font-size: 36rpx; font-weight: 500; position: relative; z-index: 3; }
            }
            .right{ display: flex; align-items: center; }
        }
        .hot_waper{
            width: 100%; margin-top: 20rpx; box-sizing: border-box;
            scroll-view{ width: 100%; white-space: nowrap; }
            .list{
                width: 220rpx; height: 100%; display: inline-block; vertical-align: top; margin-right: 21rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,0.05); border-radius: 10rpx; padding-bottom: 14rpx; margin-bottom: 32rpx;
                &:last-child{ margin-right: 0; }
                image{ width: 220rpx; height: 220rpx; vertical-align: top; border-radius: 10rpx 10rpx 0 0; }
                .title{ margin-top: 12rpx; height: 42rpx; line-height: 42rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; padding: 0 20rpx; }
                .money{
                    margin-top: 4rpx; height: 38rpx; display: flex; align-items: flex-end; padding: 0 20rpx;
                    text{
                        color: #FF3333;
                        &:first-child{ font-size: 24rpx; position: relative; top: -2rpx; }
                        &:last-child{ font-size: 32rpx; }
                    }
                }
            }
        }
    }
    .list_box{
        width: 100%;
        .menu{
            width: 100%; display: flex; align-items: flex-end; flex-wrap: nowrap;
            view{
                vertical-align: top; margin-right: 36rpx; height: 42rpx; line-height: 33rpx; color: rgba(0,0,0,0.45); font-size: 28rpx; white-space: nowrap;
                &.active{
                    font-weight: 500;
                    font-size: 36rpx;
                    color: rgba(0,0,0,0.85);
                    line-height: 42rpx;
                    height: 53rpx;
                }
            }
        }
        .list_waper{
            width: 100%; font-size: 0;
            .list{
                width: 341rpx; display: inline-block; vertical-align: top; background: #fff; margin-right: 20rpx; margin-top: 22rpx; border-radius: 10rpx; overflow: hidden;box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.05);
                &:nth-child(2n){ margin-right: 0; }
                .img{
                    width: 100%; height: 316rpx;
                }
                .info{
                    width: 100%; height: 196rpx; box-sizing: border-box; padding: 19rpx 24rpx 25rpx;
                    view{
                        &:nth-child(1){ line-height: 40rpx; height: 80rpx; color:  rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
                        &:nth-child(2){
                            height: 44rpx; margin-top: 24rpx; display: flex; justify-content: space-between; align-items: flex-end;
                            text{
                                &:first-child{
                                    color: #FF3333; font-size: 40rpx; font-weight: bold; padding-left: 24rpx; position: relative;
                                    &::after{ content: "￥"; color: #FD3306; font-weight: normal; font-size: 24rpx; line-height: 34rpx; position: absolute; left: 0; bottom: 2rpx; }
                                }
                                &:last-child{ color: rgba(0,0,0,0.45); font-size: 28rpx; }
                            }
                        }
                    }
                }
            }
            .null{ text-align: center; color: rgba(0,0,0,0.45); font-size: 28rpx; padding: 40rpx 0; }
        }
    }
}
</style>