<template>
	<view class="content">
		<view class="content-textarea">
			<view class="">
				标题
			</view>
			<view class="">
				{{orderDetail && orderDetail.title ? orderDetail.title : '' }}
			</view>
		</view>
		<view class="content-textarea">
			<view class="">
				成交金额
			</view>
			<view class="">
				{{orderDetail && orderDetail.actualAmount ? orderDetail.actualAmount : ''}}
			</view>
		</view>
		<view class="content-photograph" >
			<view class="">
				图片说明
			</view>
			<view class="content-photograph-photo">
				<image class="content-photograph-photo-graph" :src="v.url" mode=""
					v-for="(v ,index) in orderDetail.fileVos" :key="v.id" v-if="v.fileType == 'picture'"></image>
			</view>
			<view class="noData-text">暂无数据</view>
		</view>
		<view class="content-frequency">
			<view class="">
				视频说明
			</view>
			<view v-if="orderDetail && orderDetail.fileVos.length && v.fileType == 'video'" v-for="(v ,index) in orderDetail.fileVos" :key="v.id" >
				<video v-if="v.fileType == 'video'" id="myVideo"
					:src="v.url"
					@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu controls
					:show-fullscreen-btn='false'></video>
			</view>
			<view class="noData-text">暂无数据</view>
		</view>
		<view class="content-voice">
			<view class="">
				语音说明
			</view>
			<view class="margin-top-two">
				<free-audio startPic='../../static/stopStatus.png' endPic='../../static/startStatus.png' audioId='audio1'
					:url='path' :isDel="false"></free-audio>
					<view class="noData-text">暂无数据</view>
			</view>
			<!-- <view class="content-voice-audio" @click="doPlay()"></view> -->
		</view>
		<view class="content-remarks">
			<view class="">
				备注说明
			</view>
			<u--textarea v-model="orderDetail.remark" placeholder="请输入内容" disabled></u--textarea>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		orderDetailMsg
	} from '../../api/system/index.js'
	import apiBaseConfig from '@/config/index.js';
	import freeAudio from '../../components/chengpeng-audio/free-audio.vue'
	export default {
		components:{
			freeAudio
		},
		data() {
			return {
				imgBgUrl: apiBaseConfig.imgBgUrl,
				globalData: getApp().globalData,
				scrollTopHeader: 0,
				orderDetail:{},
				path:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
			};
		},
		onLoad(option) {
			console.log(option.id,'结束')
			this.getDetailData(option.id)
			this.timer = null;
			this.innerAudioContext = uni.createInnerAudioContext();
			// 监听音频进入可以播放状态的事件
			this.innerAudioContext.onCanplay(() => {
				this.innerAudioContext.duration;
				// 延迟大约300ms以上才能获取音频总时长
				setTimeout(() => {
					// 获取音频总时长
					this.duration = this.formatSeconds(this.innerAudioContext.duration);
				}, 300)
			});
			// 监听音频播放
			this.innerAudioContext.onPlay(() => {
				// 获取当前音频的播放时间
				this.timer = setInterval(() => {
					this.currentTime = this.formatSeconds(this.innerAudioContext.currentTime);
				}, 1000)

			})
		},
		methods: {
			getDetailData(id){
				let that = this
				orderDetailMsg({id:id}).then(res=>{
					console.log(res.data,'详情')
					if(res.code == 200){
						that.orderDetail = res.data
					}
				})
			},
			// 播放
			doPlay() {
				if (!this.innerAudioContext.src) {
					// 音频地址
					this.innerAudioContext.src =
						"https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3";
				}
				this.innerAudioContext.play();
			},
			// 暂停
			doPause() {
				this.innerAudioContext.pause();
				// 清除定时器
				clearInterval(this.timer);
			},
			// 将秒转换成03:30格式
			formatSeconds(value) {
				let minute = parseInt(value / 60);
				let second = parseInt(value % 60);
				if (minute < 10) {
					minute = "0" + minute
				}
				if (second < 10) {
					second = "0" + second
				}
				return minute + ":" + second;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0rpx 40rpx 160rpx;

		&-textarea {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 10rpx;
			border-bottom: 1rpx solid #E7E7E7;

			>view {
				font-size: 26rpx;
				font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
				font-weight: 400;
				color: #333333;
			}
		}

		&-photograph {
			padding: 30rpx 0rpx;

			&-photo {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				&-graph {
					margin-top: 20rpx;
					margin-right: 20rpx;
					width: 210rpx;
					height: 210rpx;
				}

				&-graph:nth-child(3n) {
					margin-right: 0rpx;
				}
			}

		}

		&-frequency {
			padding: 30rpx 0rpx;

			>view {
				// display: flex;

				>video {
					margin-top: 20rpx;
					width: 373rpx;
					height: 210rpx;
				}
			}
		}

		&-voice {
			padding: 30rpx 0rpx;

			&-audio {
				margin-top: 20rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				height: 68rpx;
			}
		}

		&-remarks {
			>view {
				margin-bottom: 20rpx;
			}
		}
	}
</style>
