<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 ? (detail ? detail.title : '') : ''}}</view>
        </u-navbar>
        <view class="banner" v-if="detail">
            <swiper :autoplay="true" :current="current" circular @change="changeCurrent">
                <swiper-item v-for="(i, index) in detail.image.split(',')" :key="index">
                    <image :src="$utils.setImgUrl(i)" mode=""></image>
                </swiper-item>
            </swiper>
            <view class="num">{{current + 1}}/{{detail.image.split(',').length}}</view>
        </view>
        <view class="content" v-if="detail">
            <view class="info">
                <view class="title">{{detail.title}}</view>
                <view class="tag" v-if="detail.keywords">
                    <view v-for="(i, index) in detail.keywords.split(',')" :key="index">{{i}}</view>
                </view>
                <view class="msg" v-if="detail.description">{{detail.description}}</view>
            </view>
            <view class="shop_waper" v-if="detail.params.eateryShopList && detail.params.eateryShopList.length > 0">
                <view class="title">
                    <text>推荐门店</text>
                    <image :src="$utils.setImgUrl('/profile/static/home/title_bg.png')" mode=""></image>
                </view>
                <view class="list_waper">
                    <navigator hover-class="none" class="store_list" v-for="(i, index) in detail.params.eateryShopList" :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.endTime }}</view>
                            </view>
                            <view class="msg">
                                <view class="icon">
                                    <u-icon size="28rpx" name="map" color="rgba(0, 0, 0, 0.65)"></u-icon>
                                </view>
                                <view class="text">{{i.shopAddress}}</view>
                            </view>
                        </view>
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            current: 0,
            scrollTop: 0,
            detail: null,
            location: null
        }
    },
    onPageScroll (e) {
        this.scrollTop = e.scrollTop;
    },
    async onLoad (options) {
        uni.getLocation({
            type: 'gcj02',
            isHighAccuracy: true,
            success: (res) => {
                let latitude = res.latitude;
                let longitude = res.longitude;
                this.location = { lat:latitude, lng:longitude };
            }
        })
        let info = await this.$http.archieveDetail({ id: options.id });
        this.detail = info.data;
    },
    methods: {
        changeCurrent (e) {
            this.current = e.detail.current;
        },
        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)
        }
    }
}
</script>

<style lang="scss">
page{ background: #F6F6F6; }
.banner{
    width: 100%; height: 562rpx; position: relative;
    swiper{ width: 100%; height: 100%; }
    .num{ height: 40rpx; background: rgba(0, 0, 0, 0.5); border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 120rpx; color: #fff; font-size: 24rpx; padding: 0 20rpx; line-height: 40rpx; }
}
.content{
    width: 100%; background: #F6F6F6; position: relative; margin-top: -96rpx; border-radius: 30rpx 30rpx 0 0; overflow: hidden;
    .info{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff;
        .title{ line-height: 52rpx; color: rgba(0, 0, 0, 0.85); font-size: 36rpx; font-weight: 600; }
        .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;
                &: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: 24rpx; line-height: 40rpx; color: rgba(0, 0, 0, 0.45); font-size: 28rpx; }
    }
    .shop_waper{
        width: 100%; margin-top: 22rpx; background: #fff; box-sizing: border-box; padding: 32rpx 24rpx;
        .title{
            width: 100%; height: 52rpx; line-height: 52rpx; color: rgba(0, 0, 0, 0.85); font-size: 36rpx; font-weight: bold; position: relative;
            image{ width: 72rpx; height: 37rpx; position: absolute; left: 118rpx; top: 50%; transform: translateY(-50%); z-index: 3; }
            text{ position: relative; z-index: 5; }
        }
        .list_waper{
            width: 100%; margin-top: 4rpx;
            .store_list{
                width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 20rpx 0; border-bottom: 2rpx solid rgba(0, 0, 0, 0.05); padding-left: 228rpx; position: relative;
                &:last-child{ border-bottom: none; }
                .left{
                    width: 208rpx; height: 208rpx; position: absolute; left: 0; 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: 8rpx; width: 100%; box-sizing: border-box; padding-left: 36rpx; height: 42rpx; position: relative;
                        &:nth-child(2){ margin-top: 8rpx; }
                        .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>