<template>
    <view class="audio">
        <view class="audio-wrapper">
            <view class="audio-btn" @Tap.stop.prevent="handleBtn">
                <view :class="'audio-sound-play ' + (!hasPlay && 'audio-sound-play-stop')">
                    <view class="audio-sound-play-item"></view>
                    <view class="audio-sound-play-item"></view>
                    <view class="audio-sound-play-item"></view>
                    <view class="audio-sound-play-item"></view>
                </view>
            </view>
            <!-- <image src="/assets/images/topic/play.png" bind:tap="audioPlay" /> -->
            <slider :value="stepValue" min="0" :max="totalMax" class="audio-slider" activeColor="#E60000" handleColor="#E60000" handleSize="12" />
            <view class="audio-time">{{ totalTime }}</view>
        </view>
        <view class="audio-del">
            <image v-if="showDel" src="/static/data/images/del_record.png" @Tap.stop.prevent="handleAudioDel" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            totalTime: '',
            stepTime: 0,
            totalMax: 0,
            stepValue: 0,
            hasPlay: false,
            playUrl: '',
            backgroundAudioManager: null
        };
    },
    mixins: [],
    props: {
        url: {
            type: String,
            default: ''
        },
        duration: {
            type: Number,
            default: 0
        },
        showDel: {
            type: Boolean,
            default: false
        },
        onAudioDel: () => {}
    },
    didMount() {
        this.downLoadAudio();
    },
    didUpdate() {},
    didUnmount() {
        this.backgroundAudioManager = null;
    },
    methods: {
        downLoadAudio() {
            var _this = this;
            let backgroundAudioManager = uni.getBackgroundAudioManager();
            uni.downloadFile({
                url: this.props.url,
                success(res) {
                    console.log(res);
                    _this.setData({
                        playUrl: res.filePath,
                        backgroundAudioManager,
                        hasPlay: true
                    });
                    _this.initAudio();
                },
                fail() {
                    uni.showToast({
                        title: '音频加载失败',
                        icon: 'none',
                        duration: 1500
                    });
                }
            });
        },
        initAudio() {
            let _this = this;
            let backgroundAudioManager = _this.backgroundAudioManager;
            backgroundAudioManager.src = _this.playUrl;
            _this.initDuration();
            console.log('ppppplllaaa', backgroundAudioManager);
            backgroundAudioManager.onPlay = () => {
                console.log('开始播放', backgroundAudioManager.duration);
            };
            backgroundAudioManager.onTimeUpdate = () => {
                console.log('duration-onTimeUpdate', backgroundAudioManager.duration);
                console.log('currentTime', backgroundAudioManager.currentTime);
                if (backgroundAudioManager.duration) {
                    _this.setData({
                        totalMax: backgroundAudioManager.duration * 1000
                    });
                }
                _this.setData({
                    stepValue: backgroundAudioManager.currentTime * 1000
                });
                console.log('stepValue', _this.stepValue);
                console.log('totalTime', _this.totalTime);
                console.log('totalMax', _this.totalMax);
            };
            backgroundAudioManager.onEnded = () => {
                console.log('end');
                _this.setData({
                    hasPlay: false
                });
            };
            backgroundAudioManager.onError = (res) => {
                console.log('errMsg', res.errMsg);
                uni.showToast({
                    title: '音频播放错误',
                    icon: 'none',
                    duration: 1500
                });
            };
        },
        initDuration() {
            var _a = this;
            var totalTime = _a.totalTime;
            var duration = this.props.duration;
            if (duration) {
                totalTime = this.format(duration * 1000);
                console.log(totalTime, duration);
                this.setData({
                    totalTime: totalTime,
                    totalMax: duration
                });
            }
            console.log('totalMax', this.totalMax);
        },
        handleBtn() {
            this.audioPlay();
        },
        audioPause() {
            this.backgroundAudioManager.pause();
            this.setData({
                hasPlay: false
            });
        },
        audioPlay() {
            this.backgroundAudioManager.play();
            this.setData({
                hasPlay: true
            });
        },
        slideChange(e) {
            this.audioPause();
            var value = e.detail.value;
            console.log('slidechange', value);
            innerAudioContext.seek(value / 1000);
            this.setData({
                stepValue: value
            });
            this.audioPlay();
        },
        handleSlideMove(e) {
            this.audioPause();
        },
        handleAudioDel() {
            this.backgroundAudioManager.stop();
            console.log('innerAudioContextdel', this.backgroundAudioManager);
            this.props.onAudioDel();
        },
        format: function (num) {
            var min = parseInt(num / 1000 / 60);
            var second = parseInt(num / 1000) % 60;
            min = min >= 10 ? min : '0' + min;
            second = second >= 10 ? second : '0' + second;
            return min + ':' + second;
        }
    },
    created: function () {}
};
</script>
<style>
.audio,
.audio-wrapper {
    display: flex;
    align-items: center;
}
.audio {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
}
.audio-wrapper {
    display: flex;
    align-items: center;
    width: 590rpx;
    height: 90rpx;
    box-sizing: border-box;
    margin-right: 30rpx;
    padding: 0 20rpx;
    background: #fff;
    box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(211, 211, 211, 0.26);
    border-radius: 20rpx;
    -webkit-border-radius: 20rpx;
    -moz-border-radius: 20rpx;
    -ms-border-radius: 20rpx;
    -o-border-radius: 20rpx;
}
.audio-wrapper image {
    display: block;
    width: 56rpx;
    height: 56rpx;
}
.audio-wrapper .audio-btn {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #333;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.audio-wrapper .audio-slider {
    width: 386rpx;
    margin: 0 auto;
}
.audio-wrapper .audio-time {
    width: 70rpx;
    font-size: 26rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    color: #333;
}
.audio-del image {
    display: block;
    width: 40rpx;
    height: 40rpx;
}
@-webkit-keyframes list {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}
@keyframes list {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
    }
}
.audio-sound-play {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.audio-sound-play .audio-sound-play-item {
    width: 2rpx;
    height: 20rpx;
    border-radius: 6rpx;
    margin-right: 2rpx;
    background-color: #333;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
    -webkit-border-radius: 6rpx;
    -moz-border-radius: 6rpx;
    -ms-border-radius: 6rpx;
    -o-border-radius: 6rpx;
    -webkit-animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.audio-sound-play .audio-sound-play-item:nth-child(1) {
    -webkit-animation-delay: 0.1s !important;
    animation-delay: 0.1s !important;
}
.audio-sound-play .audio-sound-play-item:nth-child(2) {
    -webkit-animation-delay: 0.2s !important;
    animation-delay: 0.2s !important;
}
.audio-sound-play .audio-sound-play-item:nth-child(3) {
    -webkit-animation-delay: 0.3s !important;
    animation-delay: 0.3s !important;
}
.audio-sound-play .audio-sound-play-item:nth-child(4) {
    -webkit-animation-delay: 0.4s !important;
    animation-delay: 0.4s !important;
}
.audio-sound-play-stop .audio-sound-play-item {
    animation-play-state: paused;
}
</style>
