<template>
    <view class="waper">
        <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" v-if="detail">
            <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">
                <image :src="$utils.setImgUrl(detail.image)" mode="" />
            </view>
            <view class="content">
                <view class="menu">
                    <scroll-view scroll-x="true">
                        <view class="menu_waper">
                            <view v-for="(i, index) in detail.children" :key="index" :class="{ active: menuActive == index }" @click="tabMenu(index)">{{i.name}}</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="content_waper" v-if="detail.children[menuActive].type == 'list'">
                    <view class="list" v-for="(item, itemIndex) in list" :key="itemIndex">
                        <navigator hover-class="none" class="info" :url="'/pages/eatery/detail?id=' + item.id">
                            <view class="img">
                                <image :src="$utils.setImgUrl(item.image)" mode=""></image>
                            </view>
                            <view class="text">
                                <view class="title">{{item.title}}</view>
                                <view class="tag" v-if="item.keywords">
                                    <view v-for="(i, index) in item.keywords.split(',')" :key="index">{{i}}</view>
                                </view>
                                <view class="msg">{{item.description}}</view>
                            </view>
                        </navigator>
                        <view class="store" v-if="item.eateryShopList && item.eateryShopList.length > 0">
                            <scroll-view scroll-x="true" class="scroll-view">
                                <navigator hover-class="none" v-for="(i, index) in item.eateryShopList" :key="index" class="shop_list" :url="'/pages/eatery/shopDetail?id=' + i.id">
                                    <image :src="$utils.setImgUrl(i.doorImage)" mode=""></image>
                                    <view>{{i.shopName}}</view>
                                </navigator>
                            </scroll-view>
                        </view>
                    </view>
                </view>
                <view class="content_waper" v-else>
                    <navigator hover-class="none" class="store_list" v-for="(i, index) in list" :key="index" :url="'/pages/eatery/shopDetail?id=' + i.id">
                        <view class="left">
                            <image :src="$utils.setImgUrl(i.doorImage)" mode=""></image>
                        </view>
                        <view class="right">
                            <view class="title">{{i.shopName}}</view>
                            <view class="infos">
                                <view class="infos_left">
                                    <view class="tag">{{i.shopCuisine}}</view>
                                    <view class="money">￥{{i.averageConsumption || 0}}/人</view>
                                </view>
                                <view class="site" v-if="location">{{getDistance(i)}}</view>
                            </view>
                            <view class="msg" v-if="i.beginTime">
                                <view class="icon">
                                    <u-icon size="28rpx" name="clock" color="rgba(0, 0, 0, 0.65)"></u-icon>
                                </view>
                                <view class="text">{{i.beginTime ? (i.beginTime.split(':')[0] <= 12 ? '上午' : '下午') : ''}}{{ i.beginTime }}-{{i.endTime ? (i.endTime.split(':')[0] <= 12 ? '上午' : '下午') : ''}}{{ i.endTime }}</view>
                            </view>
                            <view class="msg" :style="i.beginTime ? 'margin-top: 8rpx;' : ''">
                                <view class="icon">
                                    <u-icon size="30rpx" name="map" color="rgba(0, 0, 0, 0.65)"></u-icon>
                                </view>
                                <view class="text">{{i.shopAddress}}</view>
                            </view>
                        </view>
                    </navigator>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin],
    data () {
        return {
            downOption: { use: false },
            scrollTop: 0,
            detail: null,
            menuActive: 0,
            list: [],
            location: null
        }
    },
    onPageScroll (e) {
        this.scrollTop = e.scrollTop;
    },
    async onLoad () {
        uni.getLocation({
            type: 'gcj02',
            isHighAccuracy: true,
            success: (res) => {
                console.log(res)
                let latitude = res.latitude;
                let longitude = res.longitude;
                this.location = { lat:latitude, lng:longitude };
            }
        })
        let info = await this.$http.getChannelInfo({ id: 17 });
        info.data.children.push({ type: 'store', name: '门店推荐' })
        this.detail = info.data;
    },
    methods: {
        getDistance(item){
            let lat1 = item.lat, lng1 = item.lng, lat2 = this.location.lat, lng2 = this.location.lng;
            return this.$utils.getDistance(lat1, lng1, lat2, lng2)
        },
        async upCallback (page) {
            let obj = { pageNum: page.num, pageSize: page.size };
            let info = null;
            if (this.detail.children[this.menuActive].type == 'list') {
                obj.channel = this.detail.children[this.menuActive].id;
                obj.modelId = 3;
                info = await this.$http.archivesCustomList(obj);
            } else {
                info = await this.$eatery.getShopList(obj);
            }
            if (page.num == 1) this.list = [];
            this.list = this.list.concat(info.rows)
            this.mescroll.endBySize(info.rows.length, info.total);
        },
        tabMenu (index) {
            this.menuActive = index;
            this.mescroll.resetUpScroll();
        }
    }
}
</script>

<style lang="scss">
.banner{ width: 100%; height: 520rpx; }
.content{
    width: 100%; position: relative; margin-top: -54rpx; background: #F6F6F6; border-radius: 30rpx 30rpx 0 0; box-sizing: border-box; padding: 32rpx 24rpx;
    .menu{
        width: 100%;
        .menu_waper{
            width: 100%; padding-bottom: 17rpx; font-size: 0; white-space: nowrap;
            view{
                color: rgba(0,0,0,0.45); font-size: 28rpx; display: inline-block; vertical-align: top; line-height: 46rpx; position: relative; margin-right: 68rpx;
                &:last-child{ margin-right: 0; }
                &.active{
                    color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 600;
                    &::after{ content: ""; width: 42rpx; height: 6rpx; background: #4C90FF; border-radius: 13rpx; position: absolute; bottom: -16rpx; left: 50%; transform: translateX(-50%); }
                }
            }
        }
    }
    .content_waper{
        width: 100%; margin-top: 22rpx;
        .list{
            width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx; margin-bottom: 22rpx;
            &:last-child{ margin-bottom: 0; }
            .info{
                width: 100%; height: 208rpx; box-sizing: border-box; padding-left: 228rpx; position: relative;
                .img{
                    width: 208rpx; height: 208rpx; position: absolute; left: 0; top: 0;
                    image{ border-radius: 10rpx; }
                }
                .text{
                    width: 100%; padding-top: 6rpx;
                    .title{ line-height: 46rpx; color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                    .tag{
                        margin-top: 10rpx; font-size: 0;
                        view{
                            display: inline-block; margin-right: 16rpx; height: 36rpx; padding: 0 14rpx; font-size: 20rpx; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 36rpx;
                            &:nth-child(1n){ color: #4C90FF; background: rgba(71, 175, 195, 0.1); }
                            &:nth-child(2n){ color: #FFB457; background: rgba(255, 180, 87, 0.1); }
                            &:last-child{ margin-right: 0; }
                        }
                    }
                    .msg{ width: 100%; margin-top: 16rpx; line-height: 36rpx; color: rgba(0, 0, 0, 0.45); font-size: 28rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
                }
            }
            .store{
                width: 100%; margin-top: 24rpx; padding-top: 24rpx; border-top: 2rpx solid rgba(0, 0, 0, 0.06);
                .scroll-view{
                    width: 100%; height: 130rpx; white-space: nowrap;
                    .shop_list{
                        display: inline-block; vertical-align: top; width: 218rpx; height: 130rpx; margin-right: 22rpx; position: relative;
                        image{ border-radius: 10rpx; }
                        &:last-child{ margin-right: 0; }
                        view{ height: 36rpx; line-height: 36rpx; color: #fff; font-size: 26rpx; box-sizing: border-box; padding: 0 20rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; left: 0; bottom: 12rpx; }
                    }
                }
            }
        }
        .store_list{
            width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx; margin-bottom: 22rpx; padding-left: 252rpx; position: relative;
            &:last-child{ margin-bottom: 0; }
            .left{
                width: 208rpx; height: 208rpx; position: absolute; left: 24rpx; top: 24rpx;
                image{ border-radius: 10rpx; }
            }
            .right{
                width: 100%; height: 208rpx; box-sizing: border-box; padding-top: 6rpx;
                .title{ line-height: 46rpx; color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                .infos{
                    width: 100%; margin-top: 10rpx; display: flex; justify-content: space-between; align-items: center;
                    .infos_left{
                        height: 36rpx; display: flex; align-items: center;
                        .tag{ background: rgba(71, 175, 195, 0.1); color: #4C90FF; height: 100%; padding: 0 14rpx; line-height: 36rpx; font-size: 20rpx; }
                        .money{ margin-left: 20rpx; color: rgba(0, 0, 0, 0.45); font-size: 26rpx; }
                    }
                    .site{ margin-left: 20rpx; color: rgba(0, 0, 0, 0.45); font-size: 26rpx; }
                }
                .msg{
                    margin-top: 16rpx; width: 100%; box-sizing: border-box; padding-left: 36rpx; height: 42rpx; position: relative;
                    .icon{ width: 28rpx; height: 28rpx; display: flex; align-items: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
                    .text{ line-height: 42rpx; color: rgba(0, 0, 0, 0.65); font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                }
            }
        }
    }
}
</style>