<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.shopName : '') : ''}}</view>
        </u-navbar>
        <view class="banner" v-if="detail">
            <swiper :autoplay="true" :current="current" circular @change="changeCurrent" v-if="detail.environmentImage">
                <swiper-item v-for="(i, index) in detail.environmentImage.split(',')" :key="index">
                    <image :src="$utils.setImgUrl(i)" mode=""></image>
                </swiper-item>
            </swiper>
            <view class="num" v-if="detail.environmentImage">{{current + 1}}/{{detail.environmentImage.split(',').length}}</view>
        </view>
        <view class="content" v-if="detail">
            <view class="info">
                <view class="title">{{detail.shopName}}</view>
                <view class="list_waper">
                    <view class="list">
                        <view class="left">营业时间：{{detail.beginTime}}-{{detail.endTime}}</view>
                    </view>
                    <view class="list hasRight">
                        <view class="left">{{detail.shopAddress}}</view>
                        <view class="right">
                            <image class="location" :src="$utils.setImgUrl('/profile/static/alone/mine/location.png')" mode="" @click="openLocation"></image>
                        </view>
                    </view>
                    <view class="list hasRight">
                        <view class="left">联系电话：{{detail.shopPhone}}</view>
                        <view class="right">
                            <image class="phone" :src="$utils.setImgUrl('/profile/static/alone/common/callTel.png')" mode="" @click="callTel"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content_waper" v-if="list.length > 0">
                <view class="title">
                    <view class="left">
                        <text>门店菜品</text>
                        <image :src="$utils.setImgUrl('/profile/static/home/title_bg.png')" mode=""></image>
                    </view>
                    <navigator hover-class="none" class="right" :url="'/pages/eatery/shopProduct?merchantId=' + detail.merchantId">
                        <view class="text">更多</view>
                        <view class="icon">
                            <u-icon name="arrow-right" color="rgba(0, 0, 0, 0.25)" size="28rpx"></u-icon>
                        </view>
                    </navigator>
                </view>
                <view class="list_waper">
                    <view class="list_content" v-for="(item, itemIndex) in list" :key="itemIndex" v-if="item.children.length > 0">
                        <view class="list_title">{{item.name}}</view>
                        <view class="list_item">
                            <scroll-view scroll-x="true">
                                <view class="list" v-for="(i, index) in item.children" :key="index">
                                    <view class="img">
                                        <image :src="$utils.setImgUrl(i.img)" mode=""></image>
                                    </view>
                                    <view class="text">{{i.name}}</view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            scrollTop: 0,
			id: null,
            detail: null,
            current: 0,
            list: []
        }
    },
    onPageScroll (e) {
        this.scrollTop = e.scrollTop;
    },
	onShow () {
		this.getInitData();
	},
    onLoad (options) {
		this.id = options.id;
    },
    methods: {
		async getInitData() {
			let info = await this.$eatery.getShopInfo(this.id);
			this.detail = info.data;
			this.$eatery.getWithProduct1(this.id).then(res => {
				this.list = res.data || [];
			})
		},
        changeCurrent (e) {
            this.current = e.detail.current;
        },
        openLocation() {
            if (this.detail.lat && this.detail.lng) {
                uni.openLocation({
                    latitude: Number(this.detail.lat),
                    longitude: Number(this.detail.lng),
                    name: this.detail.shopName,
                    address: this.detail.shopAddress,
                })
            }
        },
        callTel() {
            uni.makePhoneCall({ phoneNumber: this.detail.shopPhone, fail: res => {} });
        }
    }
}
</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 0; background: #fff;
        .title{ color: rgba(0, 0, 0, 0.85); font-size: 36rpx; font-weight: 600; line-height: 52rpx; }
        .list_waper{
            width: 100%;
            .list{
                width: 100%; padding: 24rpx 0; border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
                &.hasRight{ box-sizing: border-box; padding-right: 76rpx; position: relative; }
                &:last-child{ border-bottom: 0; }
                .left{ width: 100%; line-height: 40rpx; color: rgba(51, 51, 51, 0.65); font-size: 28rpx; }
                .right{ width: 52rpx; height: 52rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
            }
        }
    }
    .content_waper{
        width: 100%; margin-top: 22rpx; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff;
        .title{
            width: 100%; height: 52rpx; display: flex; justify-content: space-between; align-items: center;
            .left{
                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; }
            }
            .right{
                display: flex; align-items: center;
                .text{ color: rgba(0, 0, 0, 0.25); font-size: 24rpx; margin-right: 2rpx; }
            }
        }
        .list_waper{
            width: 100%; margin-top: 24rpx;
            .list_content{
                width: 100%; margin-bottom: 24rpx; padding-bottom: 24rpx; border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
                &:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
                .list_title{ line-height: 48rpx; color: rgba(0, 0, 0, 0.85); font-size: 33rpx; font-weight: 600; }
                .list_item{
                    width: 100%; margin-top: 20rpx;
                    scroll-view{
                        width: 100%; white-space: nowrap; font-size: 0;
                        .list{
                            width: 242rpx; margin-right: 20rpx; display: inline-block; vertical-align: top;
                            &:last-child{ margin-right: 0; }
                            .img{
                                width: 100%; height: 182rpx;
                                image{ border-radius: 10rpx; }
                            }
                            .text{ margin-top: 14rpx; line-height: 40rpx; color: rgba(0, 0, 0, 0.85); font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                        }
                    }
                }
            }
        }
    }
}
</style>