<template>
    <view class="content">
        <!-- 图片 -->
        <view class="swiper">
        	<swiper :indicator-dots="false" @change="current = $event.detail.current + 1">
        		<swiper-item v-for="(item, index) in pictures" :key="index" @click="seeImg">
        			<view class="swiper-cover">
        				<image :src="item" mode="aspectFill" />
        			</view>
        		</swiper-item>
        	</swiper>
        	<view class="swiper-pages">
        		{{ current }}/{{ pictures.length }}
        	</view>
        </view>
        
        <!-- 标题 -->
        <view class="title">
            <view class="name">
                {{ hallsData.title}} · {{ hallsData.subtitle}}
            </view>
            <view class="address">
                <u-icon name="map" style="margin-right: 10rpx;"></u-icon>{{ hallsData.address}}
            </view>
            <view class="area">
                <u-icon name="home" style="margin-right: 10rpx;"></u-icon>{{ hallsData.areas}}㎡
            </view>
        </view>
        
        <!-- 场馆概况 -->
        <view class="survey">
            <view class="survey-title">
                场馆概况
            </view>
            <view class="survey-text">
                <rich-text :nodes="hallContent"></rich-text>
            </view>
        </view>
        
        <!-- 基础设施 -->
        <view class="survey">
            <view class="survey-title">
                基础设施
            </view>
            <u-scroll-list class="facilities" :indicator="false" v-if="facilities.length > 0">
            	<view class="list" v-for="(item, index) in facilities" :key="index">
            	    <view class="label">
            	    	<image class="label-img" :src="item.cover" mode=""></image>
            	    	<view class="label-name">
            	    	    {{ item.name }}
            	    	</view>
            	    </view>
            	</view>
            </u-scroll-list>
        </view>
        
        <!-- 我是店长 -->
        <view class="survey">
            <view class="survey-title">
                我是店长
            </view>
            <view class="shopowner">
                <view class="shopowner-cont">
                    <image class="shopowner-img" :src="user.contact_cover ? user.contact_cover : '/static/find/logo.png'" mode="aspectFill"></image>
                    <view class="shopowner-name">
                        {{ user.name }}
                    </view>
                </view>
                <view class="shopowner-tel" @click="contact(user.contact_mobile)">
                    联系他
                </view>
            </view>
            <view class="helper">
                HI，我是{{ hallsData.title}} · {{ hallsData.subtitle}}店长，有任何问题可电话交流哦，我将在第一时间回复您
            </view>
        </view>
    </view>
</template>

<script>
    import { hallsDet } from '@/apis/interfaces/service'
    export default {
    	data() {
    		return {
    			current     : 1,
                hallsData   : '',
                facilities  : [],
                user        : '',
                hallContent : '',
                pictures    : []
    		};
    	},
    	mounted() {
            uni.setNavigationBarTitle({
                title: this.$Route.query.title
            })
            
            // 获取详情
            this.getService()
    	},
    	methods:{
    		// 详情
    		getService(){
    			hallsDet(this.$Route.query.id).then(res => {
                    this.hallsData  = res
                    this.facilities = res.facilities
                    this.user       = res.user
                    this.pictures   = res.pictures
                    this.hallContent= res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
    			})
    		},
            
            // 拨打电话
            contact(tel){
                uni.makePhoneCall({
                    phoneNumber: tel
                })
            },
            
            // 预览图片
            seeImg(){
                uni.previewImage({
                    urls: this.pictures
                })
            }
    	}
    }
</script>

<style lang="scss">
    .content {
        background-color: $window-color;
        padding-bottom: $padding;
		min-height: 100vh;
		box-sizing: border-box;
    }
    
    /* 图片 */
    .swiper{
    	position: relative;
    	width: 100%;
    	padding-top: 60%;
    	background: $window-color;
    	&> swiper{
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		.swiper-cover{
    			width: 100%;
    			height: 100%;
    			image{
    				position: absolute;
    				top: 0;
    				left: 0;
    				width: 100%;
    				height: 100%;
    			}
    		}
    	}
    	.swiper-pages{
    		position: absolute;
    		bottom: 20rpx;
    		right: 20rpx;
    		z-index: 9;
    		text-align: right;
    		color: white;
    		font-size: $title-size-m;
    		text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
    	}
    }
    
    .title {
        padding: $padding;
        box-sizing: border-box;
        background-color: white;
        .name {
            font-size: $title-size + 6;
            font-weight: 600;
        }
        .address {
            font-size: $title-size-sm;
            margin: $margin - 10 0;
            display: flex;
        }
        .area {
            font-size: $title-size-sm;
            display: flex;
        }
    }
    
    .survey {
        padding: $padding;
        box-sizing: border-box;
        background-color: white;
        margin: $margin 0;
        .survey-title {
            font-size: $title-size;
            margin-bottom: $margin - 10;
            font-weight: bold;
        }
        .survey-text {
            font-size: $title-size-m;
            line-height: 44rpx;
            color: $text-color;
        }
        .facilities {
            margin-top: $margin;
            .list {
                .label {
                    width: 170rpx;
                    text-align: center;
                    font-size: $title-size-m;
                    .label-img {
                        width: 60rpx;
                        height: 60rpx;
                    }
                    .label-name{
                        color: $text-gray;
                    }
                }
            }
        }
        .shopowner {
            position: relative;
            .shopowner-cont {
                flex: 1;
                display: flex;
                width: calc(100% - 200rpx);
                .shopowner-img {
                    width: 74rpx;
                    height: 74rpx;
                    border-radius: 50%;
                }
                .shopowner-name {
                    line-height: 74rpx;
                    padding-left: $padding - 10;
                }
            }
            .shopowner-tel {
                position: absolute;
                right: 0;
                top: 10rpx;
                display: inline-block;
                border: $main-color 2rpx solid;
                color: $main-color;
                font-size: $title-size-sm;
                padding: 0 $padding;
                line-height: 54rpx;
                border-radius: $radius-m;
            }
        }
        .helper {
            background-color: $window-color;
            padding: $padding;
            box-sizing: border-box;
            font-size: $title-size-m;
            border-radius: $radius;
            margin-top: $margin;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                left: $margin;
                top: -14rpx;
                border-left: 14rpx solid transparent;
                border-right: 14rpx solid transparent;
                border-bottom: 14rpx solid $window-color;
            }
        }
    }
</style>
