<template>
	<ciy-header ref="header" title="ciy-audio组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">音乐播放器</view>
			<view class="content">
				<view class="tip">
					支持背景/前景播放、倍速播放。<br />
				</view>
			</view>
		</view>
		<view class="px2 py2">
			<ciy-audio :background="props.background" :src="props.src" :coverimg="props.coverimg" :title="props.title" :nonedisplay="props.nonedisplay" :epname="props.epname" :singer="props.singer" @change="chglog('change', $event)">
			</ciy-audio>
		</view>
		<view style="margin:2em;display: flex;justify-content: space-around;">
			<view @tap="this.settheme('dark')">dark</view>
			<view @tap="this.settheme('light')">light</view>
		</view>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">src</view>
				<view class="tip">音频文件url，支持hls。</view>
				<ciy-input bb v-model="props.src"></ciy-input>
				<view class="hr"></view>
				<view class="prp">title</view>
				<view class="tip">
					标题。<br />
					默认 无题
				</view>
				<ciy-input bb v-model="props.title"></ciy-input>
				<view class="hr"></view>
				<view class="prp">nonedisplay</view>
				<view class="tip">
					是否不显示界面。<br />
					默认 false
				</view>
				<view style="margin:0 1em;">
					<ciy-switch v-model="props.nonedisplay"></ciy-switch>
				</view>
				<view class="hr"></view>
				<view class="prp">background</view>
				<view class="tip">
					是否背景播放。<br />
					若需要小程序在退到后台后继续播放音频，需在 app.json 中配置 requiredBackgroundModes 属性，向官方申请权限。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">coverimg</view>
				<view class="tip">
					封面图url。仅背景播放时后台显示。<br />
				</view>
				<ciy-input bb v-model="props.coverimg"></ciy-input>
				<view class="hr"></view>
				<view class="prp">epname</view>
				<view class="tip">
					专辑名。仅背景播放时后台显示。<br />
				</view>
				<ciy-input bb v-model="props.epname"></ciy-input>
				<view class="hr"></view>
				<view class="prp">singer</view>
				<view class="tip">
					歌手名。仅背景播放时后台显示。<br />
				</view>
				<ciy-input bb v-model="props.singer"></ciy-input>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change</view>
				<view class="tip">
					打开关闭变更事件<br />
					from: play,pause,stop
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
	<ciy-tabbar ref="tabbar"></ciy-tabbar>
</template>

<style scoped>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				ns: 5,
				popsh: false,
				props: {
					src: this.file_stor('/img/music1.mp3'),
					coverimg: this.file_stor('/img/face.png'),
					title: '无题',
					direction: 'bottom',
					edge: 100,
					anispeed: 300,
				}
			}
		},
		onLoad() {
			if (this.opn.bg == '1')
				this.props.background = true;
		},
		methods: {
			async openpop(ns) {
				this.ns = ns;
				this.popsh = true;
			},
			funopen() {
				this.getrefs('anipop').then(ref => ref.Open());
			}
		}
	}
</script>