<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.image.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.image.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>
                        <text>{{detail.scenicLevelName}}</text>
                        <text v-for="(i, index) in detail.tagList" :key="index">{{i.name}}</text>
                    </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/stop.png" mode="" v-else></image>
                    </view>
                    <text class="text">语音讲解</text>
                </view>
            </view>
            <view class="list_waper">
                <view class="list">
                    <view>开园时间：{{detail.adjust}}</view>
                </view>
                <view class="list" @click="openLocation">
                    <view>{{detail.address}}</view>
                    <view>
                        <image src="https://common/addresss.png" mode=""></image>
                    </view>
                </view>
                <view class="list" @click="callTel">
                    <view>{{detail.officialPhone}}</view>
                    <view>
                        <image src="https://common/tels.png" mode=""></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="notice" v-if="detail.textType">
            <view class="list" v-if="detail.textType.indexOf('0') > -1">
                <view class="title">景区介绍</view>
                <view class="cont">
                    <u-parse :content="detail.blurb"></u-parse>
                </view>
            </view>
            <view class="list" v-if="detail.textType.indexOf('1') > -1">
                <view class="title">交通指南</view>
                <view class="cont">{{detail.reachinfo}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default{
    data () {
        return {
            scrollTop: 0,
            detail: null,
            play: false,
            innerAudioContext: null,
            playError: null
        }
    },
    async onLoad () {
        let info = await this.$http.scenicDetail({ id: this.$scenicId });
        if (info.data.blurb) info.data.blurb = this.$utils.replaceImg(info.data.blurb);
        console.log(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) => {
                this.playError = '音频出错：' + res.errMsg;
            });
        }
    },
    onShareAppMessage (e) {
        return {
            title: '巴松措风景区',
            path: '/pages/login/index'
        }
    },
    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.coordinate) {
                let latitude = this.detail.coordinate.split(',')[1];
                let longitude = this.detail.coordinate.split(',')[0];
                console.log(this.detail.scenicName, '-', this.detail.address)
                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 {
                if (this.playError !== null) {
                    uni.showToast({ mask: true, title: this.playError, icon: 'none' })
                    return false;
                }
                this.play = true;
                this.innerAudioContext.play();
            }
        }
    },
    onPageScroll (e) {
        this.scrollTop = e.scrollTop;
    }
}
</script>

<style lang="scss">
.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: 32rpx 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){ line-height: 52rpx; color: #333; font-size: 36rpx; font-weight: 500; }
                &:nth-child(2){
                    display: flex; align-items: center; flex-wrap: wrap;
                    text{
                        height: 42rpx; line-height: 42rpx; border-radius: 12rpx 2rpx 12rpx 2rpx; background: rgba(255, 169, 68, 0.1); padding: 0 20rpx; color: #FFA944; font-size: 28rpx; margin-right: 12rpx; margin-top: 10rpx;
                        &:last-child{ margin-right: 0; }
                    }
                }
            }
        }
        .btn{
            width: 198rpx; height: 70rpx; position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border-radius: 100rpx;
            .icon{ width: 30rpx; height: 30rpx; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
            .text{ color :#fff; font-size: 24rpx; margin-left: 8rpx; }
        }
    }
    .list_waper{
        width: 100%; margin-top: 8rpx;
        .list{
            width: 100%; border-top: 2rpx solid rgba(0, 0, 0, 0.1); padding: 32rpx 0; padding-right: 74rpx; position: relative; box-sizing: border-box;
            &:first-child{ border-top: 0; padding-right: 0; }
            view{
                &:nth-child(1){ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; }
                &:nth-child(2){ width: 50rpx; height: 50rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
            }
        }
    }
}
.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{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; }
        .cont{ line-height: 50rpx; color: #666; font-size: 28rpx; margin-top: 20rpx; }
    }
}
</style>