<template>
	<view class="content">
		<view class="content-textarea">
			<view class="">
				公司名称
			</view>
			<view class="">
				{{orderDetail && orderDetail.title ? moneyFormat(orderDetail.title) : '' }}
			</view>
		</view>
		<view class="content-textarea">
			<view class="">
				成交金额
			</view>
			<view class="">
				{{orderDetail && orderDetail.actualAmount ? moneyFormat(orderDetail.actualAmount) : ''}}
			</view>
		</view>
		<view class="content-photograph">
			<view class="">
				图片说明
			</view>
			<view class="content-photograph-photo" v-if="orderDetail && orderDetail.pictureList.length">
				<image class="content-photograph-photo-graph" :src="v.url" mode=""
					v-for="(v ,index) in orderDetail.pictureList" :key="v.id"></image>
			</view>
			<view v-else class="noData-text">暂无数据</view>
		</view>
		<view class="content-frequency">
			<view class="">
				视频说明
			</view>
			<view v-if="orderDetail && orderDetail.videoList.length" v-for="(v ,index) in orderDetail.videoList"
				:key="v.id">
				<video :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" v-if="orderDetail && orderDetail.voiceList.length">
				<free-audio startPic='../../static/stopStatus.png' endPic='../../static/startStatus.png'
					audioId='audio1' :url='orderDetail.voiceList[0].url' :isDel="false"></free-audio>
			</view>
			<view v-else class="noData-text">暂无数据</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,
		orderDetailMsgNew
	} 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'
			};
		},
		computed: {
			// 格式化金额，等位数转换为星
			moneyFormat(e) {
				return e => {
					if (e || e == 0) {
						e = e.toString();
					}
					let temp = [];
					e.split('').forEach(item => {
						temp.push('*');
					});
					return temp.join('');

				};
			}
		},
		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: {
			async getDetailData(id) {
				let that = this
				const data_back = await orderDetailMsgNew({
					id: id
				})
				console.log(data_back, '返沪')
				const {
					code,
					data
				} = data_back
				that.orderDetail = data
				// orderDetailMsgNew({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>