<template>
    <view class="waper">
        <u-navbar @leftClick="leftClick" :bgColor="scrollTop > 20 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 20 ? '#303133' : '#fff'">
        	<view slot='center' class="navbar_title">{{scrollTop > 20 ? '景点介绍' : ''}}</view>
        </u-navbar>
        <view class="banner" v-if="detail">
            <swiper :autoplay="true" :interval="5000" circular :duration="1000">
                <swiper-item v-for="(i, index) in detail.image43.split(',')" :key="index">
                    <image :src="$utils.setImgUrl(i)" mode=""></image>
                </swiper-item>
            </swiper>
            <view style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;" v-if="detail.image43.split(',').length == 1"></view>
            <button open-type="share" class="icon">
                <u-icon size="44rpx" color="#fff" name="share-square"></u-icon>
            </button>
        </view>
        <view class="info_waper" v-if="detail">
            <view class="info" :style="detail.audioGuideUrl ? '' : 'padding-right: 0;'">
                <view class="name">
                    <view>{{detail.scenicName}}</view>
                </view>
                <view class="btn" v-if="detail.audioGuideUrl" @click="playAudio">
                    <view class="icon">
                        <!-- <image src="https://common/play.png" mode="" v-if="!play"></image> -->
                        <image src="https://common/yuyin.png" mode="" v-if="!play"></image>
                        <image src="https://common/stop.png" mode="" v-else></image>
                    </view>
                    <text class="text">语音讲解</text>
                </view>
            </view>
            <view class="list_waper">
                <view class="list mt" v-if="detail.adjust">
                    <view>开园时间：{{detail.adjust}}</view>
                </view>
                <view class="address" @click="openLocation">
                    <view class="address-tit">{{detail.address}}</view>
                    <view class="line"></view>
                    <image class="img" src="../../static/image/rental/navigation.png" mode=""></image>
                </view>
            </view>
        </view>
        <view class="notice">
            <view class="list">
                <view class="title">景点介绍</view>
                <view class="cont">
                    <u-parse :content="detail.blurb"></u-parse>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default{
    data () {
        return {
            scrollTop: 0,
            detail: null,
            play: false,
            innerAudioContext: null
        }
    },
    async onLoad (options) {
        let info = await this.$http.scenicSpotDetail(options.id);
        if (info.data.blurb) info.data.blurb = this.$utils.replaceImg(info.data.blurb);
        this.detail = info.data;
        if (this.detail.audioGuideUrl) {
            this.innerAudioContext = uni.createInnerAudioContext();
            this.innerAudioContext.autoplay = false;
            this.innerAudioContext.src = this.$utils.setImgUrl(this.detail.audioGuideUrl);
            this.innerAudioContext.onStop(() => {
                this.play = false;
                console.log('停止播放');
            });
            this.innerAudioContext.onError((res) => {
                console.log('音频出错：' + res.errMsg)
            });
        }
        
    },
    onShareAppMessage (e) {
        return {
            title: '巴松措风景区',
            path: '/pages/login/index'
        }
    },
    onUnload () {
        this.play = false;
        this.innerAudioContext = null;
        console.log('页面退出  停止播放')
    },
    methods: {
        leftClick () {
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            if (prevPage) {
                uni.navigateBack({ delta: 1 })
                prevPage.onLoad(prevPage.options);
            } else uni.reLaunch({ url: '/pages/tabbar/home' })
        },
        callTel () {
            uni.makePhoneCall({ phoneNumber: this.detail.officialPhone });
        },
        openLocation () {
            if (this.detail && this.detail.location) {
                let latitude = this.detail.location.split(',')[1];
                let longitude = this.detail.location.split(',')[0];
                uni.openLocation({
                    latitude: Number(latitude),
                    longitude: Number(longitude),
                    name: this.detail.scenicName,
                    address: this.detail.address,
                })
            }
        },
        playAudio () {
            if (this.innerAudioContext && this.play) {
                this.play = false;
                this.innerAudioContext.pause();
            } else {
                this.play = true;
                this.innerAudioContext.play();
            }
        }
    },
    onPageScroll (e) {
        this.scrollTop = e.scrollTop;
    }
}
</script>

<style lang="scss" scoped>
.banner{
    width: 100%; height: 562rpx; position: relative;
    swiper{ width: 100%; height: 100%; }
    .icon{
        width: 80rpx; height: 80rpx; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; border: none; padding: 0; position: absolute; bottom: 128rpx; right: 32rpx; z-index: 3;
        &::after{ border: none; }
    }
}
.info_waper{
    width: 100%; background: #fff; margin-top: -80rpx; border-radius: 32rpx 32rpx 0 0; box-sizing: border-box; padding: 43rpx 32rpx 0; position: relative; z-index: 3;
    .info{
        width: 100%; box-sizing: border-box; padding-right: 210rpx; position: relative;
        .name{
            width: 100%;
            view{
                &:nth-child(1){ 
                    font-weight: 600;
                    font-size: 40rpx;
                    color: rgba(0,0,0,0.85);
                    height: 59rpx;
                    line-height: 47rpx;
                }
                &:nth-child(2){
                    margin-top: 10rpx; display: flex; align-items: center;
                    text{
                        height: 32rpx; line-height: 32rpx; border-radius: 12rpx 2rpx 12rpx 2rpx; background: rgba(255, 169, 68, 0.1); padding: 0 20rpx; color: #FFA944; font-size: 22rpx; margin-right: 12rpx;
                        &:last-child{ margin-right: 0; }
                    }
                }
            }
        }
        .btn{
            width: 198rpx; height: 70rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; background: #03AE80; border-radius: 100rpx;
            .icon{ width: 30rpx; height: 30rpx;  border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 8rpx; }
            .text{ color :#fff; font-size: 24rpx; margin-left: 8rpx; }
        }
    }
    .list_waper{
        width: 100%; margin-top: 8rpx;
        .list{
            width: 100%; padding: 32rpx 0; padding-right: 74rpx; position: relative; box-sizing: border-box;
            &:first-child{ padding-right: 0; }
            view{
                &:nth-child(1){ 
                    font-size: 28rpx;
                    color: rgba(0,0,0,0.45);
                    line-height: 33rpx;
                }
                &:nth-child(2){ width: 50rpx; height: 50rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
            }
        }
        .address{
            font-size: 26rpx;
            color: rgba(0,0,0,0.65);
            display: flex;
            align-items: center;
            padding: 24rpx 0;
            .line{
                width: 1rpx;
                height: 40rpx;
                background: rgba(0,0,0,0.1);
                margin: 24rpx 32rpx 24rpx 20rpx;
            }
            .img{
                width: 50rpx;
                min-width: 50rpx;
                height: 50rpx;
            }
        }
        .mt{
            margin-top: 11rpx;
            padding: 0;
            border-bottom: none;
        }
    }
}
.notice{
    width: 100%; background: #fff; margin-top: 20rpx; box-sizing: border-box; padding: 32rpx;
    .list{
        width: 100%; margin-bottom: 40rpx;
        &:last-child{ margin-bottom: 0; }
        .title{ font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); line-height: 44rpx; }
        .cont{ line-height: 50rpx; color: #666; font-size: 28rpx; margin-top: 20rpx; }
    }
}
</style>