<template>
	<view class="content">
		<view class="headerGetbg"></view>
		<view class="bgf mar-24 home-content">
			
<!-- 			<view class="box-pack-between list flex-y-center br">
				<text class="ft32 list-title">基本信息</text>
				<view class="flex-y-center">
					<view @click="del" class="flex-y-center" style="margin-right: 20rpx;">
						<image src="../../static/images/del2.png" class="list-icon" mode=""></image> 删除
					</view>
					<view @click="enit" class="flex-y-center" style="margin-right: 0rpx;">
						<image src="../../static/images/enit2.png" class="list-icon" mode=""></image> 重命名
					</view>
				</view>
			</view> -->

			<view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
				<text class="home-left-name">文件名称：</text>
				<view style="word-break:break-all;" >{{info.name}}</view>
			<!-- 	<view v-else class="home-left-input">
					<textarea @blur='enits' style="width: 100%;" :value="info.name" auto-height />
				</view> -->
			</view>

<!-- 			<view class="flex-y-center home-content-item">
				<text class="home-left-name">文件大小：</text>
				<text>{{info.file_size}}</text>
			</view>

			<view class="flex-y-center home-content-item">
				<text class="home-left-name">文件后缀：</text>
				<text>{{info.file_ext}}</text>
			</view>
 -->
	<!-- 		<view class="flex-y-center home-content-item">
				<text class="home-left-name">创建时间：</text>
				<text>{{info.create_time}}</text>
			</view> -->
		</view>

		<view class="bgf home-content br">
			<view @click="addlabel" class="box-pack-between list flex-y-center br">
				<text class="ft32">文件预览</text>
				<!-- 				<view class="flex-y-center">
					<view class="text-1" style="width: 200rpx;text-align: right;">
					</view>
					<text class="iconfont icongengduo"></text>
				</view> -->
			</view>
			<view  class="code-img">
				<image @click="play" v-if="!is_play" src="../../static/images/play.png" mode="aspectFit">
				</image>
				<image @click="Pause" v-else src="../../static/images/puash.png" mode="aspectFit" ></image>
				<view class="">
					{{is_play?'暂停':'播放'}}
				</view>
			</view>
			

		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				info: {},
				is_enit: false,
				URL: getApp().globalData.URL,
				is_play: false
			}
		},
		onLoad(e) {
			this.info = uni.getStorageSync("audio-info");
			console.log("this.info", this.info.src)
			innerAudioContext.src = this.URL + this.info.src;
		},
		onHide() {
			innerAudioContext.stop();
		},
		onUnload() {
			innerAudioContext.stop();
		},
		onShow(e) {
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
				this.is_play = true
			});
			innerAudioContext.onError((res) => {
			console.log('错误事件');
				console.log(res.errCode);
				this.is_play = false
			});
			innerAudioContext.onEnded(() => {
				console.log('自然结束');
				this.is_play = false
			});
			innerAudioContext.onPause(() => {
				console.log('暂停播放');
				this.is_play = false
			});
		},
		methods: {
			play() {
				innerAudioContext.play();
			},

			Pause(e) {

				innerAudioContext.pause();

			},

			enit(e) {
				this.is_enit = !this.is_enit;
			},

			del(e) {
				uni.showModal({
					title: '删除提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							var url = "material/delete";
							this.request({
								url,
								data: {
									token: uni.getStorageSync("token"),
									id: this.info.id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === '200') {
									uni.showToast({
										title: '删除成功',
										icon: 'none',
										duration: 1000,
										success: (res) => {
											setTimeout(() => {
												var pages = getCurrentPages();
												var prevPage = pages[pages.length -2]; //上一个页面
												prevPage.setData({
													is_video: 2,
												})
												uni.navigateBack();
											}, 2e3)
										},
									})
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 2000,
									success: (res) => {},
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},


		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FA;
	}

	.home-content {
		width: 690rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 14rpx;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
		margin: 0 auto;
		position: relative;
		font-size: 28rpx;
		padding: 0 24rpx;
		margin-top: 30rpx;

		.list {
			height: 100rpx;
			color: #999999;

			.list-title {
				color: #000000;
				font-size: 30rpx;
			}

			.list-icon {
				width: 29rpx;
				height: 29rpx;
				margin-right: 6rpx;
			}
		}

		.home-content-item {
			padding-bottom: 24rpx;

			.home-left-name {
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #99a0ad;
				min-width: 200rpx;
			}

			.home-left-input {
				border: 1rpx solid #ccc;
				padding: 10rpx;
				word-break: break-all;
				flex: 1;
			}

		}
	}

	.info-group {
		color: #999999;
		display: inline-block;
		border: 1rpx solid #F1F1F1;
		padding: 10rpx 20rpx;
		margin: 20rpx 20rpx;
		font-size: 30rpx;
		border-radius: 4rpx;
	}

	.video_path {
		width: 98%;
		display: block;
		margin: 0 auto;
	}

	.code-img {
		display: block;
    width: 200rpx;
    height: 200rpx;
		margin: 60rpx auto;
		text-align: center;
	}
	.code-img image{
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}
	.logo {
		width: 100rpx;
		height: 100rpx;
	}
</style>
